Components
Tags
The tags component provides users with a list of tags which can link to other content.
Contents
HTML
<ul class="tna-tags">
<li class="tna-tags__item">
<a href="#?filter=all" class="tna-tags__link">All</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=alpha" class="tna-tags__link">Medieval (974–1485)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=beta" class="tna-tags__link">Early Modern (1485–1714)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=gamma" class="tna-tags__link">Georgians (1714–1837)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=delta" class="tna-tags__link">Victorians (1837–1901)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=epsilon" class="tna-tags__link">Early 20th century (1901–1918)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=zeta" class="tna-tags__link">Interwar (1918–1939)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=eta" class="tna-tags__link">Second World War (1939–1945)</a>
</li>
<li class="tna-tags__item">
<a href="#?filter=theta" class="tna-tags__link">Postwar (1945–2000)</a>
</li>
</ul>Nunjucks
Nunjucks options
| Name | Type | Description |
|---|---|---|
| items | array |
Required. A list of items to display as tags. |
| stack | boolean |
If Default value: |
| small | boolean |
If Default value: |
| classes | string |
Classes to add to the tags. |
| attributes | object |
HTML attributes (for example data attributes) to add to the tags. |
| Name | Type | Description |
|---|---|---|
| label | string |
Required. The text label for the tag. |
| href | string |
An optional URL for the tag item. If not provided, the tag will be rendered as a plain text item. |
| title | string |
If an |
| selected | boolean |
If Default value: |
| classes | string |
Classes to add to the tag item. |
| attributes | object |
HTML attributes (for example data attributes) to add to the tag item. |
{% from "nationalarchives/components/tags/macro.njk" import tnaTags %}
{{ tnaTags({
items: [
{
label: "All",
href: "#?filter=all"
},
{
label: "Medieval (974–1485)",
href: "#?filter=alpha"
},
{
label: "Early Modern (1485–1714)",
href: "#?filter=beta"
},
{
label: "Georgians (1714–1837)",
href: "#?filter=gamma"
},
{
label: "Victorians (1837–1901)",
href: "#?filter=delta"
},
{
label: "Early 20th century (1901–1918)",
href: "#?filter=epsilon"
},
{
label: "Interwar (1918–1939)",
href: "#?filter=zeta"
},
{
label: "Second World War (1939–1945)",
href: "#?filter=eta"
},
{
label: "Postwar (1945–2000)",
href: "#?filter=theta"
}
]
}) }}Jinja
Important information!
{% from "components/tags/macro.html" import tnaTags %}
{{ tnaTags({
"items": [
{
"label": "All",
"href": "#?filter=all"
},
{
"label": "Medieval (974–1485)",
"href": "#?filter=alpha"
},
{
"label": "Early Modern (1485–1714)",
"href": "#?filter=beta"
},
{
"label": "Georgians (1714–1837)",
"href": "#?filter=gamma"
},
{
"label": "Victorians (1837–1901)",
"href": "#?filter=delta"
},
{
"label": "Early 20th century (1901–1918)",
"href": "#?filter=epsilon"
},
{
"label": "Interwar (1918–1939)",
"href": "#?filter=zeta"
},
{
"label": "Second World War (1939–1945)",
"href": "#?filter=eta"
},
{
"label": "Postwar (1945–2000)",
"href": "#?filter=theta"
}
]
}) }}