FEC Pattern Library

Multiple category feed

Feeds display single posts chronologically, with the most recent posts appearing first. Feeds that show posts from multiple content categories can display more metadata elements, such as category tags or sub-category labels, which help people identify the differences.

When to use

  • When users are browsing a list of items from more than one content or publication category, and the most recent content is more likely to be of interest than older items
  • Help users navigate between types of content by providing basic category or keyword filtering

When to consider something else

  • 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

GitHub issues

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

    <div class="post-feed">
        <article class="post">
            <div class="post__pre">
                <div class="post__date">March 30, 2018</div>
            </div>
            <div class="row">
                <div class="usa-width-three-fourths">
                    <h3><a href="#">Court remands political committee status case to FEC [<i>CREW, et al. v. FEC</i> (16-2255)]</a></h3>
                    <div class="t-sans row js-post-content">
                        <div class="rich-text">
                            <p>On March 20, 2018, the U.S. District Court for the District of Columbia concluded that the Commission’s dismissal of an administrative complaint Citizens for Responsibility and Ethics in ...<a class="js-read-more post__read-more" href="#">Read more</a></p>
                        </div>
                    </div>
                    <div class="post__meta t-sans">
                        <a class="tag tag--secondary" href="#">FEC Record</a>
                        in: <a href="#">Litigation</a>
                    </div>
                </div>
                <div class="usa-width-one-fourth">
                </div>
            </div>
        </article>

        <article class="post">
            <div class="post__pre">
                <div class="post__date">March 29, 2018</div>
            </div>
            <div class="row">
                <div class="usa-width-three-fourths">
                    <h3><a href="#">Printed copies of the Corporate/Labor Guide now available for order</a></h3>
                    <div class="t-sans row js-post-content">
                        <div class="rich-text">
                            <p>The FEC’s <a href="#">recently updated</a> <i>Campaign Guide for Corporations and Labor Organizations</i> is now available in print. The Guide contains the most up-to-date information regarding corporations, labor organizations, trade associations ...<a class="js-read-more post__read-more" href="#">Read more</a></p>
                        </div>
                    </div>
                    <div class="post__meta t-sans">
                        <a class="tag tag--secondary" href="#">Tips for treasurers</a>
                    </div>
                </div>
                <div class="usa-width-one-fourth">
                </div>
            </div>
        </article>

        <article class="post">
            <div class="post__pre">
                <div class="post__date">March 23, 2018</div>
            </div>
            <div class="row">
                <div class="usa-width-three-fourths">
                    <h3><a href="#">Week of March 19 - March 23, 2018</a></h3>
                    <div class="post__meta t-sans">
                        <a class="tag tag--secondary" href="#">Weekly Digest</a>
                    </div>
                </div>
            </div>
        </article>

        <article class="post">
            <div class="post__pre">
                <div class="post__date">March 21, 2018</div>
            </div>
            <div class="row">
                <div class="usa-width-three-fourths">
                    <h3><a href="#">April reporting reminder (2018)</a></h3>
                    <div class="t-sans row js-post-content">
                        <div class="rich-text">
                            <p>The following reports are due in April:<a class="js-read-more post__read-more" href="#">Read more</a></p>
                        </div>
                    </div>
                    <div class="post__meta t-sans">
                        <a class="tag tag--secondary" href="#">FEC Record</a>
                        in: <a href="#">Reporting</a>
                    </div>
                </div>
            </div>
        </article>
    </div>

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

  <div class="post-feed">
    <article class="post">
      <div class="post__pre">
        <div class="post__date">March 30, 2018</div>
      </div>
      <div class="row">
        <div class="usa-width-three-fourths">
          <h3><a href="#">Court remands political committee status case to FEC [<i>CREW, et al. v. FEC</i> (16-2255)]</a></h3>
          <div class="t-sans row js-post-content">
            <div class="rich-text">
              <p>On March 20, 2018, the U.S. District Court for the District of Columbia concluded that the Commission’s dismissal of an administrative complaint Citizens for Responsibility and Ethics in ...<a class="js-read-more post__read-more" href="#">Read more</a></p>
            </div>
          </div>
          <div class="post__meta t-sans">
            <a class="tag tag--secondary" href="#">FEC Record</a>
              in: <a href="#">Litigation</a>
          </div>
        </div>
        <div class="usa-width-one-fourth">
        </div>
      </div>
    </article>

    <article class="post">
      <div class="post__pre">
        <div class="post__date">March 29, 2018</div>
      </div>
      <div class="row">
        <div class="usa-width-three-fourths">
          <h3><a href="#">Printed copies of the Corporate/Labor Guide now available for order</a></h3>
          <div class="t-sans row js-post-content">
            <div class="rich-text">
              <p>The FEC’s <a href="#">recently updated</a> <i>Campaign Guide for Corporations and Labor Organizations</i> is now available in print. The Guide contains the most up-to-date information regarding corporations, labor organizations, trade associations ...<a class="js-read-more post__read-more" href="#">Read more</a></p>
            </div>
          </div>
          <div class="post__meta t-sans">
            <a class="tag tag--secondary" href="#">Tips for treasurers</a>
          </div>
        </div>
        <div class="usa-width-one-fourth">
        </div>
      </div>
    </article>

    <article class="post">
      <div class="post__pre">
        <div class="post__date">March 23, 2018</div>
      </div>
      <div class="row">
        <div class="usa-width-three-fourths">
          <h3><a href="#">Week of March 19 - March 23, 2018</a></h3>
            <div class="post__meta t-sans">
              <a class="tag tag--secondary" href="#">Weekly Digest</a>
            </div>
        </div>
      </div>
    </article>

    <article class="post">
      <div class="post__pre">
        <div class="post__date">March 21, 2018</div>
      </div>
      <div class="row">
        <div class="usa-width-three-fourths">
          <h3><a href="#">April reporting reminder (2018)</a></h3>
          <div class="t-sans row js-post-content">
            <div class="rich-text">
              <p>The following reports are due in April:<a class="js-read-more post__read-more" href="#">Read more</a></p>
            </div>
          </div>
          <div class="post__meta t-sans">
            <a class="tag tag--secondary" href="#">FEC Record</a>
              in: <a href="#">Reporting</a>
          </div>
        </div>
      </div>
    </article>
  </div>

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