A card often represents a discrete piece of content among a series of a common content type. This summary can contain a variety of content types, such as text, images and multimedia, or buttons and links and can lead to more detailed information.

An individual card is typically a member of a collection of similar cards, not a single card in isolation. A card is distinguished from others in its collection by its content, and cards are distinguished from the broader page context in form and with a visual separation or container.

Finally, a card is modular, which means you can vary the order of cards in a collection without destroying any individual card’s meaning.

When to use

Collections of related content. Cards help present a collection of related groups of content, like articles or sections of a website.

To organize related information.

To shorten pages and reduce scrolling when content is not crucial to read in full, especially on a mobile interface or in a side panel.

Anatomy

1. Image

2. Title (required)

3. Supporting Text (required)

4. Link

5. Container (required)

Best practices

Include information that is pertinent to user’s interest and helps them understand what kind of content they’re looking at quickly.

Color contrast is very important for legibility. To meet current accessibility standards, use only approved color combinations. Use 80% grey for text on white background to reduce eye strain.

Examples

<article class="ucla-card">
  <img
    class="ucla-card__image"
    src="../../../theme-assets/img/examples/event-card-example-1.jpg"
    alt="Two children on their phones under the blankets"
  />
  <div class="ucla-card__body">
    <h1 class="ucla-card__title"><span>How do parents embrace technology for kids, but prevent it from ruling the household?</span></h1>
    <p class="ucla-card__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</p>

      <a href="#" class="ucla-card__link">
        CTA 1
      </a>
      <a href="#" class="ucla-card__link">
        CTA 2
      </a>

  </div>
</article>

The basic card component has several elements nested in this format:

• .ucla-card - The main card container
  • .ucla-card__image - An image that spans the entire width of the card
  • .ucla-card__body - A content container that house any element and/or content
    • .ucla-card__title - Left-aligned bolded text
    • .ucla-card__description - Text for content

How do parents embrace technology for kids, but prevent it from ruling the household?

With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…

CTA 1 CTA 2

<article class="ucla-card">
    <img class="ucla-card__image" src="/theme-assets/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
    <div class="ucla-card__body">
        <h1 class="ucla-card__title">How do parents embrace technology for kids, but prevent it from ruling the household?</h1>
        <p class="ucla-card__description">With schools closed and remote learning the norm, how many hours of digital technology are acceptable for kids, and how much is too much? Can parents control when kids use tec…</p>
        <button class="ucla-btn ucla-btn--primary">
            CTA 1
        </button>
        <button class="ucla-btn ucla-btn--primary">
            CTA 2
        </button>
    </div>
</article>