Graphic Text Group

A component to layout a graphic (icon or image) alongside text with preset sizes, positions, and optional rules.

Default Layout

This is the default layout where the graphic is positioned to the left of the text content. We are using the type-max-width-small utility to constrain the line length.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.

<div class="graphic-text-group graphic-text-group--rule-bottom graphic-text-group--rule-top type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic width-small">
    <img alt="" src="/assets/placeholder/graphic-icon-word.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h3 class="h4 no-margin-bottom">Default Layout</h3>
    <p>This is the default layout where the graphic is positioned to the left of the text content. We are using the <code>type-max-width-small</code> utility to constrain the line length.</p>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>

Alignment Options

Left / Center (default)

Default Layout

This is the default layout where the graphic is positioned to the left of the text content. We are using the type-max-width-small utility to constrain the line length.

<div class="graphic-text-group type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Default Layout</h4>
    <p>This is the default layout where the graphic is positioned to the left of the text content. We are using the <code>type-max-width-small</code> utility to constrain the line length.</p>
  </div>
</div>

Left / Start

Example Headline

The graphic and text are vertically centered to each other using the graphic-text-group--align-center modifier.

<div class="graphic-text-group graphic-text-group--align-start type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The graphic and text are vertically centered to each other using the <code>graphic-text-group--align-center</code> modifier.</p>
  </div>
</div>

Left / Baseline

Example Headline

The graphic and text are aligned to the baseline of the typography using the graphic-text-group--align-baseline modifier.

<div class="graphic-text-group graphic-text-group--auto graphic-text-group--align-baseline graphic-text-group--compact type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic type-large-xx">
    <span class="fas fa-circle-info" aria-hidden="true"></span>
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The graphic and text are aligned to the baseline of the typography using the <code>graphic-text-group--align-baseline</code> modifier.</p>
  </div>
</div>

Left / End

Example Headline

The graphic is aligned to the bottom (end) of the text content using the graphic-text-group--align-end modifier.

<div class="graphic-text-group graphic-text-group--align-end type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The graphic is aligned to the bottom (end) of the text content using the <code>graphic-text-group--align-end</code> modifier.</p>
  </div>
</div>

Right

The layout uses CSS order to dictate the visual placement of the graphic, entirely decoupling it from the DOM order. This allows you to place the text content first in the HTML (which is highly recommended for screen reader accessibility) while rendering the graphic on the right visually.

Text First in DOM

The graphic is positioned to the right of the text content using the graphic-text-group--right modifier, even though the text appears first in the markup.

<div class="graphic-text-group graphic-text-group--right type-max-width-small margin-auto">
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Text First in DOM</h4>
    <p>The graphic is positioned to the right of the text content using the <code>graphic-text-group--right</code> modifier, even though the text appears first in the markup.</p>
  </div>
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
</div>

Top

Example Headline

The graphic is positioned above the text content using the graphic-text-group--top modifier.

<div class="graphic-text-group graphic-text-group--top graphic-text-group--center type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The graphic is positioned above the text content using the <code>graphic-text-group--top</code> modifier.</p>
  </div>
</div>

Bottom

Text First in DOM

The graphic is positioned below the text content using the graphic-text-group--bottom modifier.

<div class="graphic-text-group graphic-text-group--bottom graphic-text-group--center type-max-width-small margin-auto">
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Text First in DOM</h4>
    <p>The graphic is positioned below the text content using the <code>graphic-text-group--bottom</code> modifier.</p>
  </div>
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
</div>

Separator Modifiers

The --separator modifier adds a vertical (or horizontal) rule cleanly between the text and graphic using a flexible pseudo-element.

Default with Separator

Example Headline

The separator automatically spans the height of the container in this row layout.

<div class="graphic-text-group graphic-text-group--separator type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The separator automatically spans the height of the container in this row layout.</p>
  </div>
</div>

Top with Separator

Example Headline

The separator automatically switches to a horizontal border when in a column layout like --top or --bottom.

<div class="graphic-text-group graphic-text-group--top graphic-text-group--separator type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The separator automatically switches to a horizontal border when in a column layout like <code>--top</code> or <code>--bottom</code>.</p>
  </div>
</div>

Rules Modifiers

Example Headline

