Callout - Mise en avant

La "Mise en avant" permet de faire ressortir visuellement une information importante.

Component checklist

Statut

-

Fonctionnel

Code source

Lien vers le repository (nous demander les droits)

Storybook

Dernière version publiée

Dernière version de modification

Package @ds-autonomie/web-components

2.21.1

Disponible depuis la version

Package @ds-autonomie/web-components

1.21.0

Usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-callout callout-title="Titre" header-level="2">
                                                                                                                                                          <p>Norem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. </p>
                                                                                                                                                        </dsa-callout>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/callout/callout.js';
                                                                                                                                                          import type { DSACallout } from '@ds-autonomie/web-components';
                                                                                                                                                          const calloutEl = document.querySelector<DSACallout>('dsa-callout')
                                                                                                                                                          if (calloutEl !== null) {
                                                                                                                                                            console.log(calloutEl.calloutTitle)
                                                                                                                                                          }
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser l'alerte

 


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

callout-title

Titre de la mise en avant

string

''

headerLevel header-level

Le niveau aria-level du titre.

1 | 2 | 3 | 4 | 5 | 6

 

Méthodes

Slots

Nom

Description

(défaut)

Le contenu principal

Événements