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=<tag-list> to the end of the URL, where <tag-list> is a coma-separated list of tags — e.g. ?tags=nominavi,ludico.

The section filter can be pre-selected with ?section=<section-name> — e.g. ?section=section-3.

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

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


Colours

Note: starting from v4, the colours are no longer bound to the tags, and the colour classes have been removed (category[a-e], undergraduate, etc.)

To associate a colour with a tag, use the data-color attribute on the tag's 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

Filter by type
<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">
      <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



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



<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" />