Interface de contrôle des tests
Retour

dsfr

Accordéon

Contenu

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
  • list item

Groupe d‘accordéons

  • Contenu

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    • list item
      • list item niveau 2
      • list item niveau 2
    • list item
    • list item

  • Contenu

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    • list item
    • list item
      • list item niveau 2
      • list item niveau 2
      • list item niveau 2

  • Contenu

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    • list item
      • list item niveau 2
      • list item niveau 2
      • list item niveau 2
    • list item
      • list item niveau 2
      • list item niveau 2
      • list item niveau 2
    • list item

  • Contenu

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    • list item
    • list item

  • Contenu

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    • list item
    • list item
      • list item niveau 2
      • list item niveau 2
      • list item niveau 2

  • Contenu

    Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

    • list item
      • list item niveau 2
      • list item niveau 2
    • list item
    • list item

Accordéon dans un accordéon

Contenu

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

Groupes d‘accordéons dans des groupes d‘accordéons

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
      • list item
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item

    • Contenu

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

      • list item
        • list item niveau 2
        • list item niveau 2
        • list item niveau 2
      • list item
        • list item niveau 2
        • list item niveau 2
      • list item

Système d’onglets dans un accordéon

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

Préciser le type d'alerte (Information/Succès/Erreur) dans le titre ou, à défaut, dans le contenu de l'alerte
Le titre est défini par la classe "fr-alert__title", la balise <p> peut être remplacée par un niveau de titre hx suivant le contexte

Alerte par défaut

Alerte info

Alerte succès

Alerte erreur

Alerte avec bouton fermer

Alerte refermable (dans un collapse)

Alerte taille SM

Alerte taille SM refermable

Alerte icône personnalisée

Barre de recherche MD (par défaut)

Barre de recherche LG

Logo MD (par défaut)

Logo SM

Logo LG

Example logo long

Example logo long

Example logo long

Bouton simple

Bouton simple SM

Bouton simple LG

Bouton désactivé

Bouton icon à gauche

Bouton icon à droite

Bouton icon seule

Bouton tag a href

Label bouton

Bouton secondaire

Bouton secondaire désactivé

Bouton secondaire icon à gauche

Bouton secondaire icon à droite

Bouton secondaire icon seule

Bouton secondaire tag a href

Label bouton

Groupe de bouton

Groupe de bouton SM

Groupe de bouton LG

Groupe de boutons verticaux hiérarchisés avec icones

Groupe de boutons inline

Groupe de boutons inline non hiérarchisés

Groupe de boutons inline à partir du breakpoint SM

Groupe de boutons inline à partir du breakpoint MD

Groupe de boutons inline à partir du breakpoint LG

Groupe de boutons inversés en inline à partir du breakpoint SM

Groupe de boutons inline même taille (equisized)

Groupe de boutons inline alignés a droite (equisized)

Groupe de boutons inline alignés au centre (equisized)

Groupe de boutons verticaux même taille (equisized)

Groupe de boutons verticaux alignés a droite (equisized)

Groupe de boutons verticaux alignés au centre (equisized)

Groupe de boutons d'icones

Groupe de boutons d'icones inline

Ensemble de boutons radio

Légende pour l’ensemble de champs

Ensemble de boutons radio, petite taille

Légende pour l’ensemble de champs

Ensemble de boutons radio désactivées

Légende pour l’ensemble de champs

Ensemble de boutons radio en ligne

Légende pour l’ensemble de champs

Ensemble de boutons radio avec texte d‘aide

Légende pour l’ensemble de champs Texte de description additionnel

Ensemble de boutons radio avec erreur

Légende pour l’ensemble de champs

Texte d’erreur obligatoire

Ensemble de boutons radio avec erreur, en ligne

Légende pour l’ensemble de champs

Texte d’erreur obligatoire

Ensemble de boutons radio validés

Légende pour l’ensemble de champs

Texte de validation

Ensemble de boutons radio validés, en ligne

Légende pour l’ensemble de champs

Texte de validation

Ensemble de boutons radio avec texte d‘aide spécifique

Légende pour l’ensemble de champs

