Skip to main content

Main Content

Card

Description

Card component with several fields to ensure flexibility - a media element, headline, super headline, body content, call-to-action (CTA) link and button link. The default .su-card has an image (optional) as its media element. For a better user experience, use either the CTA link or link button but not both together.

Modifier classes for the Card component:

  • .su-card--horizontal - Postcard with image on the side.
  • .su-card--link - Whole card is a clickable link. No separate link buttons or CTA links allowed inside the card.
  • .su-card--minimal - No border, drop shadow or background color. Do not use this with the .su-card--link variant.
  • .su-card--icon - Card with an icon image or smaller image (e.g., an avatar) that doesn't fill the full width of the card. Text and button are always center-aligned for this variant.
  • .su-card--video - Card with a self-hosted video.
  • .su-card--embed - Card with an embedded media element, e.g., a YouTube or Vimeo video. The media field in this variant also takes any custom HTML.

Default Style

Example image
This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

CTA Link Label

Example Markup

<article class="su-card [ modifier_class ]"> <figure class="su-media su-media--image su-card__media"> <a rel="nofollow noopener" tabindex="-1" href="https://stanford.edu"> <div class="su-media__wrapper su-aspect-ratio"> <img src="https://placeimg.com/2000/1333/any" autoplay="" loop="" muted="" alt="Example image" /> </div> </a> </figure> <section class="su-card__contents"> <span>This is a super headline</span> <h2> <a href="https://stanford.edu" rel="nofollow noopener">Headline goes here</a> </h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article>

Style Variants

.su-card--horizontal

Postcard with image on the side.

Example image
This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

CTA Link Label

Example Markup

<article class="su-card su-card--horizontal"> <figure class="su-media su-media--image su-card__media"> <a rel="nofollow noopener" tabindex="-1" href="https://stanford.edu"> <div class="su-media__wrapper su-aspect-ratio"> <img src="https://placeimg.com/2000/1333/any" autoplay="" loop="" muted="" alt="Example image" /> </div> </a> </figure> <section class="su-card__contents"> <span>This is a super headline</span> <h2> <a href="https://stanford.edu" rel="nofollow noopener">Headline goes here</a> </h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article>

.su-card--link

Whole card is a clickable link. No separate link buttons or CTA links allowed inside the card.

Example Markup

<article class="su-card su-card--link"> <a href="https://stanford.edu" rel="nofollow noopener"> <figure class="su-media su-media--image su-card__media"> <a rel="nofollow noopener" tabindex="-1" href="https://stanford.edu"> <div class="su-media__wrapper su-aspect-ratio"> <img src="https://placeimg.com/2000/1333/any" autoplay="" loop="" muted="" alt="Example image" /> </div> </a> </figure> <section class="su-card__contents"> <span>This is a super headline</span> <h2>Headline goes here</h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </section> </a> </article>

.su-card--minimal

No border, drop shadow or background color. Do not use this with the .su-card--link variant.

Example image
This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

CTA Link Label

Example Markup

<article class="su-card su-card--minimal"> <figure class="su-media su-media--image su-card__media"> <a rel="nofollow noopener" tabindex="-1" href="https://stanford.edu"> <div class="su-media__wrapper su-aspect-ratio"> <img src="https://placeimg.com/2000/1333/any" autoplay="" loop="" muted="" alt="Example image" /> </div> </a> </figure> <section class="su-card__contents"> <span>This is a super headline</span> <h2> <a href="https://stanford.edu" rel="nofollow noopener">Headline goes here</a> </h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article>

.su-card--icon

Card with an icon image or smaller image (e.g., an avatar) that doesn't fill the full width of the card. Text and button are always center-aligned for this variant.

This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

CTA Link Label

Example Markup

<article class="su-card su-card--icon"> <img aria-hidden="true" src="https://placeimg.com/200/200/any" /> <section class="su-card__contents"> <span>This is a super headline</span> <h2> <a href="https://stanford.edu" rel="nofollow noopener">Headline goes here</a> </h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article>

.su-card--video

Card with a self-hosted video.

Example Markup

<article class="su-card su-card--video"> <figure class="su-media su-media--video su-card__media"> <a rel="nofollow noopener" tabindex="-1" href="https://stanford.edu"> <div class="su-media__wrapper su-aspect-ratio"> <video autoplay="" loop="" muted="" alt="Example image"> <source src="https://news-media.stanford.edu/wp-content/uploads/2018/01/18153719/palau_swimmerloop_final.mp4" type="video/mp4" /> <p>Sorry, your browser doesn't support HTML5 videos.</p> </video> </div> </a> </figure> <section class="su-card__contents"> <span>This is a super headline</span> <h2> <a href="https://stanford.edu" rel="nofollow noopener">Headline goes here</a> </h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article>

.su-card--embed

Card with an embedded media element, e.g., a YouTube or Vimeo video.

This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

CTA Link Label

Example Markup

<article class="su-card su-card--embed"> <figure class="su-media su-card__media"> <div class="su-media__wrapper su-aspect-ratio"> <iframe width="560" height="315" src="https://www.youtube.com/embed/tZ2GZhND7s0" frameborder="0" allowfullscreen=""></iframe> </div> </figure> <section class="su-card__contents"> <span>This is a super headline</span> <h2> <a href="https://stanford.edu" rel="nofollow noopener">Headline goes here</a> </h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a rel="nofollow noopener" href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article>