Card

Card

Elevated

Elevated

Headline

Text
<a href="#" class="card card--elevated">
  <div class="padding-3">
    Elevated
  </div>
</a>

<div class="card card--elevated">
  <div class="padding-3">
    <h3 class="headline-small margin-top-0 margin-bottom-3">
      Headline
    </h3>
    <div class="body-medum margin-bottom-3">
      Text
    </div>
    <div class="display-flex justify-content-flex-end">
      <button type="button" class="button button--filled">
        Action
      </button>
    </div>
  </div>
</div>

Filled

Filled

Headline

Text
<a href="#" class="card card--filled">
  <div class="padding-3">
    Filled
  </div>
</a>

<div class="card card--filled">
  <div class="padding-3">
    <h3 class="headline-small margin-top-0 margin-bottom-3">
      Headline
    </h3>
    <div class="body-medum margin-bottom-3">
      Text
    </div>
    <div class="display-flex justify-content-flex-end">
      <button type="button" class="button button--filled">
        Action
      </button>
    </div>
  </div>
</div>

Outlined

Outlined

Headline

Text
<a class="card card--outlined">
  <div class="padding-3">
    Outlined
  </div>
</a>

<div class="card card--outlined">
  <div class="padding-3">
    <h3 class="headline-small margin-top-0 margin-bottom-3">
      Headline
    </h3>
    <div class="body-medum margin-bottom-3">
      Text
    </div>
    <div class="display-flex justify-content-flex-end">
      <button type="button" class="button button--filled">
        Action
      </button>
    </div>
  </div>
</div>