Composant · Layout · éditorial

Highlight

Documenté

Highlight est un encart de mise en avant (DSFR « Mise en avant »), avec titre optionnel et tonalité d'accent (neutral, info, success, warning, error).

Voir le code (Svelte)

<Highlight tone="info" title="Conseil">Utilisez ThemeProvider pour personnaliser les tokens de couleur.</Highlight>
<Highlight tone="warning" title="Attention">Cette API est en version bêta et peut changer sans préavis.</Highlight>
<Highlight tone="success" title="Bonne pratique">Déclarez vos dépendances dans peerDependencies.</Highlight>

Tonalités

Voir le code (Svelte)

<div class="docs-demo-stack">
  <Highlight title="À noter">
    <p>Encart neutre, accent sur la couleur d'action primaire du thème.</p>
  </Highlight>
  <Highlight tone="info" title="Information">
    <p>Contexte utile, non bloquant.</p>
  </Highlight>
  <Highlight tone="warning" title="Attention">
    <p>Point de vigilance à signaler.</p>
  </Highlight>
  <Highlight tone="error" title="Important">
    <p>Risque ou erreur à corriger.</p>
  </Highlight>
</div>

API du composant

Prop	Type	Par défaut
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "error"`	`"neutral"`
`title`	`string`	optionnel
`children`	`Snippet`	le contenu
`class`	`string`	optionnel