Cards

<div
  class="o-grid"
  style="--grid-template: 1fr 1fr 1fr"
>
  <div class="o-grid__col">
    <div class="c-card c-card--large">
      <div class="c-card__header">
        <h2 class="c-card__title">Large</h2>
      </div>
      <div class="c-card__content"><p>Large card</p></div>
    </div>
  </div>
  <div class="o-grid__col">
    <div class="c-card">
      <div class="c-card__header">
        <h2 class="c-card__title">Default</h2>
      </div>
      <div class="c-card__content"><p>Default card</p></div>
    </div>
  </div>
  <div class="o-grid__col">
    <div class="c-card c-card--compact">
      <div class="c-card__header">
        <h2 class="c-card__title">Compact</h2>
      </div>
      <div class="c-card__content"><p>Compact card</p></div>
    </div>
  </div>
</div>

<div class="c-card c-card--large">
  <div class="c-card__header">
    <a
      href="#"
      class="c-button c-button--transparent c-button--icon-only c-card__back-button"
    >
      <span class="c-button__icon c-icon c-icon--small">
        <!-- SVG element -->
      </span>
    </a>
    <h2 class="c-card__title">Card with back button</h2>
    <div class="c-card__actions">
      <div class="c-field-group">
        <button class="c-button">
          <span class="c-button__label">
            Secondary action
          </span>
        </button>
        <button
          type="primary"
          class="c-button c-button--primary"
        >
          <span class="c-button__label">
            Primary action
          </span>
        </button>
      </div>
    </div>
  </div>
  <div class="c-card__content">
    <p>Card with back button</p>
  </div>
</div>

<div class="o-grid">
  <div class="o-grid__col">
    <div class="c-card">
      <div class="c-card__header">
        <h2 class="c-card__title">Card with shortkey</h2>
        <span class="c-shortkey c-shortkey--small">
          100
        </span>
      </div>
      <div class="c-card__content">
        <p>Card with shortkey</p>
      </div>
    </div>
  </div>
</div>