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 #

Choose an example

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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

Open in new window Copy link to example

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