Card

Elevated

<div class="card card--elevated card--state">
  <div class="padding-3">
    Elevated
  </div>
</div>

<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

<div class="card card--filled card--state">
  <div class="padding-3">
    Filled
  </div>
</div>

<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

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

<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>

Custom

<div class="card background-surface-container">
  <div class="padding-3">
    Custom
  </div>
</div>