Skip to main content

Featured Card

Ready
With high visual emphasis, a Featured Card displays content and an action about a single subject.

A Featured Card is often used on a Landing page layout, such as a homepage, campaign page or section index page, but can be used simply to break up the monotony of long-form content.

Examples​

Right Image​

Featured Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action
A marching band memeber high-fiving a crowd 
<div
  class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-right"
>
  <div
    class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md"
  >
    <div class="bux-card bux-card--featured">
      <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Featured Card Heading</span>
        </h2>

        <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-button bux-button--alt" href="#">Call to Action</a>
      </div>
    </div>
  </div>

  <div
    class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md"
  >
    <img
      class="bux-image"
      src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg"
      alt="A marching band memeber high-fiving a crowd"
    />
  </div>
</div>

Left Image​

Featured Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Call to Action
A marching band memeber high-fiving a crowd 
<div
  class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-left"
>
  <div
    class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md"
  >
    <div class="bux-card bux-card--featured">
      <a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
      <div class="bux-card__content">
        <h2 class="bux-card__heading">
          <span>Featured Card Heading</span>
        </h2>

        <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-button bux-button--alt" href="#">Call to Action</a>
      </div>
    </div>
  </div>

  <div
    class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md"
  >
    <img
      class="bux-image"
      src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg"
      alt="A marching band memeber high-fiving a crowd"
    />
  </div>
</div>

Usage​

Dos​

  • Use to call attention to most important features among all content
  • Limit to one per page; use occasionally on pages without sidebars
  • Include a high-quality image
  • Strongly consider using the included Button as a call-to-action
  • Use the “right image” variant if the subject of the image faces left
  • Use the “left image” variant if the subject of the image faces right

Don’ts​

  • Don’t write multiple paragraphs into the body
  • Don't use if a high-visual emphasis is needed on a homepage; consider a Hero instead

Accessibility​

  • 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
Back to top