FEC Pattern Library

Sidebar

Resource bars help users identify the most important or most commonly-sought FEC content of the same page type that’s related to the topic of the page they’re on. Sidebars are user for short lists, and appear on the right-hand side of the main content.

When to use

  • When there is a preceding or subsequent page of the same type about the same topic

When to consider something else

  • When the list of resources is longer than the page’s main content. Either a standalone page for this topic isn’t needed, or the links should be written into the main page content
  • When the page is a different type of page or publication about a related topic, list them underneath the sidebar container
    Ex: Record articles related to content on a guide page appear as a list under the sidebar
<div class="sidebar-container">
    <aside class="sidebar sidebar--secondary">
        <h4 class="sidebar__title">Read next</h4>
        <div class="sidebar__content">
            <div class="rich-text">
                <p><a href="#">Pre-election reports</a></p>
                <p><a href="#">Post-general election reports</a></p>
                <p><a href="#">48-Hour notices</a></p>
                <p><a href="#">Dates and deadlines</a></p>
                <p><a href="#">Registration and reporting forms</a></p>
                <p><a href="#">Terminating a committee</a></p>
            </div>
        </div>
    </aside>
</div>
 
<div class="sidebar-container">
<aside class="sidebar sidebar--secondary">
  <h4 class="sidebar__title">Read next</h4>
    <div class="sidebar__content">
      <div class="rich-text">
        <p><a href="#">Pre-election reports</a></p>
        <p><a href="#">Post-general election reports</a></p>
        <p><a href="#">48-Hour notices</a></p>
        <p><a href="#">Dates and deadlines</a></p>
        <p><a href="#">Registration and reporting forms</a></p>
        <p><a href="#">Terminating a committee</a></p>
      </div>
    </div>
</aside>
</div>
 
/* No context defined. */