Accordion

Accordion basic

Le composant Accordion est basé sur les éléments HTML natifs <details> et <summary>.
Il suffit de placer votre résumé dans le slot nommé “summary”.
Vous pouvez insérer n’importe quel contenu HTML à l’intérieur de l’accordéon.

Accordion basic

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem

<details> <summary><h4>Accordion basic</h4><svg class="chevron"
      xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"
      class="feather feather-chevron-down"><polyline
        points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
      numquam, repudiandae tenetur similique dolorem</p> </div> </details>

<Accordion>
  <h4 slot="summary">Accordion basic</h4>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
</Accordion>

Accordions Grouped

Ajoutez simplement le même attribut name à chaque accordéon.

Content 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem

Content 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem

Content 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem

<details name="group"> <summary><h4>Content 1</h4><svg class="chevron"
      xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"
      class="feather feather-chevron-down"><polyline
        points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
      numquam, repudiandae tenetur similique dolorem. Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae
      tenetur similique dolorem</p> </div> </details><details name="group">
  <summary><h4>Content 2</h4><svg class="chevron"
      xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"
      class="feather feather-chevron-down"><polyline
        points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
      numquam, repudiandae tenetur similique dolorem</p> </div>
</details><details name="group"> <summary><h4>Content 3</h4><svg class="chevron"
      xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"
      class="feather feather-chevron-down"><polyline
        points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
      numquam, repudiandae tenetur similique dolorem</p> </div> </details>

<Accordion name="group">
    <h4 slot="summary">Content 1</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
  </Accordion>
    <Accordion name="group">
    <h4 slot="summary">Content 2</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
  </Accordion>
    <Accordion name="group">
    <h4 slot="summary">Content 3</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
  </Accordion>

Accordions Grouped in Box

Ajoutez simplement le même attribut name à chaque accordéon.
Placez votre liste d’accordéons dans un composant Box pour ajouter un espacement entre eux.

Content 1

Content 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem

Content 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem

<article> <details name="group2"> <summary><h4>Content 1</h4><svg
        class="chevron" xmlns="http://www.w3.org/2000/svg" width="24"
        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="feather feather-chevron-down"><polyline
          points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
        numquam, repudiandae tenetur similique dolorem. Lorem ipsum dolor sit
        amet consectetur adipisicing elit. Sequi quidem repellat numquam,
        repudiandae tenetur similique dolorem</p> </div> </details><details
    name="group2"> <summary><h4>Content 2</h4><svg class="chevron"
        xmlns="http://www.w3.org/2000/svg" width="24" height="24"
        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round"
        class="feather feather-chevron-down"><polyline
          points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
        numquam, repudiandae tenetur similique dolorem</p> </div>
  </details><details name="group2"> <summary><h4>Content 3</h4><svg
        class="chevron" xmlns="http://www.w3.org/2000/svg" width="24"
        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="feather feather-chevron-down"><polyline
          points="6 9 12 15 18 9"></polyline></svg> </summary> <div> <p>Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat
        numquam, repudiandae tenetur similique dolorem</p> </div> </details>
</article>

<Box>
  <Accordion name="group2">
    <h4 slot="summary">Content 1</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
  </Accordion>
    <Accordion name="group2">
    <h4 slot="summary">Content 2</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
  </Accordion>
    <Accordion name="group2">
    <h4 slot="summary">Content 3</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quidem repellat numquam, repudiandae tenetur similique dolorem</p>
  </Accordion>
</Box>

Retour à la liste des composants

Accordion

Accordion basic Accordion basic

Accordion basic

Accordions Grouped Accordions Grouped

Content 1

Content 2

Content 3

Accordions Grouped in Box Accordions Grouped in Box

Content 1

Content 2

Content 3

Accordion basic

Accordions Grouped

Accordions Grouped in Box