<div aria-labelledby="error-summary-title" class="vd-error-summary" role="alert" tabindex="-1">
<h2 id="error-summary-title">Il y a un problème</h2>
<ul>
<li><a href="#passport-issued-error" class="text-danger">La date à laquelle votre passeport a été délivré doit être dans le passé</a></li>
<li><a href="#postcode-error" class="text-danger">Entrez un code postal à quatre chiffres comme 1234</a></li>
</ul>
</div>
<div aria-labelledby="error-summary-title" class="vd-error-summary" role="alert"
tabindex="-1">
<h2 id="error-summary-title">{{ title }}</h2>
{% if errorList -%}
<ul>
{% for item in errorList -%}
{%- if item -%}
<li><a href="{{ item.url }}" class="text-danger">{{ item.text }}</a></li>
{%- endif -%}
{% endfor -%}
</ul>
{% endif -%}
</div>
{
"title": "Il y a un problème",
"errorList": [
{
"text": "La date à laquelle votre passeport a été délivré doit être dans le passé",
"url": "#passport-issued-error"
},
{
"text": "Entrez un code postal à quatre chiffres comme 1234",
"url": "#postcode-error"
}
]
}
/* ==========================================================================
#ERROR-SUMMARY
========================================================================== */
.vd-error-summary {
padding: $spacer;
border: 5px $vd-danger solid;
> h1,
> .h1,
> h2,
> .h2,
> h3,
> .h3,
> h4,
> .h4,
> h5,
> .h5 {
margin-top: 0;
}
&:focus {
@include vd-focus-outline;
}
}
No notes defined.