Eyebrow
Donaudampfschiffahrtsgesellschaftskapitaenswitwe
Plusieurs phrases d'affilée, pour voir comment le composant se comporte quand le contenu déborde de la ligne unique qu'il supposait. Une deuxième phrase enfonce le clou.
Break
Chaque primitive sous chaque scénario atteignable. Tabulez à travers la page pour vérifier le focus clavier et survolez pour le hover.
Button
Longueur : vide / un mot / typique / plusieurs phrases
Chaîne insécable dans 320px
Chaque accent, variant primaire
Variants et tailles
Disabled, les trois variants
Avec icône Phosphor, chaque variant et taille
Écrasé par un sibling flex
sibling flex-1
Badge
Longueur : un mot / typique / insécable, dans 320px
AEn coursDonaudampfschiffahrtsgesellschaftskapitaenswitwe
Chaque accent
periwinkleDeepmintambergraphiteobsidian
Chiffres, alignement tabulaire
111111000000
Link
Inline dans un paragraphe qui passe à la ligne
Un lien inline au milieu du texte, puis un second lien beaucoup plus long pour forcer le passage à la ligne et la suite.
Standalone, externe, et URL insécable
BentoCard
Titre insécable et corps long, dans 320px
Sans eyebrow, sans corps
Titre seul
Chaque accent, conteneur large
Accent
periwinkleDeep
Plusieurs phrases d'affilée, pour voir comment le composant se comporte quand le contenu déborde de la ligne unique qu'il supposait. Une deuxième phrase enfonce le clou.
Accent
mint
Plusieurs phrases d'affilée, pour voir comment le composant se comporte quand le contenu déborde de la ligne unique qu'il supposait. Une deuxième phrase enfonce le clou.
Accent
amber
Plusieurs phrases d'affilée, pour voir comment le composant se comporte quand le contenu déborde de la ligne unique qu'il supposait. Une deuxième phrase enfonce le clou.
Accent
graphite
Plusieurs phrases d'affilée, pour voir comment le composant se comporte quand le contenu déborde de la ligne unique qu'il supposait. Une deuxième phrase enfonce le clou.
Accent
obsidian
Plusieurs phrases d'affilée, pour voir comment le composant se comporte quand le contenu déborde de la ligne unique qu'il supposait. Une deuxième phrase enfonce le clou.
BentoCardLink (interactive)
Chaque accent, survolez et tabulez pour comparer
Lien
periwinkleDeep
Au survol, le fond passe à la teinte hover du même accent.
Lien
mint
Au survol, le fond passe à la teinte hover du même accent.
Lien
amber
Au survol, le fond passe à la teinte hover du même accent.
Lien
graphite
Au survol, le fond passe à la teinte hover du même accent.
Lien
obsidian
Au survol, le fond passe à la teinte hover du même accent.
Interactive contre statique, même accent
Interactive
Réagit
Fond, focus clavier.
Statique
Ne réagit pas
Aucun survol, aucun focus, pas de curseur pointer.
Container
width page, zéro enfant
width prose, un enfant
Enfant unique
Le conteneur ne pose aucun fond, la carte se pose sur le canvas.
width page, plusieurs enfants