Using the graphic-text-group--rule-top and graphic-text-group--rule-bottom modifiers to add padding and borders. Notice how the margins inside this block are cropped using the crop-margins utility.

<div class="graphic-text-group graphic-text-group--rule-top graphic-text-group--rule-bottom type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h3 class="h4 no-margin-bottom">Example Headline</h3>
    <p>Using the <code>graphic-text-group--rule-top</code> and <code>graphic-text-group--rule-bottom</code> modifiers to add padding and borders. Notice how the margins inside this block are cropped using the <code>crop-margins</code> utility.</p>
  </div>
</div>

Spacing Modifiers

Use the --compact modifier to reduce the gap between the graphic and the text.

Compact Gap

This layout uses the graphic-text-group--compact modifier for tighter spacing.

<div class="graphic-text-group graphic-text-group--compact type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h3 class="h4 no-margin-bottom">Compact Gap</h3>
    <p>This layout uses the <code>graphic-text-group--compact</code> modifier for tighter spacing.</p>
  </div>
</div>

Graphic Size Modifiers

Use the --auto modifier when using a graphic that shouldn't be constrained by the preset width, such as an inline icon font or a naturally sized element.

Auto Graphic Width

The graphic container sizes to its contents using the graphic-text-group--auto modifier. This example also combines it with the graphic-text-group--compact modifier for a tighter, icon-based layout.

<div class="callout callout--warning type-max-width-small margin-auto crop-margins">
  <div class="graphic-text-group graphic-text-group--auto graphic-text-group--compact graphic-text-group--align-baseline">
    <div class="graphic-text-group__graphic">
      <span aria-hidden="true" style="font-size: 1.5rem; line-height: 1;"><i class="fa-solid fa-circle-info"></i></span>
    </div>
    <div class="graphic-text-group__text crop-margins">
      <h3 class="h4 no-margin-bottom">Auto Graphic Width</h3>
      <p>The graphic container sizes to its contents using the <code>graphic-text-group--auto</code> modifier. This example also combines it with the <code>graphic-text-group--compact</code> modifier for a tighter, icon-based layout.</p>
    </div>
  </div>
</div>

Responsive Wrap Modifier

Use the graphic-text-group--wrap modifier to force the layout into a stacked column layout on smaller screens. This relies on the wrap-breakpoint configuration variable (defaults to small).

Wraps on Small Screens

Shrink the browser window to see the graphic wrap to the top of the text block. Note how the separator properly changes from vertical to horizontal when it wraps!

<div class="graphic-text-group graphic-text-group--wrap graphic-text-group--separator type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic width-small-x">
    <div class="badge badge--large">
      <div class="badge__inner">
        <span>02</span>
      </div>
    </div>
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Wraps on Small Screens</h4>
    <p>Shrink the browser window to see the graphic wrap to the top of the text block. Note how the separator properly changes from vertical to horizontal when it wraps!</p>
  </div>
</div>

Using Badge

Example Headline

The graphic is positioned to the right of the text content using the graphic-text-group--right modifier.

<div class="graphic-text-group  type-max-width-small margin-auto">
  <div class="graphic-text-group__graphic width-small-x">
    <div class="badge badge--large">
      <div class="badge__inner">
        <span>02</span>
      </div>
    </div>
  </div>
  <div class="graphic-text-group__text crop-margins">
    <h4 class="h4 no-margin-bottom">Example Headline</h4>
    <p>The graphic is positioned to the right of the text content using the <code>graphic-text-group--right</code> modifier.</p>
  </div>
</div>

In a callout

Default Layout

This is the default layout where the graphic is positioned to the left of the text content. We are using the type-max-width-small utility to constrain the line length.

<div class="callout type-max-width-small margin-auto crop-margins">
  <div class="graphic-text-group">
    <div class="graphic-text-group__graphic width-small-x">
      <img alt="" src="/assets/placeholder/graphic-icon-word.svg">
    </div>
    <div class="graphic-text-group__text crop-margins">
      <h3 class="h4 no-margin-bottom">Default Layout</h3>
      <p>This is the default layout where the graphic is positioned to the left of the text content. We are using the <code>type-max-width-small</code> utility to constrain the line length.</p>
    </div>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>