Skip to main content

Card

Group related content or present content as a list or grid

Overview #

Use the card component to group related content, including an image, headline, summary text, and link.

Cards are often used to present lists or grids of content such as featured news articles or resources related to a specific topic.

Examples #


<div class="rvt-card">
<div class="rvt-card__body">
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.</p>
</div>
</div>
</div>
<div class="rvt-card">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-3.webp" alt="Smiling students sitting outside on a bench">
</div>
<div class="rvt-card__body">
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.</p>
</div>
</div>
</div>
<div class="rvt-card">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-3.webp" alt="Smiling students sitting outside on a bench">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">My category</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.</p>
</div>
<div class="rvt-card__meta">
<time>November 5, 1955</time>
</div>
</div>
</div>
<div class="rvt-card rvt-card--raised">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-3.webp" alt="">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">My category</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.</p>
</div>
<div class="rvt-card__meta">
<time>November 5, 1955</time>
</div>
</div>
</div>
<div class="rvt-card rvt-card--clickable">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-3.webp" alt="Smiling students sitting outside on a bench">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">My category</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.</p>
</div>
<div class="rvt-card__meta">
<time>November 5, 1955</time>
</div>
</div>
</div>
<div class="rvt-row">
<div class="rvt-cols-4-md">
<div class="rvt-card">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-3.webp" alt="Smiling students sitting outside on a bench">
</div>
<div class="rvt-card__body">
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.</p>
</div>
</div>
</div>
</div>
<div class="rvt-cols-4-md">
<div class="rvt-card">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-1.webp" alt="Replace this value with appropriate alternative text">
</div>
<div class="rvt-card__body">
<h2 class="rvt-card__title">
<a href="#">Student clubs and organizations</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>Whatever you’re into, you’ll find your people here. Campus is always buzzing with the activity of student organizations, ranging from student government, campus newspapers, and IU Corps volunteer programs, all the way to a Chinese Calligraphy club, six different comedy groups, and even a quidditch team.</p>
</div>
</div>
</div>
</div>
<div class="rvt-cols-4-md">
<div class="rvt-card">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/list-card-5.webp" alt="Replace this value with appropriate alternative text">
</div>
<div class="rvt-card__body">
<h2 class="rvt-card__title">
<a href="#">Pursue your passion or explore the possibilities</a>
</h2>
<div class="rvt-card__content [ rvt-flow ]">
<p>From nursing to criminal justice, epidemiology to environmental science, social work to cybersecurity, and more than 900 academic programs in between, IU gives you the power to study whatever sparks your interest, with the support of world-class professors and faculty who care about your success.</p>
</div>
</div>
</div>
</div>
</div>
<div class="rvt-card rvt-card--horizontal">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/horizontal-card-1.webp" alt="">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">Arts and Humanities</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home.</p>
</div>
<div class="rvt-card__meta">
<time>May 1, 2024</time>
</div>
</div>
</div>
<div class="rvt-card rvt-card--horizontal rvt-card--raised rvt-card--clickable">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/horizontal-card-1.webp" alt="">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">Arts and Humanities</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home.</p>
</div>
<div class="rvt-card__meta">
<time>May 1, 2024</time>
</div>
</div>
</div>
<ul class="rvt-list-plain rvt-flow">
<li class="rvt-card rvt-card--horizontal">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/horizontal-card-1.webp" alt="">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">Arts and Humanities</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home.</p>
</div>
<div class="rvt-card__meta">
<time>May 1, 2024</time>
</div>
</div>
</li>
<li class="rvt-card rvt-card--horizontal">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/horizontal-card-1.webp" alt="">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">Arts and Humanities</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home.</p>
</div>
<div class="rvt-card__meta">
<time>May 1, 2024</time>
</div>
</div>
</li>
<li class="rvt-card rvt-card--horizontal">
<div class="rvt-card__image">
<img src="https://rivet.iu.edu/img/placeholder/horizontal-card-1.webp" alt="">
</div>
<div class="rvt-card__body">
<div class="rvt-card__eyebrow">Arts and Humanities</div>
<h2 class="rvt-card__title">
<a href="#">Find your ideal campus life at IU</a>
</h2>
<div class="rvt-card__content">
<p>Each of our nine campuses offers a welcoming, inclusive environment that feels like home.</p>
</div>
<div class="rvt-card__meta">
<time>May 1, 2024</time>
</div>
</div>
</li>
</ul>

Usage #

  • Image, eyebrow, content, and metadata are optional. You can safely remove the elements with the .rvt-card__image, .rvt-card__eyebrow, .rvt-card__content, and .rvt-card__meta CSS classes if you don’t need them.
  • The clickable variant requires a link in the title. If you use the clickable card variant, the h2 element with the .rvt-card__title CSS class must contain a link. Clicking the card will direct the user to that link’s destination. (See the “Clickable card” code example on this page.)

Do

  • Use to visually group a set of related elements
  • Use to present content like featured news items or helpful resources
  • Keep card titles and metadata text brief
  • Limit card body text to a few sentences
  • Prefer images with a 16:9 aspect ratio for default cards and a square aspect ratio for horizontal cards
  • Use horizontal cards to present a feed or ticker

Don't

  • Put all your page's content into cards
  • Group unrelated content into a single card
  • Mix and match different card variants in the same list or grid
  • Use varying image sizes or inconsistently include images in the same list or grid
  • Use the clickable variant if the card contains more than one link
  • Use one horizontal card in a full-width container to highlight important content—use a billboard instead

Accessibility #

  • Use appropriate alternative text. Be sure to include alternative text for your card images. See the WebAIM website for more information on writing alternative text for images.