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

[star rating]

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>[star rating]</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>
        

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

  • 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.