Detail List Card

This single list card is used within the grid system to create lists of detailed cards. The card consists of an image and an <h3> tag, entirely wrapped in a link.

Example

Low-Residency MFA in Narrative Media Writing

<a class="util-delink util-underline-hover util-color-red" href="#">
  <img
    aria-labelledby="example-card-heading"
    class="util-block util-full-width"
    src="/images/uga-hero.jpg"
    alt="Description of photo."
  />
  <h3
    id="example-card-heading"
    class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
  >
    Low-Residency MFA in Narrative Media Writing
  </h3>
</a>

Grid Usage

Place cards inside the grid system to create responsive lists. Cards fill their grid column and stack on narrow viewports.

Low-Residency MFA in Narrative Media Writing

Master of Education in Learning, Design, and Technology

Bachelor of Science in Education

<div class="obj-grid obj-grid--gap-md">
  <div class="obj-grid__full obj-grid__third@md">
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="grid-card-1"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="grid-card-1"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        Low-Residency MFA in Narrative Media Writing
      </h3>
    </a>
  </div>
  <div class="obj-grid__full obj-grid__third@md">
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="grid-card-2"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="grid-card-2"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        Master of Education in Learning, Design, and Technology
      </h3>
    </a>
  </div>
  <div class="obj-grid__full obj-grid__third@md">
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="grid-card-3"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="grid-card-3"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        Bachelor of Science in Education
      </h3>
    </a>
  </div>
</div>

Compact Grid

For a denser layout, use a tighter grid that progresses to four columns at @lg.

Bachelor of Science in Special Education

Low-Residency MFA in Narrative Media Writing

M.Ed. in Reading Education

Master of Business and Technology

<div class="obj-grid obj-grid--gap-md">
  <div
    class="obj-grid__full obj-grid__half@sm obj-grid__third@md obj-grid__quarter@lg"
  >
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="compact-card-1"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="compact-card-1"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        Bachelor of Science in Special Education
      </h3>
    </a>
  </div>
  <div
    class="obj-grid__full obj-grid__half@sm obj-grid__third@md obj-grid__quarter@lg"
  >
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="compact-card-2"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="compact-card-2"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        Low-Residency MFA in Narrative Media Writing
      </h3>
    </a>
  </div>
  <div
    class="obj-grid__full obj-grid__half@sm obj-grid__third@md obj-grid__quarter@lg"
  >
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="compact-card-3"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="compact-card-3"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        M.Ed. in Reading Education
      </h3>
    </a>
  </div>
  <div
    class="obj-grid__full obj-grid__half@sm obj-grid__third@md obj-grid__quarter@lg"
  >
    <a class="util-delink util-underline-hover util-color-red" href="#">
      <img
        aria-labelledby="compact-card-4"
        class="util-block util-full-width"
        src="/images/uga-hero.jpg"
        alt="Description of photo."
      />
      <h3
        id="compact-card-4"
        class="cmp-heading-5 util-margin-top-sm util-margin-bottom-none"
      >
        Master of Business and Technology
      </h3>
    </a>
  </div>
</div>

Props

Prop	Type	Default	Description
href	string	"#"	Link destination
src	string	"/images/uga-hero.jpg"	Image source path
alt	string	"Description of photo."	Image alt text
heading	string	"Card Heading"	Card heading text
id	string	"card-heading"	Unique ID linking the image’s aria-labelledby to the heading

Structure

Element	Classes	Purpose
<a>	.util-delink, .util-underline-hover, .util-color-red	Wrapping link with no default link styling; underline appears on hover; red text color
<img>	.util-block, .util-full-width	Image fills the card width as a block element
<h3>	.cmp-heading-5, .util-margin-top-sm, .util-margin-bottom-none	Heading styled at h5 size with tight spacing

Accessibility

The image uses aria-labelledby pointing to the heading’s id, which associates the image with the card’s text label. Always provide a meaningful alt attribute on the image as well. Each card should have a unique id value.