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>
Elements #
Element | Description | Usage | Required | Multiple |
---|---|---|---|---|
Image | Image to display at the top of the card (default card) or on the left-hand side of the card (horizontal card). | Use images with a 16:9 aspect ratio (default card) or square aspect ratio (horizontal card). If one card in a grid has an image, all cards in that grid should have an image. |
Image is optional |
Component may contain only one Image |
Eyebrow | Subtitle that appears in smaller type above the card's main title | Limit to a few words |
Eyebrow is optional |
Component may contain only one Eyebrow |
Title | Card main title | Limit to a few words or a short phrase. Avoid full-sentence titles. |
Title is required |
Component may contain only one Title |
Link | URL to which the user should be taken when interacting with the card | This link must be a child element of the title |
Link is required |
Component may contain only one Link |
Content | Card text content | Limit to a short sentence or two. If one card in a grid has content, all cards in that grid should have content. Avoid lists, links, bold text, or italicized text in card content. |
Content is optional |
Component may contain only one Content |
Metadata | Metadata that appears beneath the card content in smaller type, such as a date | Limit to a few words. If one card in a grid has metadata, all cards in the grid should have metadata. |
Metadata is optional |
Component may contain only one Metadata |
Usage #
- 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
- Use horizontal cards to present a feed or ticker
Don't
- Put all your page's content into cards
- Mix and match different card variants 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.