Class .wb-card

Use the card when we want to direct the user's attention to the content inside the card.

<div class="wb-card">
  <h1 class="wb-heading-3">Card title</h1>
  <p class="wb-text">Text within the card</p>
</div>

Modifier .wb-card--inverse

Apply the inverse style when we want to de-emphasize the content inside the card. When using the inverse style, be sure to use the inverse modifiers for text inside the card.

<div class="wb-card wb-card--inverse">
  <h1 class="wb-heading-3 wb-heading--colored-inverse">Card title</h1>
  <p class="wb-text wb-text--inverse">Text within the card</p>
</div>