Ensemble de boutons radio avec texte d‘aide spécifique, petite taille

Légende pour l’ensemble de champs

Ensemble de boutons radio riches, simple

Légende pour l’ensemble de champs

Ensemble de boutons radio riches, en ligne, simple

Légende pour l’ensemble de champs

Ensemble de boutons radio riches avec textes d'aide

Légende pour l’ensemble de champs Texte de description additionnel

Ensemble de boutons radio riches avec textes d'aide, en ligne

Légende pour l’ensemble de champs Texte de description additionnel

Ensemble de boutons radio riches avec erreur et textes d'aide

Légende pour l’ensemble de champs Texte de description additionnel

Texte d’erreur obligatoire

Ensemble de boutons radio riches avec erreur et textes d'aide, en ligne

Légende pour l’ensemble de champs Texte de description additionnel

Texte d’erreur obligatoire

Ensemble de boutons radio riches désactivés

Légende pour l’ensemble de champs

Cards verticales

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Cards verticales sans images

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Cards horizontales

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Qu’est-ce que le Pass Culture et comment l’obtenir ?

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Détail

Case à cocher seule

Case à cocher avec texte d‘aide

Case à cocher seule, validée

Texte de validation

Case à cocher seule avec erreur

Texte d’erreur obligatoire

Ensemble de cases à cocher

Légende pour l’ensemble de champs

Ensemble de cases à cocher, petite taille

Légende pour l’ensemble de champs

Ensemble de cases à cocher désactivées

Légende pour l’ensemble de champs

Ensemble de cases à cocher en ligne

Légende pour l’ensemble de champs

Ensemble de cases à cocher avec texte d‘aide

Légende pour l’ensemble de champs Texte de description additionnel

Ensemble de cases à cocher avec erreur

Légende pour l’ensemble de champs

Texte d’erreur obligatoire

Ensemble de cases à cocher validées

Légende pour l’ensemble de champs

Texte de validation

Ensemble de cases à cocher avec erreur, en ligne

Légende pour l’ensemble de champs

Texte d’erreur obligatoire

Ensemble de cases à cocher validées, en ligne

Légende pour l’ensemble de champs

Texte de validation

Ensemble de cases à cocher avec texte d‘aide spécifique

Légende pour l’ensemble de champs

Ensemble de cases à cocher avec texte d‘aide spécifique, petite taille

Légende pour l’ensemble de champs

Default input type text

Default input type number

Default input type search

Default input type tel - required field

Texte d’erreur obligatoire

Default input type mail - required field

Texte d’erreur obligatoire

Default input type date - required field

Texte d’erreur obligatoire

Default input type date - avec icone calendrier

Default input type textarea

Type password

Default input with placeholder

Default input with value

Default input disabled

With hint

With icon

Valid with text

Texte de validation

Error with text

Texte d’erreur obligatoire

Multiple input group

Texte d’erreur obligatoire

Texte de validation

Texte d’erreur obligatoire

Texte de validation

Schemes - gestion du dark mode

bouton ouverture thèmes

snippet modal de paramètres d'affichage

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.

Media image edito

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image

Media image edito, petite taille

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image

Media image edito, grande taille

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image

Media video edito, ratio d‘aspect 16/9 par défaut

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 16/9 par défaut, petite taille

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 16/9 par défaut, grande taille

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 4x3

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 4x3, petite taille

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 4x3, grande taille

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 1x1

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 1x1, petite taille

© Légende de la vidéo
Label du bouton de la transcription

Media video edito, ratio d‘aspect 1x1, grande taille

© Légende de la vidéo
Label du bouton de la transcription

Header avec Navigation complète

Header minimal

Header sans navigation

Header sans navigation avec racourcis

Header avec nom de service, lien d’accès

Header avec nom de service, recherche

Header avec opérateur vertical, recherche

Header avec opérateur horizontal, nom de service, lien d’accès, recherche

Fil d’Ariane

Ensemble de champs de saisie

Légende pour l’ensemble de champs

Ensemble de boutons radio

Légende pour l’ensemble de champs

Ensemble de cases à cocher

Légende pour l’ensemble de champs

