DS in CSS

Cards

Style an element like a Casebook card with the class .cb-card, and make its first child a card header by giving it the class .cb-card-header

Card header

Greetings, I'm a card.

<div class="cb-card cb-margin-default">
  <div class="cb-card-header">Card header</div>
  <div>Greetings, I'm a card.</div>
</div>

Card header with bottom border

For a card header with a bottom border, add the class .cb-border to the card header

Card header with border

Greetings, I'm a card.

<div class="cb-card cb-margin-default">
  <div class="cb-card-header cb-border">Card header with border</div>
  <div>Greetings, I'm a card.</div>
</div>

Transparent card

Make a card transparent by adding the class .cb-transparent to the card

Card header with border inside a transparent card

Greetings, I'm a transparent card.

<div class="cb-card cb-margin-default cb-transparent">
  <div class="cb-card-header cb-border">Card header with border inside a transparent card</div>
  <div>Greetings, I'm a transparent card.</div>
</div>

Summary card

Make a summary card by adding the class .cb-summary

Summary card

Greetings, I'm a summary card.

<div class="cb-card cb-summary cb-margin-default">
  <div class="cb-card-header">Summary card</div>
  <div>Greetings, I'm a summary card.</div>
</div>