<li class="vd-domain-item vd-domain-item--small">
<a href="domaines#this%20is%20the%20title" class="vd-domain-item vd-domain-item--small vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">This is the title</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<span class="sr-only">)</span>
</span>
</a>
</li>
<li class="vd-domain-item vd-domain-item--small{% if styleModifier %} {{ styleModifier }}{% endif %}">
<a href="{% if url %}{{ url }}{% else %}domaines#{{ name | lower | urlencode }}{% endif %}"
class="vd-domain-item vd-domain-item--small{% if styleModifier %} {{ styleModifier }}{% endif %} vd-domain-item__link-container">
<span class="vd-domain-item__link vd-link-invisible h4">
{{- name -}}
</span>
<span class="vd-domain-item__text">
<span class="sr-only">(Exemple de contenu: </span>
{{- description -}}
<span class="sr-only">)</span>
</span>
</a>
</li>
{
"name": "This is the title",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
}
@charset 'UTF-8';
@use "sass:math";
/**
* Teaser links
*
* 1. Override heading font-weight
* 2. Let user click on the whole item
* 3. Set focus style for the whole item
* 4. Remove focus style on the link
*/
.vd-domain-item {
display: flex;
flex-direction: column;
text-decoration: none;
&:focus-within {
background: $vd-focus; /* [3] */
}
}
.vd-domain-item__link {
margin-top: math.div($spacer, 4);
color: $black;
}
.vd-domain-item--big {
.vd-domain-item__link {
font-weight: 300; /* [1] */
}
}
.vd-domain-item__text {
color: $gray-500;
}
.vd-domain-item--small {
.vd-domain-item__link {
margin-bottom: 0 !important;
}
.vd-domain-item__text {
margin-top: 0;
}
}
.vd-domain-item__link-container {
width: 100%;
&:focus {
outline: 0; /* [4] */
}
&:hover {
text-decoration: none;
> .vd-domain-item__link {
text-decoration: underline;
}
}
}
No notes defined.