Ensemble de boutons radio, en ligne

Légende pour l’ensemble de champs

Ensemble de cases à cocher, en ligne

Légende pour l’ensemble de champs

Ensemble de boutons radio avec erreur

Légende pour l’ensemble de champs Texte de description additionnel

Texte d’erreur obligatoire

Ensemble de cases à cocher, avec erreur

Légende pour l’ensemble de champs Texte de description additionnel

Texte d’erreur obligatoire

Ensemble de champs de saisie désactivés

Légende pour l’ensemble de champs Texte de description additionnel

Ensemble de boutons radio désactivés

Légende pour l’ensemble de champs Texte de description additionnel

Ensemble de cases à cocher désactivés

Légende pour l’ensemble de champs Texte de description additionnel

Bouton type submit

Input type submit

Gestionnaire de consentement

À propos des cookies sur nomdusite.fr

Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page Données personnelles et cookies. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.

Panneau de gestion des cookies

Panneau de gestion des cookies

Préférences pour tous les services. Données personnelles et cookies
Cookies obligatoires

Ce site utilise des cookies nécessaires à son bon fonctionnement qui ne peuvent pas être désactivés.

Nom de la finalité

Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.

Nom de la finalité

Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.

Placeholder cookies désactivés standard

**Nom du service** est désactivé

Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.

Placeholder dans un bloc vidéo responsive grande taille

**Nom du service** est désactivé

Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.

© Légende de la vidéo
Label du bouton de la transcription

Toggle simple avec bouton + label à droite

Toggle simple avec bouton + label à droite + texte d’aide

Texte d’aide pour clarifier l’action

Toggle simple avec bouton + label à droite + état

Toggle simple avec bouton + label à droite + état + texte d’aide

Texte d’aide pour clarifier l’action

Toggle simple avec bouton + label à droite + état + séparateur

Toggle simple avec bouton + label à droite + état + séparateur + texte d’aide

Texte d’aide pour clarifier l’action

Toggle simple disabled avec bouton + label à droite

Toggle simple disabled avec bouton + label à droite + état

Groupe de toggles simple avec bouton + label à droite + séparateur

Groupe de toggles simple avec bouton + label à droite + séparateur + texte d’aide

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

Groupe de toggles simple avec bouton + label à droite + état + séparateur

Groupe de toggles simple avec bouton + label à droite + état + séparateur + texte d’aide

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

Toggle simple avec bouton + label à gauche

Toggle simple avec bouton + label à gauche + texte d’aide

Texte d’aide pour clarifier l’action

Toggle simple avec bouton + label à gauche + état

Toggle simple avec bouton + label à gauche + état + texte d’aide

Texte d’aide pour clarifier l’action

Toggle simple avec bouton + label à gauche + état + séparateur

Toggle simple avec bouton + label à gauche + état + séparateur + texte d’aide

Texte d’aide pour clarifier l’action

Toggle simple disabled avec bouton + label à gauche

Toggle simple disabled avec bouton + label à gauche + état

Groupe de toggles simple avec bouton + label à gauche + séparateur

Groupe de toggles simple avec bouton + label à gauche + séparateur + texte d’aide

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

Groupe de toggles simple avec bouton + label à gauche + état + séparateur

Groupe de toggles simple avec bouton + label à gauche + état + séparateur + texte d’aide

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

  • Texte d’aide pour clarifier l’action

Lien seul

Label lien

Lien icon à gauche

Label lien

Lien icon à droite

Label lien

Lien icon seul

Label lien

Lien seul SM

Label lien

Lien seul LG

Label lien

Lien seul button

Lien seul button désactivé

Liens d’évitement

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Liste déroulante par défaut

Liste déroulante désactivée

Liste déroulante avec texte de description

Liste déroulante valide

Texte de validation

Liste déroulante erreur

Texte d’erreur obligatoire

Navigation latérale de base

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Navigation latérale sticky

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Navigation latérale sticky et sur toute la hauteur

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Navigation latérale bordure complète

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Navigation latérale à droite

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Section 7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Mise en avant avec texte seul

Mises en avant

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Mise en avant avec titre et texte

