{{< abbr "CI/CD" >}}

{{< accordion >}}
  {{< accordion-item header="Élément d'accordéon #1" show="true" >}}
    Il s'agit du contenu du corps du premier élément de l'accordéon. Il prend en charge le contenu HTML, s'il est activé dans le moteur de rendu goldmark. L'élément est affiché en ajoutant la valeur `show` à l'argument `class`.
  {{< /accordion-item >}}
  {{< accordion-item header="Élément d'accordéon #2" >}}
    Il s'agit du contenu du corps du deuxième élément de l'accordéon.
  {{< /accordion-item >}}
  {{< accordion-item header="Élément d'accordéon #3" >}}
    Il s'agit du contenu du corps du troisième élément de l'accordéon.
  {{< /accordion-item >}}
{{< /accordion >}}

{{< alert color="danger" dismissible="true" >}}
    Une simple alerte de danger — vérifiez-la !
{{< /alert >}}

En-tête 1 {{< badge title="Nouveau" >}}
{.h1}

En-tête 2 {{< badge title="Nouveau" >}}
{.h2}

En-tête 3 {{< badge title="Nouveau" >}}
{.h3}

En-tête 4 {{< badge title="Nouveau" >}}
{.h4}

En-tête 5 {{< badge title="Nouveau" >}}
{.h5}

En-tête 6 {{< badge title="Nouveau" >}}
{.h6}

{{< breadcrumb path="blog" >}}

{{< button color="secondary" tooltip="Cliquez sur la boîte de réception pour voir vos messages non lus." href="#!" badge="99+" >}}
    Boîte de réception
{{< /button >}}

{{< button-group aria-label="Basic example" >}}
  {{< button color="primary" href="#!" >}}Gauche{{< /button >}}
  {{< button color="primary" href="#!" >}}Millieu{{< /button >}}
  {{< button color="primary" href="#!" >}}Droite{{< /button >}}
{{< /button-group >}}

{{< card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary"
  header="publication" footer="none" button=true />}}

{{< card-group padding="3" gutter="3" >}}
    {{< card title="Framework Bootstrap" icon="fab bootstrap" >}}
        Créez des sites rapides et réactifs avec Bootstrap 5. Personnalisez facilement votre site
        avec les fichiers source Sass.
    {{< /card >}}
    {{< card title="Recherche en texte intégral" icon="fas magnifying-glass" >}}
        Recherchez votre site avec FlexSearch, une bibliothèque de recherche en texte intégral
        avec zéro dépendances.
    {{< /card >}}
    {{< card title="Outils de développement" icon="fas code" >}}
        Utilisez Node Package Manager pour automatiser le processus de construction et suivre
        les dépendances.
    {{< /card >}}
{{< /card-group >}}

{{< carousel ratio="16x9" class="col-sm-12 col-lg-8 mx-auto" >}}
  {{< img src="img/coffee.jpg" caption="slide 1" >}}
  {{< img src="img/phone.jpg" caption="slide 2" >}}
  {{< img src="img/dunes.jpg" caption="slide 3" >}}
{{< /carousel >}}

{{< button collapse="collapse-1" >}}
    Déclencher le panneau
{{< /button >}}

{{< collapse id="collapse-1" class="p-3 border rounded bg-primary-subtle" >}}
    Un contenu de remplacement destiné au composant de repliement. Ce panneau est initialement masqué, mais il
    sera révélé lorsque l'utilisateur active le déclencheur correspondant.
{{< /collapse >}}

{{< command >}}
export MY_VAR=123
{{< /command >}}

{{< command user="user" host="localhost" >}}
export MY_VAR=123
echo "hello"
(out)hello
echo one \
two \
three
(out)one two three
echo "goodbye"
(out)goodbye
{{< /command >}}

{{< command >}}
export MY_VAR=123
{{< /command >}}

{{< file path="./config/_default/languages.toml" id="file-collapse-1" >}}

{{< fa square-check >}}
{{< fab linkedin >}}
{{< fas circle-check >}}

{{< image src="img/flowers.jpg" ratio="21x9" caption="Légende de l'image" class="rounded" >}}

{{< image src="/img/logo_icon.svg" class="col-sm-6 col-lg-4" wrapper="text-center" >}}

{{< image src="/img/logo_var.svg#logo" class="col-sm-6 col-lg-4" wrapper="text-center" >}}

- {{< link hinode >}}Lien nommé avec les paramètres par défaut{{< /link >}}
- {{< link name=hinode cue=false tab=false >}}Lien nommé s'ouvrant dans l'onglet actuel sans icône{{< /link >}}
- {{< link name=hinode cue=true tab=true >}}Lien nommé s'ouvrant dans un nouvel onglet avec icône{{< /link >}}
- {{< link hinode />}}
- {{< link href="https://developer.mozilla.org" >}}Lien externe{{< /link >}}
- {{< link "./projects/another-project" >}}Lien interne avec titre{{< /link >}}
- {{< link url="projects/another-project" />}}
- {{< link url="/projects/another-project" />}}
- {{< link url="../projects/another-project" case=false />}}
- {{< link "about" />}}
- {{< link "/en/about/" />}}
- {{< link "/en/about" >}}About (Anglais){{< /link >}}
- {{< link "#image" />}}
- {{< link "components/#map" />}}

Utilisez le shortcode `mark` pour {{< mark >}}mettre en évidence{{< /mark >}} un texte spécifique.

  {{< nav type="pills" vertical="true" >}}
    {{< nav-item header="Élément de navigation #1" show="true" >}}
      Voici le contenu de navigation du premier élément. Il prend en charge le contenu HTML, s'il est
      activé dans le moteur de rendu Goldmark. L'élément est affiché en ajoutant la valeur `show` à l'argument `class`.
    {{< /nav-item >}}
    {{< nav-item header="Élément de navigation #2" >}}
      Voici le contenu de navigation du deuxième élément.
    {{< /nav-item >}}
    {{< nav-item header="Élément de navigation #3" >}}
      Voici le contenu de navigation du troisième élément.
    {{< /nav-item >}}
  {{< /nav >}}

{{< navbar id="navbar-sample" path="blog" color="primary" size="md" search="false" menus="sample" title="Marque" mode="false" >}}

{{< release version="v0.14.1" >}}

{{< spinner color="info" class="text-center" >}}
Chargement...
{{< /spinner >}}

H{{< sub 2 >}}O est un liquide.

2{{< sup 10 >}} équivaut à 1024.

{{< timeline data="timeline-fr" background="dark" >}}

{{< button toast="toast-example-1" >}}
    Affiche la notification #1
{{< /button >}}

{{< button toast="toast-example-2" >}}
    Affiche la notification #1
{{< /button >}}

{{< toast id="toast-example-1" header="Premier titre" >}}
    Ceci est le premier message de notification. Il prend en charge le `markdown`.
{{< /toast >}}

{{< toast id="toast-example-2" header="Deuxième titre" >}}
    Ceci est le deuxième message de notification. Il prend en charge le `markdown`.
{{< /toast >}}

{{< tooltip color="primary" title="Légende de l'infobulle" href="#!" >}}Démonstration{{< /tooltip >}} d'une infobulle

{{< video host="cloudinary" account="demo" id="elephants" autoplay=true >}}