Skip to main content

Card

JS
A Card displays content and an action about a single subject.

Use a Card to group related content, including an image, title, body and link. A heading and link are required. The card image features a zoom-in microinteraction on hover. It provides immediate feedback that the card is interactive, helping users understand that they can click on it. This improves usability and discoverability.

Examples​

Default​

Three young people lay hands on the face of Thompson Library bust

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action 
<div
  class="bux-card"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></span>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <a class="bux-text-link" href="#" rel="noopener">
      <span class="bux-text-link__text">Call to Action</span>
    </a>
  </div>
</div>

Gray Background​

Three young people lay hands on the face of Thompson Library bust

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action 
<div
  class="bux-card bux-card--gray"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></span>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <a class="bux-text-link" href="#" rel="noopener">
      <span class="bux-text-link__text">Call to Action</span>
    </a>
  </div>
</div>

Without Border​

Three young people lay hands on the face of Thompson Library bust

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action 
<div
  class="bux-card bux-card--no-border"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></span>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <a class="bux-text-link" href="#" rel="noopener">
      <span class="bux-text-link__text">Call to Action</span>
    </a>
  </div>
</div>

Linked Headline​

Three young people lay hands on the face of Thompson Library bust

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<div
  class="bux-card bux-card--linked-headline"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <a
        class="bux-text-link bux-text-link__headline bux-card__heading--link"
        href="#"
        rel="noopener"
      >
        <span class="bux-text-link__text bux-text-link__headline__text">
          Card Heading
        </span>
      </a>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Storytelling​

Three young people lay hands on the face of Thompson Library bust
Optional Taxonomy

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3-minute read 
<div
  class="bux-card bux-card--storytelling"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <span class="bux-card__taxonomy bux-mar-bottom-sp-8">
      Optional Taxonomy
    </span>

    <h3 class="bux-heading bux-card__heading">
      <a
        class="bux-link bux-card__heading--storytelling-link"
        href="#"
        rel="noopener"
      >
        <span class="bux-link__text">Card Heading</span>
      </a>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <span class="bux-card__read-time bux-mar-top-sp-8">3-minute read</span>
  </div>
</div>

Horizontal​

Three young people lay hands on the face of Thompson Library bust

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action 
<div
  class="bux-card bux-card--horizontal"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <div class="bux-card__image-wrapper">
      <figure class="bux-image">
        <img
          class="bux-image--16x9"
          src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
          alt="Three young people lay hands on the face of Thompson Library bust"
          height=""
          width=""
        />
      </figure>
    </div>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></span>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <a class="bux-text-link" href="#" rel="noopener">
      <span class="bux-text-link__text">Call to Action</span>
    </a>
  </div>
</div>

Horizontal Storytelling​

Three young people lay hands on the face of Thompson Library bust
Optional Taxonomy

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3-minute read 
<div
  class="bux-card bux-card--horizontal-storytelling"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <div class="bux-card__image-wrapper">
      <figure class="bux-image">
        <img
          class="bux-image--16x9"
          src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
          alt="Three young people lay hands on the face of Thompson Library bust"
          height=""
          width=""
        />
      </figure>
    </div>
  </div>

  <div class="bux-card__content">
    <span class="bux-card__taxonomy bux-mar-bottom-sp-8">
      Optional Taxonomy
    </span>

    <h3 class="bux-heading bux-card__heading">
      <a
        class="bux-link bux-card__heading--storytelling-link"
        href="#"
        rel="noopener"
      >
        <span class="bux-link__text">Card Heading</span>
      </a>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <span class="bux-card__read-time bux-mar-top-sp-8">3-minute read</span>
  </div>
</div>

Event​

Sept
23
Three young people lay hands on the face of Thompson Library bust
Optional taxonomy

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library
<div
  class="bux-card bux-card--event"
  role="group"
  aria-roledescription="Event Card"
  aria-label="Event Title"
>
  <div class="bux-card__image">
    <div class="bux-card--event__date--wrapper">
      <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">Sept</div>
        <div class="bux-card--event__date--day">23</div>
      </div>
    </div>

    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <span class="bux-card__taxonomy bux-mar-bottom-sp-8">
      Optional taxonomy
    </span>

    <h3 class="bux-heading bux-card__heading">
      <a
        class="bux-text-link bux-text-link__headline bux-card__heading--link"
        href="#"
        rel="noopener"
      >
        <span class="bux-text-link__text bux-text-link__headline__text">
          Event Title
        </span>
      </a>
    </h3>

    <div class="bux-mar-top-sp-16">
      <dl class="bux-list-description-icons bux-icon-dl">
        <div class="bux-icon-dl__item">
          <dt>
            <span class="icon icon-clock" role="img" aria-hidden="true"></span>
            Time
          </dt>
          <dd>1:30 p.m. - 3:30 p.m.</dd>
        </div>
        <div class="bux-icon-dl__item">
          <dt>
            <span
              class="icon icon-location-pin"
              role="img"
              aria-hidden="true"
            ></span>
            Location
          </dt>
          <dd>BLIC / Library</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Horizontal Event​

Sept
23
Three young people lay hands on the face of Thompson Library bust
Optional taxonomy

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library
<div
  class="bux-card bux-card--event-horizontal"
  role="group"
  aria-roledescription="Card"
  aria-label="Event Title"
