> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/caption.md).

# Caption

{% hint style="info" icon="figma" %}
Nom du composant : **captionMain**
{% endhint %}

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=54-3551&page-id=54:3550&scaling=min-zoom&starting-point-node-id=54:3551&t=jFvWZrw5aqh5B8IB-1&viewport=220,298,0.94>" %}

***

### Principes

#### Une couleur, une signification

Chaque type de caption à sa signification. Utiliser toujours la même couleur pour la même thématique permet de clarifier et simplifier l'expérience du client. Se référer à la page [couleurs](/documentation/foundations/colors.md) pour en savoir plus.

#### Simplicité du message

Le texte doit être court, concis, pertinent et impactant. Ces éléments ne sont pas dédiés au marketing, ils sont utilitaires et visent à clarifier l'expérience du client.

#### L'importance de l'icône

L'icône est recommandée, même si désactivable. Elle permet de transmettre le thème global du message avant même sa lecture intégrale. Élément très important pour que l'utilisateur scanne rapidement le contenu de son écran.

***

### Usage

Utilisé dès qu'une information importante doit être transmise à l'utilisateur : Un cadeau, un succès, un problème, ou toute autre information qui doit sortir du lot. Elle s'utilise uniquement Inline, donc ne flote jamais seule par dessus d'autre contenu.

***

### À faire, ne pas faire

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:green;">À faire</mark></td><td>Utiliser l'élément en inline pour faire ressortir une information importante.</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Utiliser la mauvaise couleur pour la thématique de l'information transmise.</td></tr></tbody></table>

***

### Composant lié

{% content-ref url="/pages/of8uu2xQNO6TxXhL5ShS" %}
[Accordions](/documentation/components/accordions.md)
{% endcontent-ref %}

{% content-ref url="/pages/X3lpdDgKjvyvHqdERzpe" %}
[Label](/documentation/components/labels.md)
{% endcontent-ref %}

{% content-ref url="/pages/DDFajWrdcKN7601HrslN" %}
[Reinsurance](/documentation/components/reinsurance.md)
{% endcontent-ref %}