Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

Grid container

The Web Design Language grid system is made up of 5 column options. Each column should have a 12px gutter top, bottom, left and right to ensure correct spacing. Column counts can be mixed and variations documented below will enable a wide range of column options.

Standard grid for cards

Adjusts it's self to balance the card width with the number of cards within each row. To prevent this auto-fit behaviour the class .rc-card-grid--fixed can be used.

Meta 1

Headline

Meta 2

Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 1

Headline

Meta 2

Headline

<div class="rc-card-grid rc-match-heights">
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
        <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.</p>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Standard grid for cards - fixed width

Adjusts it's self to balance the card width with the number of cards within each row. To prevent this auto-fit behaviour the class .rc-card-grid--fixed can be used.

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 1

Headline

Meta 2

Headline

Meta 1

Headline

Meta 2

Headline

<div class="rc-card-grid rc-match-heights rc-card-grid--fixed">
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Fixed columns for card grids

As an extension to the above, extra classes can be added to define the desired columns. This means when there aren't enough items per row, the cards won't fill the remaining space.

Utility Class	Description
.rc-one-column	The children of this container will be 1/1 of the total width
.rc-two-column	The children of this container will be 1/2 of the total width
.rc-three-column	The children of this container will be 1/3 of the total width
.rc-four-column	The children of this container will be 1/4 of the total width
.rc-five-column	The children of this container will be 1/5 of the total width
.rc-six-column	The children of this container will be 1/6 of the total width

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 1

Headline

Meta 2

Headline

<div class="rc-card-grid rc-match-heights rc-card-grid--fixed rc-three-column">
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Standard grid for cards - takes into account sidebar

Adjusts its self to balance the cards width with the number of cards within each row but also limits the total cards to three on older browsers to accommodate the reduced width. Newer browsers will smart fill the rows, ensuring items don't scale any smaller than 250px width.

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 1

Headline

Meta 2

Headline

<div class="rc-card-grid--withsidebar rc-match-heights">
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Small cards grid

Used with small cards that only contain a small amount of information. Goes up to six items per row.

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 1

Headline

Meta 2

Meta 1

Headline

Meta 1

Headline

Meta 2

Headline

Meta 1

Headline

Meta 1

Headline

Meta 2

Headline

<div class="rc-card-grid--small rc-match-heights">
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-grid">
    <article class="rc-card rc-card--a">
      <button class="rc-btn rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like">
        <span class="rc-screen-reader-text">Like</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1920x1080" alt="A Dachshund jumping" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Working together for the ultimate brand experience

Grid container

Standard grid for cards

Standard grid for cards - fixed width

Fixed columns for card grids

Standard grid for cards - takes into account sidebar

Small cards grid