Skip to main content

Main Content

Card

SCSS Source: core/src/scss/components/card/_card.scss

Twig Source: core/src/templates/components/card/card.twig

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

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
Button 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
Button 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
Button 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>