Elements

Headings

Level 1 heading text

Level 2 heading text

Level 3 heading text

Level 4 heading text

Level 5 heading text
Level 6 heading text

Text

Vero delectus quibusdam

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro aliquam vero, quidem error nisi quaerat, nobis rem eius. Quidem id numquam voluptate, vero delectus quibusdam. Necessitatibus quaerat architecto, ullam earum!

Firefox
Un navigateur Web libre, open-source, multi-plateforme dévelopé par la Mozilla Corporation et des centaines de volontaires.
Chrome
Chrome has everything you need to make the most of the web, like quick answers in your address bar, one-click translation, and personalized articles.

Lorem ipsum dolor  sit amet, consectetur adipisicing elit. Porro aliquam vero, quidem error nisi quaerat, nobis rem eius. Quidem id numquam voluptate, vero delectus quibusdam. Necessitatibus quaerat architecto, ullam earum 3599.

Porro aliquam vero

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro aliquam vero, quidem error nisi quaerat, nobis rem eius. Quidem id numquam voluptate, vero delectus quibusdam. Necessitatibus quaerat architecto, ullam earum!

Blockquote consectetur adipisicing elit. Blanditiis ratione neque consectetur ipsa saepe, dolor tenetur non voluptate nostrum sapiente, ipsam quos! Expedita quis vel est at ex dolorum nemo.
  • List item
  • List item
    • List subitem
    • List subitem
    • List subitem
  • List item
  1. List item
  2. List item
    1. List subitem
    2. List subitem
    3. List subitem
  3. List item

Tables

Notes :

Caption
Order referenceDateTotal pricePayment
XKBKNABJK12/02/202061,80 €Payment by check
XKBKNABJK12/02/202061,80 €Payment by check
XKBKNABJK12/02/202061,80 €Payment by check

Form

Notes :

  • Pour chaque champ, toujours fournir un label ou un attribut aria-label.
  • Ajouter un id à un message accompagnant un champ qui, lui, sera pourvu d'un aria-describedby en référence à ce même id.
  • Pour les champs numériques, si la valeur n'est pas incrémentable (comme un code postal), préférer <input type="text" inputmode="numeric" pattern="[0-9]*">.

Text

Help text.
There's an error.

Date

Help text.
There's an error.

Search

File

Help text.
There's an error.

Textarea

Help text.
There's an error.

Select

Help text.
There's an error.

Radio & Checkbox

Checkboxes
Radios
Switches
Switches
Inline
Inline / Error message
There's an error.

Prepend / Append

Prefix
Suffix
Prefix Suffix
Prefix
Suffix
Prefix Suffix
Prefix
Suffix
Prefix Suffix
Help text.
Prefix
There's an error.
Prefix

With actions

Help text.
There's an error.

With icons

Form

Gender
Your password must be at least 8 characters long and contain at least one number, one lowercase letter and one uppercase letter.