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