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

Cards

Cards are one of the most commonly used components within Design Language and are frequently used to showcase or to sign post to content such as news articles, products, pets and breeds throughout any Royal Canin project. 'There are two types of cards that have been established with specific uses for both revolving around alignment and image ratios. These can be used with various different combinations of heading, meta, body copy and button combinations to create cards specific to any project. Utility classes available:'

Card Utility Classes

Utility Class	Description
.rc-match-heights	All cards in the same row will match the height of the tallest card

The following structure and hierarchy that makes up the content of any type of card can be outlined with the following:

Image
Meta 1 (taxonomy, categories)
Headline
Rating (specifically for products)
Price (specifically for products)
Meta 2 (post dates, miscellaneous/ can only appear if Body copy does not)
Body copy (100 character maximum/ can only appear if Meta 2 does not)
Button
Hyperlink
Icon Button
Custom actions (specifically for projects that require additional features on cards)
Footer Button

This hierarchy must be followed at all times for Cards and means that familiarity for users can be retained across any Royal Canin project. Though structurally always the same, elements such as Icon Buttons can be positioned to sit nearer up a card such as in the Card Type A example where the icon button appears over the top of an image and would almost appear to be first in the anatomy though it is technically not.

Cards can sit within multiple column variations and have specific rules around their padding and heading sizes based on how much space is available due to the amount of cards showcased per row.

Card Type A

Card Type A is used for any type of content that is not product, breed or pet specific. This includes examples such as News posts, expert advice posts, event listings, content pages etc.

Card A images must be supplied as 16:9 aspect ratio.

This type of card allows content to be featured that may also include taxonomy or date information for said content.

Allowed content elements that can make up this Card:

Image 16:9
Meta 1
Headline
Meta 2
Body copy
Icon Button
Footer Button

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

<div class="rc-layout-container rc-three-column rc-match-heights">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
        <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Card Type A - Featured

This is how Card Type A reacts when cards are set as Featured. For use at the top of a page only. This is the minimum and maximum amount of cards allowed for this Featured view to function.

Meta 1

Headline

Meta 1

Headline

Meta 1

Headline

<div class="rc-layout-container rc-three-column">
  <div class="rc-column rc-double-width rc-padding--none">
    <article class="rc-card rc-card--a rc-card--featured">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" 0,1,2,3="">
        <span class="rc-screen-reader-text">Click interaction</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1500x844?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta rc-margin-bottom--md--mobile">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column rc-padding--none">
    <article class="rc-card rc-card--a rc-card--featured">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" 0,1,2,3="">
        <span class="rc-screen-reader-text">Click interaction</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1500x844?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta rc-margin-bottom--md">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
    <article class="rc-card rc-card--a rc-card--featured">
      <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" 0,1,2,3="">
        <span class="rc-screen-reader-text">Click interaction</span>
      </button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1500x844?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta rc-margin-bottom--md">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Card Layout - News/Article cards

For the recommended layout for news, article and product cards, you can add the rc-news-article-card class to the rc-layout-container container. This will ensure the correct columns per screen size are used. There is also a rc-news-article-card--sidebar-present that can be used when a sidebar is present to reduce the columns used appropriately.

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

<div class="rc-layout-container rc-news-article-card">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
        <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

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

<div class="rc-layout-container rc-news-article-card--sidebar-present">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
        <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Card Layout - Event cards

For the recommended layout for news, article and product cards, you can add the rc-event-card class to the rc-layout-container container. This will ensure the correct columns per screen size are used. There is also a rc-event--card--sidebar-present that can be used when a sidebar is present to reduce the columns used appropriately.

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

<div class="rc-layout-container rc-event-card">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
        <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

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

<div class="rc-layout-container rc-event-card--sidebar-present">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
        <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Link cards

A card can be made linkable by wrapping the article in <a class="rc-card__link" href="#">. Also make sure to remove the onClick event on the action button and replace with your own if needed. Utility class .rc-match-heights works here as well.

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

<div class="rc-layout-container rc-three-column rc-layout-grid rc-match-heights">
  <div class="rc-column">
    <a class="rc-card__link" href="#">
      <article class="rc-card rc-card--a">
        <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
            <h1 class="rc-card__title rc-delta">Headline</h1>
            <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
          </header>
          <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
        </div>
      </article>
    </a>
  </div>
  <div class="rc-column">
    <a class="rc-card__link" href="#">
      <article class="rc-card rc-card--a">
        <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
            <h1 class="rc-card__title rc-delta">Headline</h1>
            <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
          </header>
        </div>
      </article>
    </a>
  </div>
  <div class="rc-column">
    <a class="rc-card__link" href="#">
      <article class="rc-card rc-card--a">
        <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
        </picture>
        <div class="rc-card__body">
          <header>
            <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
            <h1 class="rc-card__title rc-delta">Headline</h1>
          </header>
        </div>
      </article>
    </a>
  </div>
  <div class="rc-column">
    <a class="rc-card__link" href="#">
      <article class="rc-card rc-card--a">
        <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
        </picture>
        <div class="rc-card__body">
          <header>
            <h1 class="rc-card__title rc-delta">Headline</h1>
          </header>
        </div>
      </article>
    </a>
  </div>
