Filtered listings

This component provides a way to list and filter items. Two levels of categorisation are available: sections and tags. Every item must belong to exactly one section and one tag, and it is up to you to choose unique names for your sections and tags.

When naming sections and tags, we recommend that you use only lower-case letters, dashes and underscores. This will lead to more readable URLs if you end up using the pre-selection feature (e.g. /page?section=example-section instead of /page?section=Example%20section).

Pre-select filters

The tags filter can be pre-selected on page load by adding ?tags=... to the end of the URL - e.g. ?tags=nominavi,iudico.

The section filter can be pre-selected with ?section=... - e.g. ?section=section-3.

You may of course use both parameters together: ?tags=nominavi&section=section-3.

Don't forget to encode any eserved URI character (e.g. replace & with %26 ) - or better, slugify the name of your sections and tags.

Colours

To associate a colour with a tag, use the data-color attribute on the tags checkbox in the filters container. On page load, the colour will be automatically applied to every item with that tag.

Five colours are available: green, bronze, silver, blue and yellow. For design purposes, we recommend that you order your tags inside the filters container so that the sequence of colours matches the list above.

Filters

Example:
Filter by type
Filter by section
Source code:
<div class="filtered-listing-wrapper">
  <form class="filtered-listing-select">
    <fieldset class="left">
      <legend>Filter by type</legend>
      <div class="filtered-listing-tag">
        <input checked="checked" class="checkbox" data-tag="all" id="c0" name="f[degree_type]" type="checkbox">
        <label for="c0"><span>All</span></label>
      </div>
      <div class="filtered-listing-tag">
        <input class="checkbox" data-color="green" data-tag="nominavi" id="c1" name="f[course_type]" type="checkbox">
        <label for="c1">
          <span>Nominavi appetere</span>
        </label>
      </div>
      <div class="filtered-listing-tag">
        <input class="checkbox" data-color="bronze" data-tag="iudico" id="c2" name="f[course_type]" type="checkbox">
        <label for="c2"><span>Iudico corrumpit</span></label>
      </div>
      <div class="filtered-listing-tag">
        <input class="checkbox" data-color="silver" data-tag="argumentum" id="c3" name="f[course_type]" type="checkbox">
        <label for="c3"><span>Argumentum philosophia</span></label>
      </div>
      <div class="filtered-listing-tag">
        <input class="checkbox" data-color="blue" data-tag="errem" id="c4" name="f[course_type]" type="checkbox">
        <label for="c4"><span>Errem qualisque</span></label>
      </div>
      <div class="filtered-listing-tag">
        <input class="checkbox" data-color="yellow" data-tag="audiam" id="c5" name="f[course_type]" type="checkbox">
        <label for="c5"><span>Audiam delectus</span></label>
      </div>
    </fieldset>
    <fieldset class="right">
      <legend class="screenreaders-only">Filter by section</legend>
      <label for="f-select2">Filter by section</label>
      <div>
        <select class="clear" id="f-select2" name="f[select2]">
          <option value="-1">All sections</option>
          <option value="section-1">Section heading 1</option>
          <option value="section-2">Different Section</option>
          <option value="section-3">Third Example Section</option>
        </select>
      </div>
    </fieldset>
  </form>
</div>

Listing

Example:

Section heading 1

Lorem ipsum dolor sit amet, vis te saepe nominavi appetere, ceteros lucilius te usu, no nam tota partiendo

Different Section

Ex mei noluisse percipit, ea unum ludus invenire pri. Ei duo aliquid eleifend, errem qualisque at pro. Qui et elit delicatissimi, periculis elaboraret referrentur eam id, graece tractatos ut est. Aperiri delenit sed ei, pro simul principes

Third Example Section

Ei nihil argumentum philosophia mel, commune accusata ius ex, homero scripserit an mea. Ne splendide deseruisse quo

Source code:
<div>
  <hr class="spacer">
  <div class="filtered-listing-section clearfix" data-section="section-1">
    <div class="aside">
      <h2>Section heading 1</h2>
      <p>
        Lorem ipsum dolor sit amet, vis te saepe nominavi appetere, ceteros
        lucilius te usu, no nam tota partiendo
      </p>
    </div>
    <div class="bside">
      <ul class="filtered-listing-grid">
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Exerci Oportere</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Consulatu repudiandae</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Dicant appellantur pro</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Periculis elaboraret referrentur</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="iudico">
          <a href="#">
            Iudico corrumpit
            <strong>Sed animal intellegebat no. Ius</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="iudico">
          <a href="#">
            Iudico corrumpit
            <strong>Eum atqui vidisse legimus ex tempor</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Audiam delectus consequuntur</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Inciderint consectetuer</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Mea sumo rebum ea</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Vim ut putant urbanitas</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="errem">
          <a href="#">
            Errem qualisque
            <strong>Ludus invenire pri</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="errem">
          <a href="#">
            Errem qualisque
            <strong>Putant urbanitas</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="audiam">
          <a href="#">
            Errem qualisque
            <strong>Ludus invenire pri</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="audiam">
          <a href="#">
            Errem qualisque
            <strong>Putant urbanitas</strong>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <hr class="spacer">
  <div class="filtered-listing-section clearfix" data-section="section-2">
    <div class="aside">
      <h2>Different Section</h2>
      <p>
        Ex mei noluisse percipit, ea unum ludus invenire pri. Ei duo aliquid
        eleifend, errem qualisque at pro. Qui et elit delicatissimi, periculis
        elaboraret referrentur eam id, graece tractatos ut est. Aperiri delenit
        sed ei, pro simul principes
      </p>
    </div>
    <div class="bside">
      <ul class="filtered-listing-grid">
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Dicant appellantur pro</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Periculis elaboraret referrentur</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="iudico">
          <a href="#">
            Iudico corrumpit
            <strong>Eum atqui vidisse legimus ex tempor</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Mea sumo rebum ea</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Vim ut putant urbanitas</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="errem">
          <a href="#">
            Errem qualisque
            <strong>Ludus invenire pri</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="audiam">
          <a href="#">
            Errem qualisque
            <strong>Ludus invenire pri</strong>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <hr class="spacer">
  <div class="filtered-listing-section clearfix" data-section="section-3">
    <div class="aside">
      <h2>Third Example Section</h2>
      <p>
        Ei nihil argumentum philosophia mel, commune accusata ius ex, homero
        scripserit an mea. Ne splendide deseruisse quo
      </p>
    </div>
    <div class="bside">
      <ul class="filtered-listing-grid">
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Exerci Oportere</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Consulatu repudiandae</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="nominavi">
          <a href="#">
            Nominavi appetere
            <strong>Periculis elaboraret referrentur</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="iudico">
          <a href="#">
            Iudico corrumpit
            <strong>Eum atqui vidisse legimus ex tempor</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Audiam delectus consequuntur</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Inciderint consectetuer</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Mea sumo rebum ea</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="argumentum">
          <a href="#">
            Argumentum philosophia
            <strong>Vim ut putant urbanitas</strong>
          </a>
        </li>
        <li class="filtered-listing-item" data-tag="audiam">
          <a href="#">
            Argumentum philosophia
            <strong>Vim ut putant urbanitas</strong>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <hr class="spacer">
</div>