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

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