Cards | UCLA Component Library

Report an Issue Join the Slack Discussion

Preview articles, topics, and events in a visual way.

Usability Guidance

Use plain language when writing headlines and descriptions.
Avoid technical language, acronyms or jargon people don’t understand.
Front-load the first 2 words of your headlines for easy eye scanning.
Limit descriptions below headlines to one sentence or 2-3 lines.
Use original images rather than stock images to maintain credibility and trust among your users.

Further Reading

Cards (Inclusive Components)
5 Tips for Writing Headlines That Convert (Nielsen Norman Group)
First 2 Words: A Signal for the Scanning Eye (Nielsen Norman Group)

Accessibility Requirements

Link the card’s headline, heading or title to provide the most succinct description to screen readers and search engines. Both technologies use links to understand and navigate document structure.
Wrap your link around the image too if you decide to include one.
Only use one link per card.
Write alt text for any images you include.
Avoid linking from buttons with generic labels like “read more” or “view details”. Screen readers cannot differentiate card topics with the same link text.

Basic Card

Do’s and Don’ts

Do’s

Do adjust the container color of the card to grey-05 if it’s being used on a white background.

Don’ts

Don’t adjust the container color to a color other than white or grey-05.
Don’t use primary or secondary buttons in cards.

Code

Use the <article> element to denote your card as a standalone element within the body of your page. Basic Card backgrounds will have a white background by default and should be used on dark backgrounds. For usage on light backgrounds, change the component’s parent “basic-card” class to “basic-card-grey”.

<article class="basic-card">
  <img class="basic-card__image" src="/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
  <div class="basic-card__info-wrapper">
    <h1 class="basic-card__title"><span>{{ title }}</span></h1>
    <p class="basic-card__description">{{ description }}</p>
    <div class="basic-card__buttons">
      {{#each button}}
        <button class="btn btn--tertiary">
          {{ cta-title }}
        </button>
      {{/each}}
    </div>
  </div>
</article>

<article class="basic-card-grey">
  <img class="basic-card__image" src="/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
  <div class="basic-card__info-wrapper">
    <h1 class="basic-card__title"><span>{{ title }}</span></h1>
    <p class="basic-card__description">{{ description }}</p>
    <div class="basic-card__buttons">
      {{#each button}}
        <button class="btn btn--tertiary">
          {{ cta-title }}
        </button>
      {{/each}}
    </div>
  </div>
</article>

Event Card

Code

Use the <article> element to denote your card as a standalone element within the body of your page.

<article class="event-card">
  <a class="event-card__link" href="#">
    <img class="event-card__image" src="/img/examples/event-card-example-1.jpg" alt="Two children on their phones under the blankets">
    <h1 class="event-card__title"><span>{{ title }}</span></h1>
  </a>
  <div class="event-card-info">
    <div class="event-card-info__date">
      <span class="small-block">
        <span class="event-card-info__day">Wed</span>
        <span class="event-card-info__month">Aug</span>
      </span>
      <span class="event-card-info__number">19</span>
    </div>
    <div class="event-card-info__time"><object class="event-card-icon__time" tabindex="-1" data="https://webcomponents.ucla.edu/img/icons/denotive/time--grey60.svg" type="image/svg+xml"></object>1 p.m. PDT | 4 p.m. EDT</div>
    <div class="event-card-info__location"><object class="event-card-icon__location" tabindex="-1" data="https://webcomponents.ucla.edu/img/icons/denotive/location--grey60.svg" type="image/svg+xml"></object>Moore Hall 100</div>
    <div class="event-card-info__description">{{ description }}</div>
  </div>
</article>

Featured Story Card

Do’s and Don’ts

Do’s

Only use one Featured Card per section.

Don’ts

Don’t stack multiple Featured Cards in one section.

Code

Use the <article> element to denote your card as a standalone element within the body of your page. Featured story cards should be included within a parent “section” or “div” tag with the class, “story”. Non-featured story cards (shown in the next section) can be included below featured stories.

<section class="story">
  <div class="story__featured">
    <article class="story__featured-card">
      <a href="#" tabindex="-1">
        <img class="story__featured-image" src="/img/examples/featured-story-bill-and-john.jpg" alt="Bill Walton with a drawing of Coach John Wooden.">
      </a>
      <div class="story__featured-content">
        <h3 class="story__featured-title"><a class="link" href="#">Featured Story</a></h3>
        <p class="story__featured-blurb">Hall of Famer Bill Walton '74 recently talked about his approach to life, what he's learned and his love for his alma mater.</p>
        <p class="story__featured-source">Source: <a class="link" href="#">UCLA Magazine</a></p>
      </div>
    </article>
  </div>
</section>

Story Card

Code

Use the <article> element to denote your card as a standalone element within the body of your page.

 <article class="story__secondary-card has-background-white">
  <a class="story__secondary-card-link" href="#">
    <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
    <p class="story__secondary-card-date">September 02, 2021</p>
    <h3 class="story__secondary-card-title"><span>Society, Struggle, Scholarship</span></h3>
  </a>
  <div class="story__secondary-card-content">
    <p class="story__secondary-card-blurb">As UCLA’s four ethnic studies centers celebrate their 50th anniversary, their mission  —  to use advanced research to bring about social justice  —  takes on added urgency.</p>
    <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source">UCLA Magazine</a></p>
  </div>
</article>


<!-- Add class `has-background-light-grey` to the parent level to giv the card a grey background. -->
<article class="story__secondary-card has-background-lightest-grey-2">
  <a class="story__secondary-card-link" href="#">
    <img class="story__secondary-card-image" src="/img/examples/story-danielle.jpg" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
    <p class="story__secondary-card-date">September 02, 2021</p>
    <h3 class="story__secondary-card-title"><span>Society, Struggle, Scholarship</span></h3>
  </a>
  <div class="story__secondary-card-content">
    <p class="story__secondary-card-blurb">As UCLA’s four ethnic studies centers celebrate their 50th anniversary, their mission  —  to use advanced research to bring about social justice  —  takes on added urgency.</p>
    <p class="story__secondary-card-source">Source: <a href="#" class="story__secondary-card-link source"><span>UCLA Magazine</span></a></p>
  </div>
</article>

Person Card

Code

Use the <article> element to denote your card as a standalone element within the body of your page. A Person Card’s background will have a white background by default and should be used on dark backgrounds. For usage on light backgrounds, change the component’s parent “person-card” class to “person-card-grey”.

<article class="person-card">
  <img class="person-card__image" src="/img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
  <div class="person-card__info-wrapper">
    <h1 class="person-card__name">Gene Block</h1>
    <h2 class="person-card__department">Title, Department</h2>
    <p class="person-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>
  </div>
</article>

<article class="person-card-grey">
  <img class="person-card__image" src="/img/examples/person-card-gene.jpg" alt="Headshot of Gene Block">
  <div class="person-card__info-wrapper">
    <h1 class="person-card__name">Gene Block</h1>
    <h2 class="person-card__department">Title, Department</h2>
    <p class="person-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>
  </div>
</article>