Titre mise en avant

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Mise en avant avec titre, bouton et texte

Titre mise en avant

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Mise en avant avec titre, bouton, icône et texte

Titre mise en avant

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Exergue taille md

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Exergue taille sm

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Exergue taille lg

Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires qui remplissent les conditions.

Modale simple

Titre de la modale

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Modale SM

Titre de la modale

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Modale LG

Titre de la modale

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Modale formulaire

Titre de la modale

Légende pour l’ensemble de champs

Modal avec zone d'action

Titre de la modale

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Modal avec zone d'action ancré en haut

Titre de la modale

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Navigation Principale

Onglets 4 éléments

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 4

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Onglets 2 éléments

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
  • list item

Onglets dans onglets

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
  • list item

Contenu 4

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
  • list item

Accordéon dans onglets

Contenu

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
  • list item
    • list item niveau 2
    • list item niveau 2

Contenu

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Lorem ipsum dolor sit amet, consectetur adipiscing, link test incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

  • list item
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item

Espacements

Margin/padding

Des classes utilitaires sont disponibles pour gérer les marges intérieures et extérieures d'un élément html.
Celles-ci suivent la structure suivante (entre crochets les valeurs, facultatives, possibles):

  • Pour le margin : fr-m[t/r/b/l/x/y]-[n]0[v]
  • pour le padding : fr-p[t/r/b/l/x/y]-0[v]

- Le prefix : 'fr-',
- la lettre 'm' pour margin ou 'p' pour padding,
- l'orientation avec 't', 'r', 'b', 'l' (top, right, bottom, left) ou 'x', 'y' (horizontal, vertical),
- un séparateur : '-',
- le token d'espacement (nb: le signe '-' des nombres négatifs est remplacé par la lettre 'n', et 0 n'a pas d'unité 'v')

Classes d'espacements :
Classe Description Exemple d'espacement Exemple de classe
fr-m- Margin
fr-m-2v
fr-mt- Margin top
fr-mt-2v
fr-mr- Margin right
fr-mr-2v
fr-mb- Margin bottom
fr-mb-2v
fr-ml- Margin left
fr-ml-2v
fr-mx- Margin left & right
fr-mx-2v
fr-my- Margin top & bottom
fr-my-2v
fr-p- Padding
fr-p-2v
fr-pt- Padding top
fr-pt-2v
fr-pr- Padding right
fr-pr-2v
fr-pb- Padding bottom
fr-pb-2v
fr-pl- Padding left
fr-pl-2v
fr-px- Padding left & right
fr-px-2v
fr-py- Padding top & bottom
fr-py-2v
Breakpoints

Il est possible de définir le breakpoint à partir du quel on applique l'espacement.
Il suffit d'ajouter à la classe le breakpoint (md) avant la valeur du token. ex: fr-p-md-4v

Pour adapter les espacements à la taille de l'écran, on peut ainsi combiner les classes en partant du mobile puis en surchargeant en md

exemple avec un bouton plus large en md

Valeurs des tokens d'espacements :
Token rem px Exemple d'espacement Exemple de classe
-8v -2 -32
1 2
fr-ml-n8v
-6v -1.5 -24
1 2
fr-ml-n6v
-4v -1 -16
1 2
fr-ml-n4v
-2v -0.5 -8
1 2
fr-ml-n2v
0v 0 0
1 2
fr-ml-0
2v 0.5 8
1 2
fr-ml-2v
4v 1 16
1 2
fr-ml-4v
6v 1.5 24
1 2
fr-ml-6v
8v 2 32
1 2
fr-ml-8v
10v 2.5 40
1 2
fr-ml-10v
12v 3 48
1 2
fr-ml-12v
14v 3.5 56
1 2
fr-ml-14v
16v 4 64
1 2
fr-ml-16v
18v 4.5 72
1 2
fr-ml-18v
20v 5 80
1 2
fr-ml-20v
22v 5.5 88
1 2
fr-ml-22v
24v 6 96
1 2
fr-ml-24v
26v 6.5 104
1 2
fr-ml-26v
28v 7 112
1 2
fr-ml-28v
30v 7.5 120
1 2
fr-ml-30v
32v 8 128
1 2
fr-ml-32v
auto auto auto
1 2
.fr-ml-auto

