<div class="vd-highlight highlight-dark">
<h3>Title here</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p><a href="#">This is a link</a></p>
</div>
<div class="vd-highlight highlight-dark">
<h3>Title here</h3>
<p>{{ text }}</p>
<p><a href="#">This is a link</a></p>
</div>
{
"text": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo."
}
@charset 'UTF-8';
/**
* Highlight visually content
*
* 1. Make link accessible
* 2. Remove bottom margin of the last element
*/
.highlight-dark {
--highlight-color: #{$white};
--highlight-background-color: #{$dark};
--highlight-title-color: #{$vd-primary-lighter};
}
.highlight-light {
--highlight-color: #{$black};
--highlight-background-color: #{$vd-neutral-light};
--highlight-title-color: #{$vd-primary-dark};
}
.vd-highlight {
padding: ($spacer * 2) ($spacer * 3);
background: var(--highlight-background-color);
color: var(--highlight-color);
> h1,
> .h1,
> h2,
> .h2,
> h3,
> .h3,
> h4,
> .h4,
> h5,
> .h5 {
margin-top: 0;
}
/* stylelint-disable selector-list-comma-newline-after */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-weight: 300;
color: var(--highlight-title-color);
}
/* stylelint-enable */
a {
&,
&:visited {
color: var(--highlight-color); /* [1] */
}
&:focus {
color: $body-color; /* [1] */
}
}
> :last-child {
margin-bottom: 0; /* [2] */
}
.vd-list-links {
color: var(--highlight-color);
}
}
Permet une mise en évidence visuelle du contenu.
S’il s’agit d’information importante, il faut utiliser les balises HTMLou ARIA nécessaire pour des raisons d’accessibilité.