Conseils
Les encadrés sont utilisés pour mettre en évidence des informations, des extraits ou des exemples dans le contenu. Ils servent à attirer l’attention sur des informations dignes d’intérêt, mises en vedette ou utiles, mais qui ne sont pas essentielles à l’utilisateur ou aux tâches qu’il doit accomplir. Si vous cherchez à attirer l’attention sur des informations essentielles, utilisez plutôt une alerte.
Il existe deux types de composants d’encadrés :
- Encadré en ligne : Utilisé pour mettre en évidence des informations, des extraits ou des exemples intégrés au sein d’une section ou d’une sous-section.
- Encadré dans la page : Utilisé pour mettre en évidence des informations, des extraits ou des exemples dans une section ou une sous-section distincte.
À faire
- Rédigez des textes concis, en visant une limite de 280 caractères.
- Utilisez des titres qui respectent la hiérarchie de la page.
- Encadrez des extraits d’un contenu plus volumineux.
À ne pas faire
- N’utilisez pas un encadré à la place d’une alerte.
- N’utilisez pas trop d’encadrés (car cela nuit à leur efficacité).
- N’incluez pas de grands blocs de contenu dans un encadré.
Encadré intraligne
Sit amet, consectetur adipiscing elit. Nulla accumsan erat vitae, vestibulum lorem.
HTML
<div class="gnb-callout-inline">
<p>Sit amet, consectetur adipiscing elit. Nulla accumsan erat vitae, vestibulum lorem.</p>
</div>
Encadré en ligne avec icône
HTML
<div class="gnb-callout-inline-icon">
<p>Sit amet, consectetur adipiscing elit. Nulla accumsan erat vitae, vestibulum lorem.</p>
</div>
Encadré dans la page
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.
HTML
<div class="gnb-callout">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.</p>
</div>
Encadré dans la page avec icône
HTML
<div class="gnb-callout-icon">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non purus semper, accumsan erat vitae, vestibulum lorem. Nulla scelerisque orci nulla, quis ultrices lectus mollis et.</p>
</div>