Components
Warning
The warning component provides the user with important information about the page or article.
Contents
HTML
<div class="tna-warning">
<h2 class="tna-warning__heading">
<span class="tna-visually-hidden">Important information</span><span class="tna-warning__heading-icon" aria-hidden="true">!</span>
</h2>
<div class="tna-warning__body">
Please note this page references hunger strikes and force feeding, which some people may find upsetting.
</div>
</div>Nunjucks
Nunjucks options
| Name | Type | Description |
|---|---|---|
| heading | string |
If set, the visually hidden heading for the warning which will be suffixed with an exclamation mark. Default value: |
| headingLevel | number |
Required. The heading level which represents an element from |
| body | string |
Required. The body text of the warning. |
| classes | string |
Classes to add to the warning. |
| attributes | object |
HTML attributes (for example data attributes) to add to the warning. |
{% from "nationalarchives/components/warning/macro.njk" import tnaWarning %}
{{ tnaWarning({
headingLevel: 2,
body: "Please note this page references hunger strikes and force feeding, which some people may find upsetting."
}) }}Jinja
Important information
This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy.
{% from "components/warning/macro.html" import tnaWarning %}
{{ tnaWarning({
"headingLevel": 2,
"body": "Please note this page references hunger strikes and force feeding, which some people may find upsetting."
}) }}