Typographie
Les composants de typographie : titres, paragraphes, citations, touches et libellés.
Titres (H1 à H6)
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
Paragraphe
Paragraphe standard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paragraphe avec une className personnalisée
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Citation
Citation simple
Ceci est une citation simple, sans icône.
Citation avec icône
Ceci est une citation avec icône.
Citation avec du HTML
Citation importante avec du HTML.
Citation avec une bordure primaire
Citation avec une bordure primaire.
Citation avec une bordure accent
Citation avec une bordure accent.
Citation à partir d’une chaîne HTML
HTML simple
Citation importante avec du HTML.
HTML complexe
Premier paragraphe avec du texte en gras.
Deuxième paragraphe avec de l’italique et du souligné.
Composant Typography
Typography avec un contenu mixte
Un titre dans Typography
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Une citation dans le composant Typography.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Hiérarchie complète
H1 — Oihana Next UI
H2 — Bibliothèque d’interface sur daisyUI et Tailwind CSS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H3 — Les niveaux de titre
Six niveaux, du titre de page au sous-titre de paragraphe, chacun avec sa graisse et son interligne.
H4 — La hiérarchie
Un niveau sauté se voit : la page perd son plan, et un lecteur au clavier perd ses repères.
H5 — Les réglages
Taille, graisse, interligne et marges verticales, en une seule échelle pour toute la page.
H6 — Le dernier niveau
Plus bas, un paragraphe en gras dit la même chose sans promettre une section.
« Une page bien composée se lit avant d’être regardée. »
Test responsive
Redimensionnez la fenêtre pour voir les tailles s’adapter.
Mobile
Les titres s’adaptent automatiquement à la taille de l’écran.
Ordinateur
Les classes responsive permettent une lecture confortable sur tous les appareils.
Kbd
Une touche du clavier, ou un code court à taper à la main. Le rendu est l’élément HTML <kbd>.
Chaque touche a son propre <kbd>, l’ensemble est enveloppé dans un <kbd> : c’est la manière HTML de dire « ensemble ». Le séparateur est du texte, lu par un lecteur d’écran.
Un lecteur d’écran lit un séparateur texte, mais rien pour une icône : il faut lui adjoindre un texte masqué (sr-only). Un emoji, lui, est lu par son nom Unicode.
Appuyez sur ⌘+K pour ouvrir la recherche, puis sur Esc pour la fermer.
Si l’étiquette est illisible, tapez le code de contrôle 7K affiché dessous.
Libellés
Les trois lignes qui se posent sous un champ : une erreur, une aide, une description.
Textes internationalisés
Basculez la langue globale (menu drapeau de l'interface) : les valeurs ci-dessous changent instantanément, sans navigation.
field="title"
Textes internationalisés
field="count" + args
1–20 sur 137
champ absent → texte de repli
Texte de repli affiché pour cette clé
field="error" (un sous-objet) → texte de repli
« error » est un objet { description } : le texte de repli s’affiche.
useSanitize
Le même HTML, brut puis nettoyé : par défaut toutes les balises tombent ; en mode html, la liste blanche de la configuration (config.html.sanitizeOptions) s’applique. Le code est affiché, jamais rendu.
<script>alert( "xss" )</script><h4>Titre</h4><p>Texte <u>souligné</u>, <code>code</code>, <strong style="color:#c00;position:fixed">rouge</strong> et <a href="ftp://example.com/f">un lien ftp</a>.</p>
TitreTexte souligné, code, rouge et un lien ftp.
<h4>Titre</h4><p>Texte <u>souligné</u>, <code>code</code>, <strong style="color:#c00">rouge</strong> et <a>un lien ftp</a>.</p>