FEC Pattern Library

Single category feed

Feeds display single posts chronologically, with the most recent posts appearing first. Feeds that show posts from one content category should be visually simple, and eliminate metadata fields that aren’t needed to tell one type of content from another.

When to use

  • To display a short-medium length list of posts from one content or publication category

When to consider something else

  • If the list of items is long (more than 7-10) consider using pagination within the feed or another type of interaction altogether
  • If the date of publication is irrelevant to the content or to users’ needs, a long feed organized by date may be frustrating. Consider methods that order items by how frequently they are used.

Examples

<div class="container" style="padding: 2rem">

    <div class="post-feed">

        <article class="post">
            <h3><a href="/data/legal/advisory-opinions/2018-01/">AO 2018-01 Libertarian Party of Utah</a></h3>
            <p class="t-sans">Status as state committee of national party.</p>
            <p class="t-sans post__doc"><a href="/files/legal/aos/2018-01/AO-2018-01.pdf">Final Opinion | PDF</a></p>
        </article>

        <article class="post">
            <h3><a href="/data/legal/advisory-opinions/2017-13/">AO 2017-13 National Sorghum Producers and Sorghum PAC</a></h3>
            <p class="t-sans">Checkoff system for contributions to trade association and state affiliates acting as collecting agents.</p>
            <p class="t-sans post__doc"><a href="/files/legal/aos/2017-13/2017-13.pdf">Final Opinion | PDF</a></p>
        </article>

        <article class="post">
            <h3><a href="/data/legal/advisory-opinions/2017-12/">AO 2017-12 Take Back Action Fund</a></h3>
            <p class="t-sans">Application of disclaimer rules to paid Facebook Image and Video ads</p>
            <p class="t-sans post__doc"><a href="/files/legal/aos/2017-12/2017-12.pdf">Final Opinion | PDF</a></p>
        </article>

    </div>

</div>
 
<div class="container" style="padding: 2rem">

  <div class="post-feed">

    <article class="post">
      <h3><a href="/data/legal/advisory-opinions/2018-01/">AO 2018-01 Libertarian Party of Utah</a></h3>
      <p class="t-sans">Status as state committee of national party.</p>
      <p class="t-sans post__doc"><a href="/files/legal/aos/2018-01/AO-2018-01.pdf">Final Opinion | PDF</a></p>
    </article>

    <article class="post">
      <h3><a href="/data/legal/advisory-opinions/2017-13/">AO 2017-13 National Sorghum Producers and Sorghum PAC</a></h3>
      <p class="t-sans">Checkoff system for contributions to trade association and state affiliates acting as collecting agents.</p>
      <p class="t-sans post__doc"><a href="/files/legal/aos/2017-13/2017-13.pdf">Final Opinion | PDF</a></p>
    </article>

    <article class="post">
      <h3><a href="/data/legal/advisory-opinions/2017-12/">AO 2017-12 Take Back Action Fund</a></h3>
      <p class="t-sans">Application of disclaimer rules to paid Facebook Image and Video ads</p>
      <p class="t-sans post__doc"><a href="/files/legal/aos/2017-12/2017-12.pdf">Final Opinion | PDF</a></p>
    </article>

  </div>

</div>
 
/* No context defined. */
  • Handle: @single-category
  • Preview:
  • Filesystem Path: components/02-components/feed/01-single-category/single-category.html