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:

  • rc-match-heights

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)

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
Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

html
            <div class="rc-layout-container rc-four-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-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-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">Headline</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">Headline</h1>
          </header>
        </div>
      </article>
    </div>

    <div class="rc-column">
      <article class="rc-card rc-card--a">
        <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">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.

html
            <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" aria-label="Like"><span class="rc-screen-reader-text">Like</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">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" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1000x562?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">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" aria-label="Like"><span class="rc-screen-reader-text">Like</span></button>
      <picture class="rc-card__image">
        <img src="https://placehold.it/1000x562?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">Headline</h1>
        </header>
      </div>
    </article>

  </div>
</div>
        

Card Type A - Product

Kitten and puppy playing with ball

Persian Kitten dry cat food

3lb bag

PERSIAN KITTEN is formulated exclusively for Pure Breed Persian kittens up to 12 months old.

Shop now
html
            <div class="rc-layout-container rc-news-article-card">
<div class="rc-column">
  <article class="rc-card rc-card--product rc-padding--sm rc-full-width">
    <button class="rc-card__action rc-btn rc-btn--action rc-btn--action--inverse rc-icon rc-like--xs rc-iconography" aria-label="Like" data-tab-init="true"><span class="rc-screen-reader-text">Like</span></button>
    <img class="rc-card__bagshot rc-padding-bottom--sm" src="/assets/images/img-b-w.png" alt="Kitten and puppy playing with ball">
    <div class="rc-text--center">
      <header>
        <h1 class="rc-card__title">Persian Kitten dry cat food</h1>
        <p class="rc-card__meta">3lb bag</p>
        <p>
            <span class="rating__stars rating__stars--inline">
              <span class="rating__off">
                <span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
                <span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
                <span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
                <span class="rc-icon rc-rate-fill--xs rc-brand1--xs"></span>
                <span class="rc-icon rc-rate-fill--xs rc-iconography--xs"></span>
              </span>
            </span>
        </p>
        <p>PERSIAN KITTEN is formulated exclusively for Pure Breed Persian kittens up to 12 months old.</p>
        <a class="rc-btn rc-btn--sm rc-btn--one" href="#/" data-tab-init="true">Shop now</a>
        <div class="rc-padding--sm rc-sm-down"></div>
      </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.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

html
            <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-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-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">Headline</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">Headline</h1>
           </header>
         </div>
       </article>
     </div>

     <div class="rc-column">
       <article class="rc-card rc-card--a">
         <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">Headline</h1>
           </header>
         </div>
       </article>
     </div>
</div>
        
Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

html
            <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-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-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">Headline</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">Headline</h1>
           </header>
         </div>
       </article>
     </div>

     <div class="rc-column">
       <article class="rc-card rc-card--a">
         <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">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.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

html
            <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-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-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">Headline</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">Headline</h1>
           </header>
         </div>
       </article>
     </div>

     <div class="rc-column">
       <article class="rc-card rc-card--a">
         <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">Headline</h1>
           </header>
         </div>
       </article>
     </div>
</div>
        
Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

html
            <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-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-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">Headline</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">Headline</h1>
           </header>
         </div>
       </article>
     </div>

     <div class="rc-column">
       <article class="rc-card rc-card--a">
         <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">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.

html
            <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-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>
    </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-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
            <p class="rc-card__meta">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-card__meta">Meta 1</p>
            <h1 class="rc-card__title">Headline</h1>
          </header>
        </div>
      </article>
      </a>
    </div>

    <div class="rc-column">
     <a class="rc-card__link" href="#">
      <article class="rc-card rc-card--a">
        <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">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
html
            <div class="rc-layout-container rc-content-card">

   <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 Action</a></p>
         </div>
       </article>
     </div>
</div>
        

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.

Kitten and puppy playing with ball

Meta 1

Headline

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

Button label
Kitten and puppy playing with ball

Headline

html
            <div class="rc-layout-container rc-content-card">

   <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 Action</a></p>
         </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>
       </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>
        
Kitten and puppy playing with ball

Meta 1

Headline

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

Button label
Kitten and puppy playing with ball

Headline

html
            <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 Action</a></p>
         </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>
       </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.
Note: the rc-layout-grid can be used on both card A and B layouts.

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Headline

Meta 2

Kitten and puppy playing with ball

Meta 1

Headline

Kitten and puppy playing with ball

Headline

Kitten and puppy playing with ball

Headline

html
            <div class="rc-layout-container rc-four-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">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-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">Headline</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">Headline</h1>
          </header>
        </div>
      </article>
    </div>

    <div class="rc-column">
      <article class="rc-card rc-card--a">
        <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">Headline</h1>
          </header>
        </div>
      </article>
    </div>

    <div class="rc-column">
      <article class="rc-card rc-card--a">
        <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">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.

