FEC Pattern Library

Example form

The example form component creates a visual target for users to recognize when a sample of a properly completed, multiple-page form is available. The thumbnail and document title should link to the full-size form.

Example components are stylistically similar to the blockquote typography style, since both indicate a small pause in the main content for an illustrative sample or quotation.

When to use

  • Users need sample content that spans multiple pages or an entire completed form

When to consider something else

  • If users need only a specific example for a small section of a form, use an example image with a short excerpt from the form

GitHub issues

<div class="container" style="padding: 2rem">
    <p class="t-sans t-upper">Example forms</p>
    <div class="row example">
        <div class="usa-width-one-half">
            <a class="example__thumbnail" href="#">
                <img src="/components/thumbnail--form1.png" alt="Small image of FEC form 1" />
            </a>
            <div class="t-bold t-upper">PDF</div>
            <a href="#">Statement of Organization: FEC form 1</a>
        </div>
    </div>
</div>
 
<div class="container" style="padding: 2rem">
  <p class="t-sans t-upper">Example forms</p>
  <div class="row example">
    <div class="usa-width-one-half">
      <a class="example__thumbnail" href="#">
        <img src="/components/thumbnail--form1.png"alt="Small image of FEC form 1"/>
      </a>
      <div class="t-bold t-upper">PDF</div>
      <a href="#">Statement of Organization: FEC form 1</a>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @example-form
  • Preview:
  • Filesystem Path: components/02-components/examples/example-form/example-form.html