FEC Pattern Library

Option components

Option components are typically assembled from at least a ruled heading and a following short paragraph. Often, they are used with a button or some other primary action, and a sidebar. Use more than one option component in a row to give an introduction that helps users disambiguate between topics with much more detailed information on a following page.

When to use

  • Users need a preview of their options for information before starting or committing to a deep dive into detailed subject matter

When to consider something else

  • When users only need a brief amount of detail before making their choice, or when the options are a prioritized set of the whole array available, consider a card
<div class="container">
    <section class="main__content--right">
        <div id="search-rulemakings" class="option">
            <div class="option__content">
                <h2>Search rulemakings</h2>
                <p>Use SERs to search completed and ongoing Commission rulemakings. Search for proposed rules, final rules, public comments and hearing testimony. Additionally, submit comments on proposed regulations and other rulemaking documents.</p>
                <a class="button button--standard button--go" href="#">Search and comment</a>
            </div>
            <aside class="option__aside">
                <a href="#">Recently updated rulemakings and subject index</a>
            </aside>
        </div>
    </section>
</div>

<div class="container">
    <section class="main__content--right">
        <div id="explanations-and-justifications-eampjs" class="option">
            <div class="option__content">
                <h2>Explanations and Justifications (E&amp;Js)</h2>
                <p>The Commission writes an E&amp;J whenever it submits to Congress a new regulation or amends an old one.&nbsp;</span><span>This archive compiles all E&amp;Js written to accompany FEC regulations, from 1975 to present.</p>
                <a class="button button--standard button--go" href="#">Browse E&amp;Js</a>
            </div>
        </div>
    </section>
</div>

<div class="container">
    <section class="main__content--right">
        <div id="public-hearings" class="option">
            <div class="option__content">
                <h2>Public hearings</h2>
                <p>The Commission periodically holds public hearings at its headquarters in Washington, DC. These hearings offer interested persons an opportunity to testify concerning proposed regulations and other matters that come before the Commission.&nbsp;</p>
                <p>Upcoming hearings and those held within the last several years are listed in reverse chronological order with links to relevant documents.</p>
                <a class="button button--standard button--go" href="#">Public hearings archive</a>
            </div>
            <aside class="option__aside">
                <i class="icon-circle--calendar ">
                    <span class="u-visually-hidden">Icon of a calendar</span>
                </i>
                <a href="#">Upcoming public hearings</a>
            </aside>
        </div>
    </section>
</div>
 
<div class="container">
  <section class="main__content--right">
    <div id="search-rulemakings" class="option">
      <div class="option__content">
        <h2>Search rulemakings</h2>
        <p>Use SERs to search completed and ongoing Commission rulemakings. Search for proposed rules, final rules, public comments and hearing testimony. Additionally, submit comments on proposed regulations and other rulemaking documents.</p>
        <a class="button button--standard button--go" href="#">Search and comment</a>
      </div>
    <aside class="option__aside">
      <a href="#">Recently updated rulemakings and subject index</a>
    </aside>
    </div>
  </section>
</div>

<div class="container">
  <section class="main__content--right">
    <div id="explanations-and-justifications-eampjs" class="option">
      <div class="option__content">
        <h2>Explanations and Justifications (E&amp;Js)</h2>
        <p>The Commission writes an E&amp;J whenever it submits to Congress a new regulation or amends an old one.&nbsp;</span><span>This archive compiles all E&amp;Js written to accompany FEC regulations, from 1975 to present.</p>
        <a class="button button--standard button--go" href="#">Browse E&amp;Js</a>
      </div>
    </div>
  </section>
</div>

<div class="container">
  <section class="main__content--right">
    <div id="public-hearings" class="option">
      <div class="option__content">
        <h2>Public hearings</h2>
        <p>The Commission periodically holds public hearings at its headquarters in Washington, DC. These hearings offer interested persons an opportunity to testify concerning proposed regulations and other matters that come before the Commission.&nbsp;</p>
        <p>Upcoming hearings and those held within the last several years are listed in reverse chronological order with links to relevant documents.</p>
        <a class="button button--standard button--go" href="#">Public hearings archive</a>
      </div>
      <aside class="option__aside">
        <i class="icon-circle--calendar ">
          <span class="u-visually-hidden">Icon of a calendar</span>
        </i>
        <a href="#">Upcoming public hearings</a>
      </aside>
    </div>
  </section>
</div>
 
/* No context defined. */
  • Handle: @option-components
  • Preview:
  • Filesystem Path: components/02-components/option-components/option-components.html