Components
Tags
The tags component provides users with a list of tags which can link to other content.
- Status
- Official
Contents
Contents
HTML
<ul class="tna-tags">
<li class="tna-tags__item">
<a href="#?tag=all" class="tna-tags__link">All</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=alpha" class="tna-tags__link">Medieval (974–1485)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=beta" class="tna-tags__link">Early Modern (1485–1714)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=gamma" class="tna-tags__link">Georgians (1714–1837)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=delta" class="tna-tags__link">Victorians (1837–1901)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=epsilon" class="tna-tags__link">Early 20th century (1901–1918)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=zeta" class="tna-tags__link">Interwar (1918–1939)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=eta" class="tna-tags__link">Second World War (1939–1945)</a>
</li>
<li class="tna-tags__item">
<a href="#?tag=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: "#?tag=all"
},
{
label: "Medieval (974–1485)",
href: "#?tag=alpha"
},
{
label: "Early Modern (1485–1714)",
href: "#?tag=beta"
},
{
label: "Georgians (1714–1837)",
href: "#?tag=gamma"
},
{
label: "Victorians (1837–1901)",
href: "#?tag=delta"
},
{
label: "Early 20th century (1901–1918)",
href: "#?tag=epsilon"
},
{
label: "Interwar (1918–1939)",
href: "#?tag=zeta"
},
{
label: "Second World War (1939–1945)",
href: "#?tag=eta"
},
{
label: "Postwar (1945–2000)",
href: "#?tag=theta"
}
]
}) }}Jinja
Important information!
{% from "components/tags/macro.html" import tnaTags %}
{{ tnaTags({
"items": [
{
"label": "All",
"href": "#?tag=all"
},
{
"label": "Medieval (974–1485)",
"href": "#?tag=alpha"
},
{
"label": "Early Modern (1485–1714)",
"href": "#?tag=beta"
},
{
"label": "Georgians (1714–1837)",
"href": "#?tag=gamma"
},
{
"label": "Victorians (1837–1901)",
"href": "#?tag=delta"
},
{
"label": "Early 20th century (1901–1918)",
"href": "#?tag=epsilon"
},
{
"label": "Interwar (1918–1939)",
"href": "#?tag=zeta"
},
{
"label": "Second World War (1939–1945)",
"href": "#?tag=eta"
},
{
"label": "Postwar (1945–2000)",
"href": "#?tag=theta"
}
]
}) }}