Cards are a common minimalistic design tool used to segregate sections of your content.

Basic Card

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<div class="c-card">
  <div class="c-card__item">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
</div> 

Dividers

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Divider

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer
<div class="c-card">
  <div class="c-card__item c-card__item--divider">Header</div>
  <div class="c-card__item">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <div class="c-card__item c-card__item--divider">Divider</div>
  <div class="c-card__item">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <div class="c-card__item c-card__item--divider">Footer</div>
</div> 

Colors

Add --brand , --info , --warning , --successful or --error modifier to the card items to change their background colors.

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Divider

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer
<div class="c-card">
  <div class="c-card__item c-card__item--brand">Header</div>
  <div class="c-card__item c-card__item--info">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <div class="c-card__item c-card__item--warning">Divider</div>
  <div class="c-card__item c-card__item--success">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <div class="c-card__item c-card__item--error">Footer</div>
</div> 

Use the header, body and footer element classes to construct some nice cards.

Heading
Sub-heading

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<div class="c-card">
  <header class="c-card__header">
    <h2 class="c-heading">
      Heading
      <div class="c-heading__sub">Sub-heading</div>
    </h2>
  </header>
  <div class="c-card__body">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <footer class="c-card__footer">
    <div class="c-input-group">
      <button class="c-button c-button--block c-button--brand">Button</button>
      <button class="c-button c-button--block c-button--info">Button</button>
    </div>
  </footer>
</div> 

You can push the footer buttons right to the edges of the card using .c-card__footer--block .

Heading
Sub-heading

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<div class="c-card">
  <header class="c-card__header">
    <h2 class="c-heading">
      Heading
      <div class="c-heading__sub">Sub-heading</div>
    </h2>
  </header>
  <div class="c-card__body">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <footer class="c-card__footer c-card__footer--block">
    <div class="c-input-group">
      <button class="c-button c-button--block c-button--brand">Button</button>
      <button class="c-button c-button--block c-button--info">Button</button>
    </div>
  </footer>
</div> 

With Images

Images are best placed within the card at the same level as the header, body and footer

Heading
Sub-heading

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

<div class="c-card">
  <img class="o-image" src="https://unsplash.it/1024/500?random">
  <header class="c-card__header">
    <h2 class="c-heading">
      Heading
      <div class="c-heading__sub">Sub-heading</div>
    </h2>
  </header>
  <div class="c-card__body">
    <p class="c-paragraph">Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.</p>
  </div>
  <footer class="c-card__footer c-card__footer--block">
    <div class="c-input-group">
      <button class="c-button c-button--block c-button--brand">Button</button>
      <button class="c-button c-button--block c-button--info">Button</button>
    </div>
  </footer>
</div> 

Card Items

Item 1
Item 2
Divider
Item 3
Item 4
<div class="c-card">
  <div class="c-card__item">Item 1</div>
  <div class="c-card__item">Item 2</div>
  <div class="c-card__item c-card__item--divider">Divider</div>
  <div class="c-card__item">Item 3</div>
  <div class="c-card__item">Item 4</div>
</div> 

Grouped Items

Grouping card items couldn't be easier. Add the .c-card--grouped modifier which will remove the item borders. Then insert a .c-card__divider element into the list, which creates a horizontal line.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<div class="c-card c-card--grouped">
  <div class="c-card__item">Item 1</div>
  <div class="c-card__item">Item 2</div>
  <div class="c-card__divider"></div>
  <div class="c-card__item">Item 3</div>
  <div class="c-card__item">Item 4</div>
  <div class="c-card__item">Item 5</div>
  <div class="c-card__divider"></div>
  <div class="c-card__item">Item 6</div>
  <div class="c-card__item">Item 7</div>
  <div class="c-card__item">Item 8</div>
</div>