</div>

Card Type B

Card Type B is used for content that needs more prominence than content featured in Card Type A such as products, pets and breeds. It allows for additional content elements featured within the Card structure for more flexibility.
Content within Card Type B is also centre aligned and this is based on the image ratio that must be used within this Card being 4:3 (rather than 16:9) with centralised imagery based purely on showcasing product or pet shots on isolated white backgrounds.
This type of card allows products to be featured that may also include ratings for said product as well as pricing information.
Allowed content elements that can make up this Card:

Image 4:3
Meta 1
Headline
Rating
Price
Body copy
Button
Hyperlink
Icon Button
Custom actions
Footer Button

Card Layout - Content cards

For the recommended layout for news, article and product cards, you can add the rc-content-card class to the rc-layout-container container. This will ensure the correct columns per screen size are used. There is also a rc-content-card--sidebar-present that can be used when a sidebar is present to reduce the columns used appropriately.

Meta 1

Headline

$123.45 Button label

<div class="rc-layout-container rc-content-card">
  <div class="rc-column">
    <article class="rc-card rc-card--b">
      <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">
        <source srcset="https://placehold.it/800x600?text=4:3" media="" />
        <img src="https://placehold.it/800x600?text=4:3" 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>
        <span class="rc-card__price">$123.45</span>
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Button label</a>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
</div>

Content Card with sidebar

Meta 1

Headline

$123.45 Button label

or Secondary Actions

Meta 1

Headline

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

Button label

Meta 1

Headline

Button label

Headline

<div class="rc-layout-container rc-content-card--sidebar-present">
  <div class="rc-column">
    <article class="rc-card rc-card--b">
      <button class="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/800x600?text=4:3" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
        <span class="rc-card__price">$123.45</span>
        <a class="rc-btn rc-btn--two rc-btn--sm" href="#/" aria-label="Button">Button label</a>
        <p>
          or
          <a class="rc-styled-link">Secondary Actions</a>
        </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--b">
      <button class="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/800x600?text=4:3" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
        <p>Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh.,</p>
        <a class="rc-btn rc-btn--two rc-btn--sm" href="#/" aria-label="Button">Button label</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--b">
      <button class="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/800x600?text=4:3" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Headline</h1>
        </header>
        <a class="rc-btn rc-btn--two rc-btn--sm" href="#/" aria-label="Button">Button label</a>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--b">
      <button class="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/800x600?text=4:3" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Card Type A & B - custom grids

Cards in this structure will follow the default behaviour but when extra cards are added that exceed the number specified in the class name (e.g. 5 cards in a 4 card container) the extra items will drop to their own rows. Each row will be the same height as the tallest card within that row.

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

<div class="rc-layout-container rc-three-column rc-layout-grid rc-match-heights">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
        <p class="rc-margin-bottom--sm--mobile">Proin sem quam, ornare ac tortor sit amet, blandit aliquam turpis. Duis sit amet turpis vel nibh. </p>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-meta rc-margin-bottom--sm--mobile">Meta 1</p>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
      <div class="rc-card__footer">
        <a class="rc-btn rc-btn rc-btn--two rc-btn--sm" aria-label="Button">Footer button</a>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <h1 class="rc-card__title rc-delta">Headline</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Cards - different title sizes

Although there are two very clear use cases for cards (products/articles), there might be more usage examples. That's why you can use a default title size styling by applying .rc-card__title class or you can add generic heading class (like .rc-alpha, .rc-beta etc. - see Typography) to modify size/line-height. We recommend using default style, but in some cases, modyfing is allowed.

Meta 1

Default title size

Meta 2

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

Meta 1

Zeta title size

Meta 2

Meta 1

Alpha title size

<div class="rc-layout-container rc-three-column rc-layout-grid rc-match-heights">
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title">Default title size</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-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title rc-zeta">Zeta title size</h1>
          <p class="rc-card__meta">Meta 2</p>
        </header>
      </div>
    </article>
  </div>
  <div class="rc-column">
    <article class="rc-card rc-card--a">
      <button class="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/800x450?text=16:9" alt="Kitten and puppy playing with ball" />
      </picture>
      <div class="rc-card__body">
        <header>
          <p class="rc-card__meta">Meta 1</p>
          <h1 class="rc-card__title rc-alpha">Alpha title size</h1>
        </header>
      </div>
    </article>
  </div>
</div>

Working together for the ultimate brand experience

Cards

Card Utility Classes

Card Type A

Card Type A - Featured

Card Layout - News/Article cards

Card Layout - Event cards

Link cards

Card Type B

Card Layout - Content cards

Content Card with sidebar

Card Type A & B - custom grids

Cards - different title sizes