>
  <div class="bux-card__image">
    <div class="bux-card--event__date--wrapper">
      <div class="bux-card--event__date">
        <div class="bux-card--event__date--month">Sept</div>
        <div class="bux-card--event__date--day">23</div>
      </div>
    </div>

    <div class="bux-card__image-wrapper">
      <figure class="bux-image">
        <img
          class="bux-image--16x9"
          src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
          alt="Three young people lay hands on the face of Thompson Library bust"
          height=""
          width=""
        />
      </figure>
    </div>
  </div>

  <div class="bux-card__content">
    <span class="bux-card__taxonomy bux-mar-bottom-sp-8">
      Optional taxonomy
    </span>

    <h3 class="bux-heading bux-card__heading">
      <a
        class="bux-text-link bux-text-link__headline bux-card__heading--link"
        href="#"
        rel="noopener"
      >
        <span class="bux-text-link__text bux-text-link__headline__text">
          Event Title
        </span>
      </a>
    </h3>

    <div class="bux-mar-top-sp-16">
      <dl class="bux-list-description-icons bux-icon-dl">
        <div class="bux-icon-dl__item">
          <dt>
            <span class="icon icon-clock" role="img" aria-hidden="true"></span>
            Time
          </dt>
          <dd>1:30 p.m. - 3:30 p.m.</dd>
        </div>
        <div class="bux-icon-dl__item">
          <dt>
            <span
              class="icon icon-location-pin"
              role="img"
              aria-hidden="true"
            ></span>
            Location
          </dt>
          <dd>BLIC / Library</dd>
        </div>
      </dl>
    </div>
  </div>
</div>

Compact​

Add bux-card--compact when a list of Cards would take up too much room on small screens. Below 640px a compact Card lays out as a row with a small thumbnail, drops its border and hides its body copy, so the heading and image carry the content. At 640px and above it is identical to a default Card, so the demo below is shown in a narrow frame.

Rendered in a 375px-wide frame, where the compact layout takes effect.

<div
  class="bux-card bux-card--compact"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <span>Card Heading</span>
      <span class="bux-card__heading-icon" aria-hidden="true"></span>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>

    <a class="bux-text-link" href="#" rel="noopener">
      <span class="bux-text-link__text">Call to Action</span>
    </a>
  </div>
</div>

Compact with Linked Headline​

Combine bux-card--compact with bux-card--linked-headline to make the heading itself the link.

Rendered in a 375px-wide frame, where the compact layout takes effect.

<div
  class="bux-card bux-card--linked-headline bux-card--compact"
  role="group"
  aria-roledescription="Card"
  aria-label="Card Heading"
>
  <div class="bux-card__image">
    <figure class="bux-image">
      <img
        class="bux-image--16x9"
        src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg"
        alt="Three young people lay hands on the face of Thompson Library bust"
        height=""
        width=""
      />
    </figure>
  </div>

  <div class="bux-card__content">
    <h3 class="bux-heading bux-card__heading">
      <a
        class="bux-text-link bux-text-link__headline bux-card__heading--link"
        href="#"
        rel="noopener"
      >
        <span class="bux-text-link__text bux-text-link__headline__text">
          Card Heading
        </span>
      </a>
    </h3>

    <div class="bux-card__body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Card Elements​

Each card includes an image, heading, body text, and a call to action (cta). However, only the heading is required. Here are some possible combinations of required elements and card variants.

Image omitted​

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action

Body text omitted​

Three young people lay hands on the face of Thompson Library bust

Card Heading

Call to Action

Event with date range​

Sept
23
to
Oct
3
Three young people lay hands on the face of Thompson Library bust
Optional taxonomy

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library

Event with no image and date range​

Sept
23
to
Oct
3
Optional taxonomy

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library

Horizontal event with date range​

Sept
23
to
Oct
3
Three young people lay hands on the face of Thompson Library bust
Optional taxonomy

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library

Usage​

Dos​

  • Use the Default Card variant for informational content, such as programs or resources
  • Use the Event Card variants to briefly highlight events details
  • Use the Storytelling Card variant for news articles or digital stories
  • Always include a title and link
  • Keep Card title short for quick scanning
  • Consider creating a collection of Cards, rather than a single Card

Don’ts​

  • Don’t use Cards for a simple action; use a Text Link or Button instead
  • Don’t inconsistently use images or links
  • Don’t mix and match Card variants within the same collection
  • Don’t repeat content (like the same image) in a collection
  • Don't use more than one taxonomy item in Storytelling cards

Implementation notes​

You can modify the look of the card with modifiers. These modifiers allow you to create cards with a gray background and no border.

Card with a gray background using modifier
<div class="bux-card bux-card--gray"></div>
Card with no border using modifier
<div class="bux-card bux-card--no-border"></div>

Event cards should be passed a date that contains the month, day and time of the event, as well as a location. The date can optionally be a range.

Accessibility​

  • All cards must have one link within them that is reachable by the keyboard and is not hidden from assistive technology. The overlay link that makes the whole card clickable is not accessible so either the headline or the call-to-action must also be a link.
  • Make sure to write appropriate alternative text if including an image in your card.
  • See the WebAIM website for more information on writing alternative text for images.
  • Calls-to-action should use informative text. Having several links that say “Read more” but all go to different places is a bad experience for assistive technology users.

References​

Back to top