Working together for the ultimate brand experience

Royal Canin Design Language

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.

A Dachshund jumping

Meta 1

Headline

Meta 2

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

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

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>

Copied!

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.

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

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>

Copied!

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.

Classes:

  • rc-one-column
  • rc-two-column
  • rc-three-column
  • rc-four-column
  • rc-five-column
  • rc-six-column

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

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>

Copied!

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.

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

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>

Copied!

Small cards grid

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

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

A Dachshund jumping

Headline

A Dachshund jumping

Meta 1

Headline

Meta 2

A Dachshund jumping

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>

Copied!