FEC Pattern Library

Documents

Document preview items are used to add visual interest and substance to a PDF-heavy list layout. The thumbnail is a preview of the PDF cover image. Document previews should also be used for lists of forms, or in other places where the document is an essential subject.

When to use

  • Use when there are 1-6 items in a short section or layout that needs visual interest
    Ex: Statutes page

When to consider something else

  • If there are more than six items in the list, or if there is significant metadata useful for telling items apart, consider a feed
<div class="container" style="padding: 2rem">
    <div class="grid grid--2-wide">
        <div class="grid__item document-thumbnail">
            <a class="document-thumbnail__img" href="#" target="_blank">
                <img src="/img/thumbnail--feca.jpg" alt="Title 52, Voting and Elections, GPO">
            </a>
            <span class="document-thumbnail__description">
                <a href="#" target="_blank">Title 52, Voting and Elections, GPO</a><br>(1.6MB PDF)
            </span>
        </div>
        <div class="grid__item document-thumbnail">
            <a class="document-thumbnail__img" href="#" target="_blank">
                <img src="/img/thumbnail--title52.jpg" alt="Title 26, Internal Revenue Code, GPO">
            </a>
            <span class="document-thumbnail__description">
                <a href="#" target="_blank">Title 26, Internal Revenue Code, GPO</a><br>(1.6MB PDF)
            </span>
        </div>
    </div>
</div>
 
<div class="container" style="padding: 2rem">
  <div class="grid grid--2-wide">
    <div class="grid__item document-thumbnail">
      <a class="document-thumbnail__img" href="#" target="_blank">
        <img src="/img/thumbnail--feca.jpg" alt="Title 52, Voting and Elections, GPO">
      </a>
      <span class="document-thumbnail__description">
        <a href="#" target="_blank">Title 52, Voting and Elections, GPO</a><br>(1.6MB PDF)
      </span>
    </div>
    <div class="grid__item document-thumbnail">
      <a class="document-thumbnail__img" href="#" target="_blank">
        <img src="/img/thumbnail--title52.jpg" alt="Title 26, Internal Revenue Code, GPO">
      </a>
      <span class="document-thumbnail__description">
        <a href="#" target="_blank">Title 26, Internal Revenue Code, GPO</a><br>(1.6MB PDF)
      </span>
    </div>
  </div>
</div>
 
/* No context defined. */