élément de navigation icône seule (par défaut)

élément de navigation avec label

élément de navigation avec label à partir du breakpoint LG

pagination première page

pagination deuxième page

pagination dernière page

Pied de page minimal

Pied de page avec navigation

Pied de page avec logo opérateur

Pied de page avec logos partenaires

Sommaire

Contenu 1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.8

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.9

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.10

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.11

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 1.12

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 3.1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 3.2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 4.1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 4.2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 8

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 9

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 10

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 11

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 12

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.1

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.2

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.3

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.4

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.5

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.6

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.7

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.8

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.9

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.10

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.11

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Contenu 13.12

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.

Exemples en cours de développement...

Tableau par défaut

Caption du tableau (accessibilité)
th0 th1 th2 th3 th4 th5
Lorem ip Lorem Lorem ipsum dolor sit amet, consectetur adi Lorem ipsum dolor sit a Lorem ipsum dolor sit amet, consect L
Lorem Lorem ipsum dolor sit amet, consectetur adi Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectet Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipis
Lorem Lorem ipsum d Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipis Lorem ipsum d L

Tableau avec bordure

Caption du tableau (accessibilité)
th0 th1 th2 th3 th4 th5
Lorem Lorem ipsu Lorem ipsum dolor sit amet, c Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor s
Lorem ipsum Lorem ipsum dolor sit Lorem ips Lorem i Lorem ipsum dolor sit amet, consect Lorem ipsum dolor sit amet, c
Lorem ipsum dolor sit amet, consec Lorem ipsum dolor sit amet, conse Lorem ipsum dolor sit amet, consect Lorem ipsum dolor sit amet, consectetur adi Lorem ipsum dolor sit amet, consect Lorem ipsum dolor sit amet, consectetur adipiscin

Tableau non scrollable

Caption tableau non scrollable
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit Lorem ipsum do Lorem ipsum dolor si Lorem ipsum dolor sit amet, consectetu Lorem ipsum dolor sit amet, conse Lorem ipsum dolor sit amet, consectetur adip
Lorem ipsum dolor sit amet, co Lorem ipsum d Lorem ipsum dolor sit amet, consectet Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetu Lorem

Tableau colonnes fixées (layout-fixed)

Caption tableau fixé
th0 th1 th2
Lorem ipsum dolo Lorem ipsum dolor sit amet, consectetur adipisc Lorem ipsum dolor sit amet, consec
Lorem ipsum dolo Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, cons

Tableau caption invisible

Caption cachée
th0 th1 th2 th3 th4 th5
Lorem ipsum dolor sit amet, c Lor Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit a Lorem Lorem ipsum dolor sit ame
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adip Lorem ipsum dolor sit ame Lorem ipsum dolor sit amet, consectetur Lorem i

Tableau caption Bottom

Caption en bas
th0 th1 th2 th3 th4 th5
Lorem ipsum dolo Lore Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipisc Lorem ipsum Lorem ipsum dolor sit amet, c
Lorem Lorem ipsum dolor sit amet, consectetur ad Lorem ipsum dolor sit amet Lorem Lorem ipsum dolor sit amet, conse Lorem ipsum dolor sit amet, c

Tag seul sans icône

Label tag

Tag seul icône à gauche

Label tag

Tag seul icône à droite

Label tag

Tag seul cliquable

Label tag

Tag seul cliquable SM

Label tag

Tag seul non cliquable

Label tag

Tag seul non cliquable SM

Label tag

Tag seul désactivé

Tag seul désactivé SM

Groupe de tags cliquables

Groupe de tags cliquables SM

Groupe de tags non cliquables

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

Groupe de tags non cliquables SM

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

  • Label tag

Tuiles verticales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales, verticales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales, verticales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales, verticales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales, verticales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles horizontales

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales, horizontales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales, horizontales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales, horizontales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Tuiles verticales, horizontales au dessus du breakpoint md

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol

Titre M bold

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dol