Images

All <img> elements receive max-width: 100% to ensure they scale responsively within their containers. Images are also set to display: inline in print media.

Default Styling

<img src="/images/uga-hero.jpg" alt="UGA campus" />

Width Utilities

Additional width constraint classes are available:

Class	Description
.util-page-width	Constrains to page max-width (90rem)
.util-content-width	Constrains to content max-width (75rem)
.util-reading-width	Constrains to reading max-width (60rem)
.util-image-width	Image-specific width constraint

Alignment

Use alignment utility classes to float or center images within surrounding content.

Class	Effect
.util-align-left	Floats left with right and bottom margin so text wraps around the image
.util-align-center	Centers the image as a block with auto horizontal margins
.util-align-right	Floats right with left and bottom margin so text wraps around the image

These classes work directly on <img> elements or on <figure> elements. When applied to a <figure>, the figure is also constrained to max-width: 33.33%.

Examples

This text wraps around the image which is floated left using .util-align-left. The alignment class adds right and bottom margin so content doesn’t crowd the image.

<div style="overflow: hidden">
  <img
    src="/images/uga-hero.jpg"
    alt="UGA campus"
    class="util-align-left"
    style="max-width: 40%"
  />
  <p>
    This text wraps around the image which is floated left using
    <code>.util-align-left</code>
    . The alignment class adds right and bottom margin so content doesn’t crowd
    the image.
  </p>
</div>

<div>
  <img
    src="/images/uga-hero.jpg"
    alt="UGA campus"
    class="util-align-center"
    style="max-width: 50%"
  />
</div>

Accessibility

• Every <img> must have an alt attribute. Use descriptive text for meaningful images or alt="" for purely decorative images.
• Avoid putting important text inside images. If text is embedded in an image, reproduce it in the alt attribute.
• When images are linked, the alt text should describe the link destination rather than the image appearance (e.g., “View program details” instead of “photo of campus”).
• For complex images such as charts or infographics, supplement alt with a longer description via aria-describedby pointing to visible explanatory text, or use a <figure> with a detailed <figcaption>.
• Alignment classes (.util-align-left, .util-align-right) float images, which changes reading order visually but not in the DOM. Place floated images near the related text so the reading order remains logical for screen reader users.

Usage Notes

• Images inside <figure> elements have their bottom margin removed to avoid double spacing with the figcaption.
• In print media, images are forced to display: inline to ensure they render correctly.