Skip to main content

Cards

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

Heading
Sub-heading

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

<blaze-card>
  <blaze-image></blaze-image>
  <blaze-card-header>
    <h2 class="c-heading u-xlarge">
      Heading
      <div class="c-heading__sub">Sub-heading</div>
    </h2>
  </blaze-card-header>
  <blaze-card-body>
    <p class="c-paragraph">
      Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.
    </p>
  </blaze-card-body>
  <blaze-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>
  </blaze-card-footer>
</blaze-card>

CSS

Basic Card

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

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

Dividers

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.

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.

<div class="c-card">
  <div role="separator" 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 role="separator" 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 role="separator" 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>

Header, Body and Footer

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

placeholder

Heading
Sub-heading

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

<div class="c-card">
  <img alt="placeholder" class="o-image" src="https://source.unsplash.com/random/1024x500">
  <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
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 role="separator" 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 role="separator" 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 role="separator" 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>