Skip to main content

Featured Card

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.

An event variant of a Featured Card is often used for a single event that is of high-priority, high-impact, popular, or time-sensitive.

Examples​

Right Image​

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 member high-fiving a crowd 
<div class="bux-featured-card bux-grid bux-grid--no-gutters">
  <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"
      role="group"
      aria-roledescription="Card"
      aria-label="Card Heading"
    >
      <div class="bux-card__content">
        <h2 class="bux-heading bux-card__heading">
          <span>Card Heading</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></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 bux-button bux-button--alt--featured"
          href="#"
          rel="noopener"
        >
          <span
            class="bux-button__text bux-button--alt__text bux-link__text--underline"
          >
            Call to Action
          </span>
        </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 member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

Left Image​

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 member 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"
      role="group"
      aria-roledescription="Card"
      aria-label="Card Heading"
    >
      <div class="bux-card__content">
        <h2 class="bux-heading bux-card__heading">
          <span>Card Heading</span>
          <span class="bux-card__heading-icon" aria-hidden="true"></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 bux-button bux-button--alt--featured"
          href="#"
          rel="noopener"
        >
          <span
            class="bux-button__text bux-button--alt__text bux-link__text--underline"
          >
            Call to Action
          </span>
        </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 member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

Event​

Sept.
23
Optional topic

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library
A marching band member 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--event"
      role="group"
      aria-roledescription="Featured Event Card"
      aria-label="Event Title"
    >
      <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__content">
        <span class="bux-card__taxonomy">Optional topic</span>

        <h2 class="bux-heading bux-card__heading">
          <a
            class="bux-card__link bux-card__heading--link"
            href="#"
            rel="noopener"
          >
            <span>Event Title</span>
            <span class="bux-card__heading-icon" aria-hidden="true"></span>
          </a>
        </h2>

        <div class="bux-mar-top-sp-16">
          <dl class="bux-list-description-icons bux-icon-dl bux-icon-dl--event">
            <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>
  </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 member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

Event with Date Range​

Sept
23
to
Oct
3
Optional topic

Event Title

Time
1:30 p.m. - 3:30 p.m.
Location
BLIC / Library
A marching band member 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--event"
      role="group"
      aria-roledescription="Featured Event Card"
      aria-label="Event Title"
    >
      <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 class="bux-card--event__date-divider">to</div>
        <div class="bux-card--event__date">
          <div class="bux-card--event__date--month">Oct</div>
          <div class="bux-card--event__date--day">3</div>
        </div>
      </div>

      <div class="bux-card__content">
        <span class="bux-card__taxonomy">Optional topic</span>

        <h2 class="bux-heading bux-card__heading">
          <a
            class="bux-card__link bux-card__heading--link"
            href="#"
            rel="noopener"
          >
            <span>Event Title</span>
            <span class="bux-card__heading-icon" aria-hidden="true"></span>
          </a>
        </h2>

        <div class="bux-mar-top-sp-16">
          <dl class="bux-list-description-icons bux-icon-dl bux-icon-dl--event">
            <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>
  </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 member high-fiving a crowd"
      height=""
      width=""
    />
  </div>
</div>

Implementation Notes​

Event Variant​

When using the event modifier, the component requires the following additional Twig variables:

  • event (object): Contains date information for the event
    • event.date.month (string): Abbreviated month (e.g., "Sept.")
    • event.date.day (string): Day of the month (e.g., "23")
    • event.date_end (object, optional): End date for multi-day events
      • event.date_end.month (string): Abbreviated month
      • event.date_end.day (string): Day of the month
  • list_items (array, required): Event details displayed below the heading. Each item contains:
    • item.icon (string): Name of the BUX icon (e.g., clock, location-pin)
    • item.term (string): Label for the detail (e.g., "Time", "Location")
    • item.desc (string): Value for the detail (e.g., "1:30 p.m. - 3:30 p.m.")

list_items is required for all event card types. Omitting it will cause a template error because the event variant unconditionally renders the icon description list.

{% include '@featured-card' with {
  modifier: 'event',
  card_heading: 'Event Title',
  card_name: 'Featured Event Card',
  card_url: '#',
  image_position: 'left',
  image_url: 'https://example.com/image.jpg',
  image_alt_text: 'Description of image',
  taxonomy: 'Optional topic',
  event: {
    date: { month: 'Sept.', day: '23' }
  },
  list_items: [
    { term: 'Time', desc: '1:30 p.m. - 3:30 p.m.', icon: 'clock' },
    { term: 'Location', desc: 'BLIC / Library', icon: 'location-pin' }
  ]
} %}

Default Variant​

The default (non-event) variant uses the featured modifier and accepts the standard card variables:

  • modifier: Set to featured
  • card_heading (string): Heading text
  • card_body (string, optional): Body content
  • card_url (string): Link URL
  • card_cta (string): Call-to-action button text
  • image_position (string): left or right
  • image_url (string): Image source URL
  • image_alt_text (string): Image alt text

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
  • Don’t use images that contain text
  • Don't use images that are low resolution or low quality

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