Kitten and puppy playing with ball

Meta 1

Default title size

Meta 2

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

Kitten and puppy playing with ball

Meta 1

Zeta title size

Meta 2

Kitten and puppy playing with ball

Meta 1

Alpha title size

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

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 31st October 2018 [ui_assets/components/cards.yml]
    Add star rating
  • 23rd October 2018 [ui_assets/components/cards.yml]
    Add example of different title sizes for cards.
  • 25th September 2018 [ui_assets/components/cards.yml]
    Add example of cards wrapped in anchor tags with rc-match-heights rule.
  • 13th September 2018 [ui_assets/components/cards.yml]
    Grammar
  • 24th August 2018 [ui_assets/components/cards.yml]
    Increase placeholder image size on card examples.
  • 24th August 2018 [ui_assets/components/cards.yml]
    Added missing card layout example.
  • 23rd August 2018 [ui_assets/components/cards.yml]
    Update card page with new layout classes and remove redundant layout examples. Update placeholders to show aspect ratio and use https.
  • 21st August 2018 [ui_assets/components/cards.yml]
    Updated card doc to include aspec ratio info
  • 1st August 2018 [ui_assets/components/cards.yml]
    add new card type A product
  • 1st August 2018 [ui_assets/components/cards.yml]
    update docs
  • 1st August 2018 [ui_assets/components/cards.yml]
    add fixed width column docs
  • 26th July 2018 [ui_assets/components/cards.yml]
    Fix footer in the code snippet. Fix the broken cards page.
  • 26th July 2018 [ui_assets/components/cards.yml]
    Add extra documentation around match heights on cards in layout containers. Add prefix to layout containers illustrations. Remove new padding rules as we should wait for the compete set.
  • 25th July 2018 [ui_assets/components/cards.yml]
    screen reader
  • 25th July 2018 [ui_assets/components/cards.yml]
    iconography
  • 25th July 2018 [ui_assets/components/cards.yml]
    update classes
  • 25th July 2018 [ui_assets/components/cards.yml]
    prefix buttons
  • 25th July 2018 [ui_assets/components/cards.yml]
    prefix card --b
  • 25th July 2018 [ui_assets/components/cards.yml]
    prefix card images
  • 12th July 2018 [ui_assets/components/cards.yml]
    prefix cards
  • 12th July 2018 [ui_assets/components/cards.yml]
    Correct duplicate prefixes.
  • 12th July 2018 [ui_assets/components/cards.yml]
    add clickable card
  • 11th July 2018 [ui_assets/components/cards.yml]
    Added prefix to cards and type. Added prefix test page.
  • 1st June 2018 [ui_assets/components/cards.yml]
    remove beta labels
  • 24th May 2018 [ui_assets/components/cards.yml]
    fix card body spacing
  • 10th April 2018 [ui_assets/components/cards.yml]
    Combined content block and content block grouping pages
  • 10th April 2018 [ui_assets/components/cards.yml]
    Copy and markup udpates and added new html boilerplate
  • 9th April 2018 [ui_assets/components/cards.yml]
    Added new card page copy and markup
  • 1st February 2018 [ui_assets/components/cards.yml]
    Updated button classes
  • 1st February 2018 [ui_assets/components/cards.yml]
    Updated icon classes
  • 29th January 2018 [ui_assets/components/cards.yml]
    Update button classnames
  • 1st December 2017 [ui_assets/components/cards.yml]
    Restructured folder order.
  • 13th November 2017 [ui_assets/components/cards.yml]
    Added paragraph twig filter and removed p tags from YAML
  • 26th October 2017 [ui_assets/components/cards.yml]
    Replaced all icons with correct ones
  • 19th October 2017 [ui_assets/components/cards.yml]
    Ensured all instances of icons now use rc-icon base class
  • 9th October 2017 [ui_assets/components/cards.yml]
    Removed clock div from tooltip, escaped html chars in text on cards page
  • 8th September 2017 [ui_assets/components/cards.yml]
    css versioned bumped
  • 29th August 2017 [ui_assets/components/cards.yml]
    Refactored naming convention used for levels of abstraction. https://trello.com/c/H5kTHTkZ/259-copy-change-update-naming-convention-on-sidebar
  • 1st August 2017 [ui_assets/components/cards.yml]
    Use correct classes for card button. https://trello.com/c/Jb2WxVM6/266-1-bug-cards-cta-links-not-styled-correctly
  • 19th July 2017 [ui_assets/components/cards.yml]
    Added associated files to page config for use with git info collection.
  • 15th July 2017 [ui_assets/components/cards.yml]
    Git commit message sync improvements. Folder restructure.
  • 11th July 2017 [ui_assets/components/cards.yml]
    Added remaining content.