FEC Pattern Library

Endbar

A horizontal container at the bottom of a page. Most commonly used as legal citations bar to collect and surface the legal bases for content on a given page.

When to use

  • Users need to reference the original source for content or guidance
  • There are multiple legal references on a page

Guidance

  • Include titles whenever possible— titles provide context clues for readers
  • Formatting:
    • Regulations follow this format: 11 CFR 111.11
    • Statutes follow this format: 52 U.S.C. §30104
    • Federal Register notices follow this format: 78 Fed. Reg. 40625 (July 8, 2013)
<div class="container">
    <section id="legal-citations" class="content__section">
        <div class="sidebar--primary t-sans">
            <h4 class="sidebar__title">Legal citations</h4>
            <div class="sidebar__content">
                <div class="grid grid--2-wide">
                    <div class="grid__item">
                        <div class="t-bold">Statutes</div>
                        <div class="rich-text">
                            <div><a href="#">52 U.S.C. §30101</a></div><br>
                            <div><a href="#">52 U.S.C. §30108</a></div><br>
                        </div>
                    </div>
                    <div class="grid__item">
                        <div class="t-bold">Regulations</div>
                        <ul>
                            <div><a href="#">11 CFR §100.3</a></div><br>
                            <div><a href="#">11 CFR §100.14</a></div><br>
                            <div><a href="#">11 CFR §100.15</a></div><br>
                        </ul>
                    </div>
                    <div class="grid__item">
                        <div class="t-bold">This opinion cites these earlier opinions</div>
                        <div class="rich-text">
                            <div><a href="#">AO 2001-13</a></div>
                            <div><i>Green Party of the United States</i></div><br>
                            <div><a href="#">AO 2012-36</a></div>
                            <div><i>Green Party of Connecticut</i></div><br>
                            <div><a href="#">AO 2012-39</a></div>
                            <div><i>Green Party of Virginia</i></div><br>
                            <div><a href="#">AO 2015-01</a></div>
                            <div><i>Green-Rainbow Party</i></div><br>
                            <div><a href="#">AO 2016-14</a></div>
                            <div><i>11 Libertarian State Committees</i></div><br>
                            <div><a href="#">AO 2016-18</a></div>
                            <div><i>Ohio Green Party</i></div><br>
                        </div>
                    </div>
                    <div class="grid__item">
                        <div class="t-bold">This opinion is cited by these later opinions</div>
                        <div><em>Isn't cited by later opinions</em></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
 
<div class="container">
<section id="legal-citations" class="content__section">
  <div class="sidebar--primary t-sans">
    <h4 class="sidebar__title">Legal citations</h4>
    <div class="sidebar__content">
      <div class="grid grid--2-wide">
        <div class="grid__item">
          <div class="t-bold">Statutes</div>
          <div class="rich-text">
            <div><a href="#">52 U.S.C. §30101</a></div><br>
            <div><a href="#">52 U.S.C. §30108</a></div><br>
          </div>
        </div>
          <div class="grid__item">
            <div class="t-bold">Regulations</div>
            <ul>
              <div><a href="#">11 CFR §100.3</a></div><br>
              <div><a href="#">11 CFR §100.14</a></div><br>
              <div><a href="#">11 CFR §100.15</a></div><br>
            </ul>
          </div>
          <div class="grid__item">
            <div class="t-bold">This opinion cites these earlier opinions</div>
            <div class="rich-text">
                <div><a href="#">AO 2001-13</a></div>
                <div><i>Green Party of the United States</i></div><br>
                <div><a href="#">AO 2012-36</a></div>
                <div><i>Green Party of Connecticut</i></div><br>
                <div><a href="#">AO 2012-39</a></div>
                <div><i>Green Party of Virginia</i></div><br>
                <div><a href="#">AO 2015-01</a></div>
                <div><i>Green-Rainbow Party</i></div><br>
                <div><a href="#">AO 2016-14</a></div>
                <div><i>11 Libertarian State Committees</i></div><br>
                <div><a href="#">AO 2016-18</a></div>
                <div><i>Ohio Green Party</i></div><br>
            </div>
          </div>
          <div class="grid__item">
            <div class="t-bold">This opinion is cited by these later opinions</div>
              <div><em>Isn't cited by later opinions</em></div>
          </div>
      </div>
    </div>
  </div>
</section>
</div>
 
/* No context defined. */