FEC Pattern Library

Icon headings

Icon headings allow text to be indented by an image, which aligns the text with the top edge of the image. The image and text will be visually grouped, and the text will never wrap around or under the icon when responding to different screen sizes.

When to use

  • When icons can be helpful way to recall a specific type of content, or a particular topic
    Ex: Headlines on raising (or spending) breakdown pages
  • When you need to call more visual attention to a headline
  • When you need to group text with a specific image
    Ex: Commissioner biography thumbnails
  • When you need to create a soft visual break in the reading experience of a page

When to consider something else

  • If the layout is already busy or cluttered, use a plain text headline instead
  • If you need to create a stronger visual break in the reading experience of a page, you may want to consider using a full-width slab container and a plain text headline
<div class="container" style="padding-top: 2rem">
    <header class="heading--main">
        <h1 class="icon-heading--raising-circle">
            Raising breakdown
        </h1>
    </header>
</div>

<div class="container" style="padding-top: 2rem">
    <div class="icon-heading">
        <img class="icon-heading__image" src="/img/i-overviews--primary.svg" alt="Icon representing interactive overviews">
        <div class="icon-heading__content">
            <h2 class="icon-heading__title">Interactive overviews</h2>
            <p>You don’t have to be an expert to learn more about campaign finance. These overviews are a visual introduction to how money is raised and spent in federal elections.</p>
        </div>
    </div>
</div>

<div class="container" style="padding-top: 4rem">
    <div class="grid__item commissioner-height">
        <div class="icon-heading">
            <img class="icon-heading__image" src="https://www.fec.gov/resources/cms-content/images/headshot--bauerly.original.png" alt="Headshot of Cynthia L. Bauerly">
            <div class="icon-heading__content">
                <div class="t-lead"><a href="/about/leadership-and-structure/cynthia-l-bauerly/">Cynthia L. Bauerly</a></div>
                <div class="t-sans">Democrat</div>
                <div class="t-italic">June 2008 to February 2013</div>
            </div>
        </div>
    </div>
</div>
 
<div class="container" style="padding-top: 2rem">
  <header class="heading--main">
    <h1 class="icon-heading--raising-circle">
    Raising breakdown
    </h1>
  </header>
</div>

<div class="container" style="padding-top: 2rem">
  <div class="icon-heading">
    <img class="icon-heading__image" src="/img/i-overviews--primary.svg" alt="Icon representing interactive overviews">
    <div class="icon-heading__content">
      <h2 class="icon-heading__title">Interactive overviews</h2>
      <p>You don’t have to be an expert to learn more about campaign finance. These overviews are a visual introduction to how money is raised and spent in federal elections.</p>
    </div>
  </div>
</div>

<div class="container" style="padding-top: 4rem">
  <div class="grid__item commissioner-height">
    <div class="icon-heading">
      <img class="icon-heading__image" src="https://www.fec.gov/resources/cms-content/images/headshot--bauerly.original.png" alt="Headshot of Cynthia L. Bauerly">
      <div class="icon-heading__content">
        <div class="t-lead"><a href="/about/leadership-and-structure/cynthia-l-bauerly/">Cynthia L. Bauerly</a></div>
        <div class="t-sans">Democrat</div>
        <div class="t-italic">June 2008 to February 2013</div>
      </div>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @icon-headings
  • Preview:
  • Filesystem Path: components/02-components/icon-headings/icon-headings.html