Skip to main content
Design System

Cards

The Card Element

  • c-card

    A basic card element has a div tag with the c-card class and a div class holding the card content. The classes on the card content style the title and paragraph tags.

    • Card Title

      Card copy.


    <!-- Start - Auto Card Grid -->
     <div class="c-card">
      <div class="c-card__content">
       <!-- Start - Card Content -->
        <h3 class="c-card__title"> Card Title</h3>
        <p class="c-card__copy"> Card copy.</p>
       <!-- End - Card Content -->
      </div>
     </div>
    <!-- End - Auto Card Grid -->

  • oux-card

    The OUX card is a more straightforward snippet where the OUX class defines the card style and the element's styles without the need for the different classes.

    • Card Title

      Card copy.


    <!-- Start - Auto OUX Card Grid -->
     <div class="oux-card">
      <!-- Start - Card Content -->
       <h3>Card Title</h3>
       <p>Card copy.</p>
      <!-- End - Card Content -->
     </div>
    <!-- End - Auto Card Grid -->

Styling a Card

You can change the style of a card by adding some classes to it. There are two more card design options: the Raised Card and the Callout Card. To add a Raised style to a card, you need to add the class class="c-card--raised" . The Callout card has the class class="c-card--callout" .

  • Basic Card

    • Card Title

      Card copy.


     <div class="c-card">
      <div class="c-card__content">
       <!-- Start - Card Content -->

       <!-- End - Card Content -->
      </div>
     </div>

     <div class="oux-card">
      <!-- Start - Card Content -->

      <!-- End - Card Content -->
     </div>

  • Raised Card

    • Card Title

      Card copy.


     <div class="c-card c-card--raised">
      <div class="c-card__content">
       <!-- Start - Card Content -->

       <!-- End - Card Content -->
      </div>
     </div>

     <div class="oux-card c-card--raised">
      <!-- Start - Card Content -->

      <!-- End - Card Content -->
     </div>

  • Callout Card

    • Card Title

      Card copy.


     <div class="c-card c-card--callout">
      <div class="c-card__content">
       <!-- Start - Card Content -->

       <!-- End - Card Content -->
      </div>
     </div>

     <div class="oux-card c-card--callout">
      <!-- Start - Card Content -->

      <!-- End - Card Content -->
     </div>

Anatomy of a Card

You can add many other elements from the simple card snippets and create different styles. It's possible to add media, buttons, links, and lists to create a more styled card.

Adding Media to a Card

There are three card styles for cards with images. You can check the highlighted codes to see what you need to add pictures to the different cards:

Full-Bleed Media

placeholder

Card Title

Card copy. Lorem ipsum.

<div class="c-card">
 <div class="c-card__media">
  <img src="https://picsum.photos/480?random=1" alt="placeholder" />
 </div>
 <div class="c-card__content" >
  <!-- Start - Card Content -->
   <!-- End - Card Content -->
 </div>
</div>

Inset Media

placeholder

Card Title

Card copy. Lorem ipsum.

<div class="c-card">
 <div class="c-card__content">
  <div class="c-card__media">
   <img src="https://picsum.photos/480?random=1" alt="placeholder" />
  </div>
  <!-- Start - Card Content -->
  <!-- End - Card Content -->
 </div>
</div>

Media Flex

  • placeholder

    Card Title

    Card copy. Ham bacon tempor eiusmod laboris salami sausage.

    Button Link

  • <div class="c-card">
     <div class="c-card__content o-media-flex">
      <div class="o-media-flex__media">
       <img src="https://picsum.photos/480?random=1" alt="placeholder" />
      </div>
      <div class="o-media-flex__content">
       <!-- Start - Card Content -->
       <!-- End - Card Content -->
      </div>
     </div>
    </div>

Adding List to a Card

  • Card Title

    • List Item 1
    • List Item 2
      • Nested List - Item 1
      • Nested List - Item 2
      • Nested List - Item 3
    • List Item 3
    • List Item 4
 <div class="c-card">
  <div class="c-card__content">
   <!-- Start - Card Content -->
     <ul>
       <li>List Item 1</li>
       <li>List Item 2</li>
       <ul>
         <li>Nested List - Item 1</li>
         <li>Nested List - Item 2</li>
         <li>Nested List - Item 3</li>
       </ul>
       <li>List Item 3</li>
       <li>List Item 4</li>
     </ul>
   <!-- End - Card Content -->
  </div>
 </div>

Buttons and Links

Card Title

Card Copy

Link Copy
Button Copy
 <div class="c-card">
  <div class="c-card__content">
   <!-- Start - Card Content -->
    <a class="c-action-link" href="#">Link Copy</a>
    <a class="c-button" href="#">Button Copy</a>
   <!-- End - Card Content -->
  </div>
 </div>