Figures

The <figure> element is styled with responsive vertical margins and a red left-border on <figcaption>.

Figure with Caption

A view of the University of Georgia campus.

<figure>
  <img src="/images/uga-hero.jpg" alt="UGA campus" />
  <figcaption>A view of the University of Georgia campus.</figcaption>
</figure>

CSS Details

Property	Value
Vertical margin	1.5rem (sm), 2.5rem (md), 3.5rem (lg)
Caption border	0.125rem solid Bulldog Red
Caption padding	0.5rem left
Caption font	Merriweather Sans, italic, 1rem
Aligned max-width	33.33% (when util-align-* is applied)

Figure with Alignment

<figure class="util-align-left">
  <img src="photo.jpg" alt="Description" />
  <figcaption>Caption text with red left border.</figcaption>
</figure>

When an alignment utility is applied, the figure is constrained to max-width: 33.33% so surrounding content can wrap around it.

Accessibility

• Use <figure> to semantically group an image (or other media) with its caption. Screen readers announce the relationship between the content and its <figcaption>.
• The <img> inside a <figure> still needs a descriptive alt attribute. The <figcaption> provides visible context but does not replace alt text.
• If the <figcaption> fully describes the image, you can set alt="" on the <img> to avoid redundant announcements, but only if the caption alone conveys all essential information.
• When a figure is floated with alignment classes, ensure it appears near the related text in the DOM so the reading order is logical for screen reader users.