Cards | UCLA Web Components

Report an Issue Join the Slack Discussion

Preview articles, topics and events in a visual way.

Usage

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

<h2 class="mb-0">Card</h2>
<article class="basic-card">
  <img class="basic-card__image" src="{{path '/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="{{path '/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.

<h2 class="mt-24 mb-0">Event Card</h2>
<article class="event-card">
  <a class="event-card__link" href="#">
    <img class="event-card__image" src="{{path '/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="/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="/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.

<h2 class="mt-24">Featured Story</h2>
<section class="story">
  <div class="story__featured">
    <article class="story__featured-card">
      <a href="#" tabindex="-1">
        <img class="story__featured-image" src="{{path '/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.

<h2 class="mt-24">Story</h2>
<article class="story-card has-background-white">
  <a class="story-card-image-link" href="#">
    <img class="story-card-image" src="{{path '/img/examples/story-danielle.jpg'}}" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
  </a>
  <div class="story-card-content">
    <p class="story-card-date">September 02, 2021</p>
    <h3 class="story-card-title"><a class="story-card-link" href="#">Society, Struggle, Scholarship</a></h3>
    <p class="story-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-card-source">Source: <a href="#" class="story-card-link source">UCLA Magazine</a></p>
  </div>
</article>

<article class="story-card has-background-lightest-grey-2">
  <a class="story-card-image-link" href="#">
    <img class="story-card-image" src="{{path '/img/examples/story-danielle.jpg'}}" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
  </a>
  <div class="story-card-content">
    <p class="story-card-date">September 02, 2021</p>
    <h3 class="story-card-title"><a class="story-card-link" href="#">Society, Struggle, Scholarship</a></h3>
    <p class="story-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-card-source">Source: <a href="#" class="story-card-link source">UCLA Magazine</a></p>
  </div>
</article>

 <article class="story__secondary-card has-background-white">
  <a class="story__secondary-card-image-link" href="#">
    <img class="story__secondary-card-image" src="{{path '/img/examples/story-danielle.jpg'}}" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
  </a>
  <div class="story__secondary-card-content">
    <p class="story__secondary-card-date">September 02, 2021</p>
    <h3 class="story__secondary-card-title"><a class="story__secondary-card-link" href="#">Society, Struggle, Scholarship</a></h3>
    <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 give the card a grey background. -->
<article class="story__secondary-card has-background-lightest-grey-2">
  <a class="story__secondary-card-image-link" href="#">
    <img class="story__secondary-card-image" src="{{path '/img/examples/story-danielle.jpg'}}" alt="Danielle Dupuy, assistant director of the Ralph J. Bunche Center for African American Studies" />
  </a>
  <div class="story__secondary-card-content">
    <p class="story__secondary-card-date">September 02, 2021</p>
    <h3 class="story__secondary-card-title"><a class="story__secondary-card-link" href="#">Society, Struggle, Scholarship</a></h3>
    <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.”

<h2 class="mt-24">Person Card</h2>
<article class="person-card">
  <img class="person-card__image" src="{{path '/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 class="person-card__contact">
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Email</p>
        <a href="mailto:myemail@ucla.edu">myemail@ucla.edu</a>
      </div>
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Phone</p>
        <a href="tel:+1-555-555-5555;123">(555) 555-5555 ext. 555</a>
      </div>
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Office</p>
        <p>1111 Murphy Hall</p>
      </div>
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Mail</p>
        <p>410 Charles E. Young Drive East,<br />Los Angeles, CA 90024</p>
      </div>
    </div>
    <em class="person-card__photo-credit">Photo Credit: lorem ipsum dolore</em>
  </div>
</article>

<article class="person-card-grey">
  <img class="person-card__image" src="{{path '/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 class="person-card__contact">
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Email</p>
        <a href="mailto:myemail@ucla.edu">myemail@ucla.edu</a>
      </div>
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Phone</p>
        <a href="tel:+1-555-555-5555;123">(555) 555-5555 ext. 555</a>
      </div>
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Office</p>
        <p>1111 Murphy Hall</p>
      </div>
      <div class="person-card__contact-details">
        <p class="person-card__contact-label">Mail</p>
        <p>410 Charles E. Young Drive East,<br />Los Angeles, CA 90024</p>
      </div>
    </div>
    <em class="person-card__photo-credit">Photo Credit: lorem ipsum dolore</em>
  </div>
</article>