Detail List Card - Horizontal

A horizontal layout card with the image on the left and content on the right. The content area includes a linked heading, an optional date, and an optional description paragraph. The image and content columns resize responsively.

Example

Low-Residency MFA in Narrative Media Writing

November 18, 2019

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="obj-grid">
  <div
    class="obj-grid__full obj-grid__5-12@sm obj-grid__3-12@md obj-grid__3-12@print"
  >
    <div class="util-margin-bottom-sm util-margin-bottom-none@sm">
      <a class="util-delink" href="#">
        <img
          class="util-block util-full-width"
          src="/images/uga-hero.jpg"
          alt="UGA campus photo."
        />
      </a>
    </div>
  </div>
  <div
    class="obj-grid__full obj-grid__7-12@sm obj-grid__9-12@md obj-grid__9-12@print"
  >
    <div class="util-margin-left-none util-margin-left-md@sm">
      <h3 class="cmp-heading-5 util-margin-all-none">
        <a class="util-color-red util-delink util-underline-hover" href="#">
          Low-Residency MFA in Narrative Media Writing
        </a>
      </h3>
      <small>November 18, 2019</small>
      <p class="cmp-paragraph util-margin-top-sm">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </p>
    </div>
  </div>
</div>

List Usage

Stack multiple horizontal cards vertically with .util-margin-vert-lg between items to create a news feed or article listing.

<div>
  <div class="obj-grid">
    <div
      class="obj-grid__full obj-grid__5-12@sm obj-grid__3-12@md obj-grid__3-12@print"
    >
      <div class="util-margin-bottom-sm util-margin-bottom-none@sm">
        <a class="util-delink" href="#">
          <img
            class="util-block util-full-width"
            src="/images/uga-hero.jpg"
            alt="UGA campus photo."
          />
        </a>
      </div>
    </div>
    <div
      class="obj-grid__full obj-grid__7-12@sm obj-grid__9-12@md obj-grid__9-12@print"
    >
      <div class="util-margin-left-none util-margin-left-md@sm">
        <h3 class="cmp-heading-5 util-margin-all-none">
          <a class="util-color-red util-delink util-underline-hover" href="#">
            MSW Online faculty focuses on access to mental health
          </a>
        </h3>
        <small>November 18, 2019</small>
        <p class="cmp-paragraph util-margin-top-sm">
          Since joining the University of Georgia in 2013, Orion Mowbray,
          faculty for online Master&#39;s of Social Work program, focused on
          promoting access to mental health services and the outcomes of mental
          health services utilization.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="util-margin-vert-lg">
  <div class="obj-grid">
    <div
      class="obj-grid__full obj-grid__5-12@sm obj-grid__3-12@md obj-grid__3-12@print"
    >
      <div class="util-margin-bottom-sm util-margin-bottom-none@sm">
        <a class="util-delink" href="#">
          <img
            class="util-block util-full-width"
            src="/images/uga-hero.jpg"
            alt="UGA campus photo."
          />
        </a>
      </div>
    </div>
    <div
      class="obj-grid__full obj-grid__7-12@sm obj-grid__9-12@md obj-grid__9-12@print"
    >
      <div class="util-margin-left-none util-margin-left-md@sm">
        <h3 class="cmp-heading-5 util-margin-all-none">
          <a class="util-color-red util-delink util-underline-hover" href="#">
            7th Annual Medical Device Regulations Conference Recap
          </a>
        </h3>
        <small>November 13, 2019</small>
        <p class="cmp-paragraph util-margin-top-sm">
          The University of Georgia College of Pharmacy recently hosted the
          seventh annual Medical Device Regulations Conference on November 6-7th
          at UGA&#39;s Gwinnett Campus in Lawrenceville, GA.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="util-margin-vert-lg">
  <div class="obj-grid">
    <div
      class="obj-grid__full obj-grid__5-12@sm obj-grid__3-12@md obj-grid__3-12@print"
    >
      <div class="util-margin-bottom-sm util-margin-bottom-none@sm">
        <a class="util-delink" href="#">
          <img
            class="util-block util-full-width"
            src="/images/uga-hero.jpg"
            alt="UGA campus photo."
          />
        </a>
      </div>
    </div>
    <div
      class="obj-grid__full obj-grid__7-12@sm obj-grid__9-12@md obj-grid__9-12@print"
    >
      <div class="util-margin-left-none util-margin-left-md@sm">
        <h3 class="cmp-heading-5 util-margin-all-none">
          <a class="util-color-red util-delink util-underline-hover" href="#">
            Veteran Takes on New Role as Online Student
          </a>
        </h3>
        <small>November 11, 2019</small>
        <p class="cmp-paragraph util-margin-top-sm">
          Larry Howard, a 30-year veteran and former Command Master Chief in the
          Navy, recently enrolled in a new title–UGA online student. Howard is
          enrolled in the online graduate certificate program in Nonprofit
          Management and Leadership.
        </p>
      </div>
    </div>
  </div>
</div>

Props

Prop	Type	Default	Description
`href`	`string`	`"#"`	Link destination for both the image and the heading
`src`	`string`	`"/images/uga-hero.jpg"`	Image source path
`alt`	`string`	`"Description of photo."`	Image alt text
`heading`	`string`	`"Card Heading"`	Heading text (rendered as a link)
`date`	`string`	`""`	Optional date displayed below the heading
`description`	`string`	`""`	Optional description paragraph

Structure

Element	Classes	Purpose
Outer `<div>`	`.obj-grid`	Responsive grid container
Image column	`.obj-grid__5-12@sm`, `.obj-grid__3-12@md`	Image takes 5 columns at `@sm`, narrows to 3 at `@md`
Image link	`.util-delink`	Linked image with no default link styling
`<img>`	`.util-block`, `.util-full-width`	Image fills its column
Content column	`.obj-grid__7-12@sm`, `.obj-grid__9-12@md`	Content takes the remaining columns
`<h3>`	`.cmp-heading-5`, `.util-margin-all-none`	Heading styled at h5 size with no margin
Heading link	`.util-color-red`, `.util-delink`, `.util-underline-hover`	Red text with underline on hover
`<small>`	—	Date text
`<p>`	`.cmp-paragraph`, `.util-margin-top-sm`	Description with small top margin

Responsive Layout

Breakpoint	Image Width	Content Width
Default	Full width (stacked)	Full width (stacked)
`@sm`	5 of 12	7 of 12
`@md`	3 of 12	9 of 12
`@print`	3 of 12	9 of 12

Accessibility

The horizontal card component includes the following accessibility features:

The image alt defaults to an empty string because the image and heading link to the same destination. This prevents screen readers from announcing two consecutive links with redundant information. Pass a descriptive alt prop if the image conveys information not present in the heading.
The heading link text is the primary accessible name for each card. Use descriptive text that makes sense out of context (e.g., “Low-Residency MFA in Narrative Media Writing” rather than “Read more”).

When implementing horizontal cards, also consider:

Wrapping stacked cards in a <ul> or <ol> with each card in an <li> so assistive technology can convey the list length and position (e.g., “item 3 of 5”).
Ensuring the <h3> heading level fits the surrounding page structure — adjust if the card is used in a context where <h3> would skip a level.