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 | |
| headingLevel | number |
Required. |
| body | string |
Required. |
| 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."
}) }}Status
- Status
- In development
- Tested without CSS
- Yes
- WCAG 2.2 AA compliant
- In development
- Analytics integrated
- In development
- Documentation complete
- No