Cards – Design Portal

A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.

Demo

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae, veniam qui rem sit cumque quo? Tempore, vitae incidunt. Incidunt in fuga eius, minus ipsam corrupti voluptatum reiciendis pariatur ullam inventore.

<div class="card">
  <img class="card__image" src="https://design.system1.com/wp-content/themes/s1-design-portal/dist/img/building-image.jpg" height="213" width="300" alt=""/>
  <div class="card__description"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae, veniam qui rem sit cumque quo? Tempore, vitae incidunt. Incidunt in fuga eius, minus ipsam corrupti voluptatum reiciendis pariatur ullam inventore.</p></div>
  <button class="button button--center">Button</button>
</div>

@mixin card {
  background-color: #FFF;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

No JS! 😀

Note

Card styles will vary heavily depending on the child theme. Some variations such as rounded and shadow may be applied to all cards by default.
Images, buttons and text can be placed inside cards, but will require additional custom styling. The demos on this page are custom to the design guide, but can be referenced while building child themes.

States & Variations

Standard

Card content

<div class="card">
  <p>Card content</p>
</div>

Rounded

Card content

<div class="card card--rounded">
  <p>Card content</p>
</div>

Shadow

Card content

<div class="card card--shadow">
  <p>Card content</p>
</div>

Image, description and button

<div class="card card--shadow card--rounded">
  <img class="card__image" src="https://design.system1.com/wp-content/themes/s1-design-portal/dist/img/building-image.jpg" height="213" width="300" alt=""/>
  <div class="card__description"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae, veniam qui rem sit cumque quo? Tempore, vitae incidunt. Incidunt in fuga eius, minus ipsam corrupti voluptatum reiciendis pariatur ullam inventore.</p></div>
  <button class="button button--center">Button</button>
</div>

Usage

Cards are usually added on a case by case basis. If we want the styles of a card to be applied to certain elements, we can @include a sass mixin called card. This basic mixin is then built upon to add further styling to a 'card'.

Anatomy

Card
Card Image
Card Description
Card Button