Typography

.add-drop-cap p

Lorem ipsum dolor sit amet, consetetur sadipscing elitr ins, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Stet clita kasd gubergren, ~~no sea takimata sanctus~~ s est Lorem ipsum ~~dolor sit amet~~ del.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren strong, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur small sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.links a

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren em, no sea takimata sanctus est. Lorem ipsum dolor sit amet mark, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.blockquote blockquote

Nunc lacinia libero eu rhoncus ultricies. Nulla condimentum nunc eget metus imperdiet convallis. Cras et efficitur ex, sed dictum nisl. Pellentesque mattis enim in metus tincidunt suscipit. Integer pharetra feugiat auctor.
Phasellus id massa ut diam lacinia condimentum sit amet at sem. Vestibulum molestie est sed elementum tincidunt. Curabitur id magna enim. Phasellus aliquam sapien in leo vulputate, ut gravida diam fermentum.

.blockquote blockquote footer

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.
Information produced by Name

sup sub

E=mc² ; a + b₂.

.protected

Nunc lacinia libero eu rhoncus ultricies. Nulla condimentum nunc eget metus imperdiet convallis. Cras et efficitur ex, sed dictum nisl. Pellentesque mattis enim in metus tincidunt suscipit. Integer pharetra feugiat auctor. Phasellus id massa ut diam lacinia condimentum sit amet at sem. Vestibulum molestie est sed elementum tincidunt. Curabitur id magna enim. Phasellus aliquam sapien in leo vulputate, ut gravida diam fermentum.

h1 .h1

Scriptura heading. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

h2 .h2

Scriptura heading. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

h3 .h3

Scriptura heading. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

h4 .h4

Scriptura heading. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

h5 .h5

Scriptura heading. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

h6 .h6

Scriptura heading. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

hr

hr(data-hr='✻ ✻ ✻')

hr(data-hr='✢ ✢ ✢')

hr(data-hr='★ ★ ★')

Rendering test for a print

.cmd-print

Pour un test plus proche d'un site en production nous vous invitons à tester l'impression à partir de notre aticle de démonstration.

Languages

See page

[lang=grc]

1 Ἰησοῦς δὲ ἐπορεύθη εἰς τὸ ὄρος τῶν ἐλαιῶν. 2 Ὄρθρου δὲ πάλιν παρεγένετο εἰς τὸ ἱερὸν καὶ πᾶς ὁ λαὸς ἤρχετο πρὸς αὐτόν, καὶ καθίσας ἐδίδασκεν αὐτούς. 3 Ἄγουσιν δὲ οἱ γραμματεῖς καὶ οἱ Φαρισαῖοι γυναῖκα ἐπὶ μοιχείᾳ κατειλημμένην καὶ στήσαντες αὐτὴν ἐν μέσῳ 4 λέγουσιν αὐτῷ· διδάσκαλε, αὕτη ἡ γυνὴ κατείληπται ἐπ᾽ αὐτοφώρῳ μοιχευομένη· 5 ἐν δὲ τῷ νόμῳ ἡμῖν Μωϋσῆς ἐνετείλατο τὰς τοιαύτας λιθάζειν. σὺ οὖν τί λέγεις ; 6 τοῦτο δὲ ἔλεγον πειράζοντες αὐτόν, ἵνα ἔχωσιν κατηγορεῖν αὐτοῦ. ὁ δὲ Ἰησοῦς κάτω κύψας τῷ δακτύλῳ κατέγραφεν εἰς τὴν γῆν.

1 Et Jésus alla vers le Mont des Oliviers. 2 Et à l'aurore, de nouveau, il se présenta vers le Temple, et tout le peuple venait auprès de lui, et s'asseyant il les enseignait. 3 Et les scribes et les Pharisiens amènent une femme saisie sur adultère, et l'ayant dressée au milieu 4 ils lui disent : Maître, cette femme a été saisie en flagrant délit, s'adultérant ; 5 dans la loi Moïse nous a commandé de lapider de telles (femmes). Toi donc, que dis-tu ? 6 Et cela ils (le) disaient en l'éprouvant, afin qu'ils aient à l'accuser. Mais Jésus s'étant baissé en bas, du doigt, écrivait sur la terre.

[lang=he]

1 בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ׃ 2 וְהָאָ֗רֶץ הָיְתָ֥ה תֹ֨הוּ֙ וָבֹ֔הוּ וְחֹ֖שֶׁךְ עַל־פְּנֵ֣י תְהֹ֑ום וְר֣וּחַ אֱלֹהִ֔ים מְרַחֶ֖פֶת עַל־פְּנֵ֥י הַמָּֽיִם 3 וַיֹּ֥אמֶר אֱלֹהִ֖ים יְהִ֣י אֹ֑ור וַֽיְהִי־אֹֽור׃ 4 וַיַּ֧רְא אֱלֹהִ֛ים אֶת־הָאֹ֖ור כִּי־טֹ֑וב וַיַּבְדֵּ֣ל אֱלֹהִ֔ים בֵּ֥ין הָאֹ֖ור וּבֵ֥ין הַחֹֽשֶׁךְ 5 וַיִּקְרָ֨א אֱלֹהִ֤ים׀ לָאֹור֙ יֹ֔ום וְלַחֹ֖שֶׁךְ קָ֣רָא לָ֑יְלָה וַֽיְהִי־עֶ֥רֶב וַֽיְהִי־בֹ֖קֶר יֹ֥ום אֶחָֽד׃ פ

1 Au commencement, Dieu créa le ciel et la terre. 2 Or la terre était vide et vague, les ténèbres couvraient l'abîme, un vent de Dieu tournoyait sur les eaux. 3 Dieu dit : "Que la lumière soit" et la lumière fut. 4 Dieu vit que la lumière était bonne, et Dieu sépara la lumière et les ténèbres. 5 Dieu appela la lumière "jour" et les ténèbres "nuit." Il y eut un soir et il y eut un matin : premier jour.

Afin d'harmoniser les caractères Unicode il est bon de parser les chaines avec une fonction de normalisation NFC. En JavaScript : string.normalize('NFC'). Cf. mdn web docs.

Icons

See page

Util sprites

address-cardampersandarrow-downarrow-leftarrow-rightarrow-right2arrow-upasteriskasterisk2asterismasterism2atbadgebars-progressbinbirthday-cakebookborder-nonebubblesbubbles2calendarcheckcheckmarkchevron-rightcodecogwheelcogwheel2cogwheel3compact-disccompass-draftingcompresscookie-bitecookiecopycopy2cropcrossdownload2ellipsis-verticalellipsisexpandexternal-linkeye-blockedeyeflakeflamefolder-closedframegithubgopuramgriphammerheart-hollowhearthomehour-glassindentinfokeykeyboardlanguagelinklist-ullocationlockedloginlogoutmanmap-location-dotmark-hollowmarkmarsmaximizemessageminimizeminusmoonmusic-noteold-keypaint-rollerpalettepaper-planepaperclippen-clippencilphonepicturepiepluspower-offpowerprint-slashprintpuzzlequillquotes-leftquotes-rightribbonrocketsearchselect-columnsharesharpskull-crossbonesskullslidersspace-invaderspinnersquare-caret-downsquare-checkstarsuitcasesuntable-cellstable-columnstable-listtabletagtagsthumbtacktrowel-bricksumbrellaunlockeduploadupload2user-secretuser-tieuserusersvenusvideo-playvideo-play2warningwomenxmarkyoutube

Player sprites

fast-forwardfast-rewindfavorite-borderfavoriteforward-10forward-30forward-5fullscreenget-appmenumove-downmove-uppausepicture-in-picture-altpicture-in-pictureplay-disabledplayplaylist-playreplayrewind-10rewind-30rewind-5skip-nextskip-prevslow-motionstopsubtitles-offsubtitlesvolume-offvolume-up

Icones disponibles à partir de fichiers composés de sprites SVG. Ceux-ci sont compilés à partir de SVGs situés dans un même dossier (ils peuvent être recompilés si besoin de personnalisation). Optimisation avec SVGO. Voir la configuation du package.json.

Lists

See page

ul

Artichauts
Carottes
Concombres
Poireaux
Choux
- Composition
- Saveur
- Taille
- Couleurs
  - Cyan
  - Magenta
  - Jaune
  - Noir

ol

Artichauts
Carottes
Concombres
Poireaux
Choux
1. Composition
2. Saveur
3. Taille
4. Couleurs
  1. Cyan
  2. Magenta
  3. Jaune
  4. Noir

Basic list

A paragraph...

Artichauts
Carottes
Concombres
Poireaux
Choux
- Composition
- Saveur
- Taille
- Couleurs
  - Cyan
  - Magenta
  - Jaune
  - Noir

ul(style='--list-start:1.3em')

A paragraph...

Artichauts
Carottes
Concombres
Poireaux
Choux
- Composition
- Saveur
- Taille
- Couleurs
  - Cyan
  - Magenta
  - Jaune
  - Noir

ol.list-gap

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
List item 9
List item 10

ol.list-gap(start='0')

li.chorus List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
List item 9
List item 10

ul.list-stripe

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7

ul.list-stripe

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7

ul.list-stripe li a

ul.list-stripe-links

ul.list-straight

ul.list-rounded

ol.list-straight

ol.list-rounded

Details/Summary

See page

details

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.

Item 2

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Item 3

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

details(open='open') details(open='open') details

Item 1

Item 1.1

Item 1.1.1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.

Item 1.1.2

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Item 1.1.3

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

Item 1.2

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Item 1.3

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

Item 2

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Item 3

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

details

Une balise html de paragraphe pour le contexte. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.

Item 2

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Item 3

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

Une balise html de paragraphe pour le contexte. Mauris nec dolor tincidunt, mattis elit in, condimentum sem. Mauris augue metus, fringilla non viverra ut, lacinia quis mauris.

Tabs

See page

.tabs

Apricot. A tab with a very long label for tests

Curabitur egestas vestibulum neque, sit amet tristique mauris consectetur eget. Aliquam venenatis purus mauris, et suscipit libero aliquam vitae. Quisque eu tincidunt leo. Maecenas a quam neque. Duis non tellus est. Proin mattis, tortor nec finibus finibus, nunc odio viverra lorem, nec sagittis elit sapien nec libero. Duis vel porttitor diam. In rutrum euismod nisl id varius. Etiam ac volutpat odio. Suspendisse mattis facilisis leo. Fusce laoreet libero sit amet pellentesque elementum. Integer pulvinar maximus ligula in feugiat. Aliquam rutrum, felis et placerat bibendum, lacus nisi dapibus urna, ac accumsan nisl enim pellentesque nunc.

Watermelon

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Prickly pear

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

.tabs

Cherry

Title for Cherry

Mauris sit amet ultricies sapien. Pellentesque mauris ex, pulvinar et vehicula nec, vehicula in turpis. Sed interdum rutrum nibh, vitae tempus felis scelerisque sed. Aenean aliquam sagittis sem, et dapibus augue bibendum at. Maecenas venenatis nec enim nec varius. In hac habitasse platea dictumst. Mauris maximus dui ut ex commodo, vel ultricies lacus accumsan. Sed nisi ipsum, vestibulum ut eleifend vitae, fermentum vitae quam.

Banana

Title for Banana

Dragonfruit

Mauris sit amet ultricies sapien. Pellentesque mauris ex, pulvinar et vehicula nec, vehicula in turpis. Sed interdum rutrum nibh, vitae tempus felis scelerisque sed. Aenean aliquam sagittis sem, et dapibus augue bibendum at. Maecenas venenatis nec enim nec varius. In hac habitasse platea dictumst. Mauris maximus dui ut ex commodo, vel ultricies lacus accumsan. Sed nisi ipsum, vestibulum ut eleifend vitae, fermentum vitae quam.

Banana

Vivamus tempus tincidunt rhoncus. Phasellus eget ullamcorper ex, ut venenatis justo. Duis sit amet lacus sit amet ex efficitur venenatis. Nulla ligula leo, dapibus nec erat in, dictum viverra felis. Nam eu ante quis tellus euismod bibendum. Pellentesque nec est suscipit, vulputate turpis suscipit, posuere elit. Donec ut aliquam odio. Nunc hendrerit ipsum justo, pharetra pharetra dolor cursus hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent in ullamcorper leo.

Lemon

Integer at nunc quis justo elementum euismod. Suspendisse id interdum diam, a fermentum risus. In hac habitasse platea dictumst. Suspendisse facilisis gravida sem, et vulputate sem tincidunt vel. Sed hendrerit, est et varius posuere, tortor nunc rhoncus risus, at posuere ipsum sapien in ante. Ut sed nibh vel felis commodo molestie et quis dui. Maecenas hendrerit mauris id quam pellentesque venenatis eu ut ex. Pellentesque vitae ipsum volutpat, eleifend enim sit amet, mattis dolor. Praesent ac dui ut felis egestas tristique in vel quam.

Vivamus tempus tincidunt rhoncus. Phasellus eget ullamcorper ex, ut venenatis justo. Duis sit amet lacus sit amet ex efficitur venenatis. Nulla ligula leo, dapibus nec erat in, dictum viverra felis. Nam eu ante quis tellus euismod bibendum. Pellentesque nec est suscipit, vulputate turpis suscipit, posuere elit. Donec ut aliquam odio. Nunc hendrerit ipsum justo, pharetra pharetra dolor cursus hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent in ullamcorper leo.

Apple

Title for Apple

Integer at nunc quis justo elementum euismod. Suspendisse id interdum diam, a fermentum risus. In hac habitasse platea dictumst. Suspendisse facilisis gravida sem, et vulputate sem tincidunt vel. Sed hendrerit, est et varius posuere, tortor nunc rhoncus risus, at posuere ipsum sapien in ante. Ut sed nibh vel felis commodo molestie et quis dui. Maecenas hendrerit mauris id quam pellentesque venenatis eu ut ex. Pellentesque vitae ipsum volutpat, eleifend enim sit amet, mattis dolor. Praesent ac dui ut felis egestas tristique in vel quam.

.tabs > .tabs

Orange

Dragonfruit

Mauris sit amet ultricies sapien. Pellentesque mauris ex, pulvinar et vehicula nec, vehicula in turpis. Sed interdum rutrum nibh, vitae tempus felis scelerisque sed. Aenean aliquam sagittis sem, et dapibus augue bibendum at. Maecenas venenatis nec enim nec varius. In hac habitasse platea dictumst. Mauris maximus dui ut ex commodo, vel ultricies lacus accumsan. Sed nisi ipsum, vestibulum ut eleifend vitae, fermentum vitae quam.

Banana

Vivamus tempus tincidunt rhoncus. Phasellus eget ullamcorper ex, ut venenatis justo. Duis sit amet lacus sit amet ex efficitur venenatis. Nulla ligula leo, dapibus nec erat in, dictum viverra felis. Nam eu ante quis tellus euismod bibendum. Pellentesque nec est suscipit, vulputate turpis suscipit, posuere elit. Donec ut aliquam odio. Nunc hendrerit ipsum justo, pharetra pharetra dolor cursus hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent in ullamcorper leo.

Lemon

Integer at nunc quis justo elementum euismod. Suspendisse id interdum diam, a fermentum risus. In hac habitasse platea dictumst. Suspendisse facilisis gravida sem, et vulputate sem tincidunt vel. Sed hendrerit, est et varius posuere, tortor nunc rhoncus risus, at posuere ipsum sapien in ante. Ut sed nibh vel felis commodo molestie et quis dui. Maecenas hendrerit mauris id quam pellentesque venenatis eu ut ex. Pellentesque vitae ipsum volutpat, eleifend enim sit amet, mattis dolor. Praesent ac dui ut felis egestas tristique in vel quam.

Cras dignissim pharetra lorem. Cras ullamcorper rutrum lorem ac porta. Cras urna lorem, vestibulum eget lacinia eget, elementum et neque. Integer tempus eros non turpis vestibulum elementum. Fusce non urna ipsum. Suspendisse pretium lobortis elit, eu pellentesque tellus. Pellentesque nec pretium nulla, quis sollicitudin libero. Morbi finibus enim leo, fringilla mollis ligula consequat sit amet.

Coconut

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Lychee

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

.tabs > .tabs

Quince

Tangerine

Nulla fermentum tempus massa vel facilisis. Cras nec nisi mattis, vestibulum orci quis, mattis sem. Sed posuere orci at metus eleifend, sed mollis magna convallis. Aenean blandit est nec sodales vulputate. Nullam massa ex, luctus sed orci convallis, rhoncus venenatis felis. Sed eget nunc eget velit facilisis lacinia. Nunc arcu elit, facilisis eget nisi sed, maximus consequat odio. Suspendisse sit amet dictum ex. Nunc eu suscipit felis.

Pineapple

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Blackcurrant

In eleifend placerat mi. Suspendisse semper suscipit tortor sed efficitur. Aliquam nulla sem, volutpat luctus mauris elementum, lobortis ultricies dui. Nam sit amet nisi eu nibh gravida elementum at quis nibh. Nam pretium elit ut vulputate cursus.

Watermelon

Blackberry

Duis vitae pellentesque leo, ut semper lorem. Nulla massa lorem, venenatis pretium venenatis vitae, dignissim eu orci. Morbi rutrum arcu ac tellus bibendum, sed placerat ipsum vehicula. Phasellus rhoncus luctus nulla, sed venenatis nisl accumsan vel. Curabitur in sapien lectus. Duis dictum massa ac mauris rhoncus rutrum.

Kiwi

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Strawberry

Donec a ex sagittis, ultricies dui feugiat, posuere nunc. Morbi tempus dolor turpis, eu ullamcorper nunc pharetra at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed volutpat magna sed varius tincidunt. Nunc metus nisl, mollis non nibh vel, imperdiet tristique nibh.

Pomegranate

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin eget magna metus. Etiam et feugiat lectus. Proin augue quam, fringilla vitae urna venenatis, placerat vulputate leo. Aenean vel justo lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus dignissim quam tempus nisi auctor ultrices. Morbi bibendum, nunc et semper dictum, lorem quam laoreet neque, vitae maximus metus eros pretium orci. Suspendisse potenti. Donec efficitur nisi sit amet magna pulvinar mollis. Etiam vulputate odio eget mattis finibus. Nunc ac auctor leo, sed dignissim eros.

Cras dignissim pharetra lorem. Cras ullamcorper rutrum lorem ac porta. Cras urna lorem, vestibulum eget lacinia eget, elementum et neque. Integer tempus eros non turpis vestibulum elementum. Fusce non urna ipsum. Suspendisse pretium lobortis elit, eu pellentesque tellus. Pellentesque nec pretium nulla, quis sollicitudin libero. Morbi finibus enim leo, fringilla mollis ligula consequat sit amet.

Accordions

See page

.accordion

Cherry

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.

Banana

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Gooseberry

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

(data-singletab='true')

Apricot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.

Pear

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Peach

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

details(open='open')

Redcurrant

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pretium, leo sed malesuada tempor, leo ipsum fermentum magna, et sodales nibh dolor sed lacus. Phasellus condimentum lectus sit amet urna gravida molestie. Ut varius in ex in aliquet. Ut scelerisque elementum scelerisque. Vivamus ipsum nunc, lobortis eget diam nec, pellentesque mattis neque. Mauris eu laoreet sapien. Pellentesque vel viverra orci. Donec ac aliquet quam, ut imperdiet tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque justo augue, lacinia vitae egestas sit amet, rhoncus a ipsum. Quisque id est eu ipsum rutrum lacinia et nec elit. Nulla facilisi. Fusce tellus diam, interdum sed tincidunt ac, feugiat a diam. Cras nec diam quis felis fermentum aliquam vitae congue ante. Aenean laoreet nibh id sodales blandit. Etiam a erat molestie, malesuada purus ut, dictum neque.

Watermelon

Tangerine

Nulla fermentum tempus massa vel facilisis. Cras nec nisi mattis, vestibulum orci quis, mattis sem. Sed posuere orci at metus eleifend, sed mollis magna convallis. Aenean blandit est nec sodales vulputate. Nullam massa ex, luctus sed orci convallis, rhoncus venenatis felis. Sed eget nunc eget velit facilisis lacinia. Nunc arcu elit, facilisis eget nisi sed, maximus consequat odio. Suspendisse sit amet dictum ex. Nunc eu suscipit felis.

Pineapple

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Raspberry

Tangerine

Nulla fermentum tempus massa vel facilisis. Cras nec nisi mattis, vestibulum orci quis, mattis sem. Sed posuere orci at metus eleifend, sed mollis magna convallis. Aenean blandit est nec sodales vulputate. Nullam massa ex, luctus sed orci convallis, rhoncus venenatis felis. Sed eget nunc eget velit facilisis lacinia. Nunc arcu elit, facilisis eget nisi sed, maximus consequat odio. Suspendisse sit amet dictum ex. Nunc eu suscipit felis.

Pineapple

Sed malesuada condimentum dui, vitae commodo nibh consequat sit amet. Nulla semper id nisi a aliquam. Maecenas quis magna nec lectus finibus interdum ut sed leo. Donec mollis diam id ante pharetra, at aliquam neque feugiat. Quisque id vulputate odio, quis ultricies odio. Nulla facilisi. Pellentesque ut aliquet enim. Fusce congue felis sit amet nulla bibendum condimentum. Proin lacinia ex non sem vulputate, quis laoreet dolor vestibulum. In ut molestie sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eget orci ultricies, scelerisque sem vitae, bibendum augue.

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Curabitur at tempor massa, ac finibus mi. Suspendisse nibh neque, porta et placerat vel, gravida at magna. Aenean augue dui, tincidunt nec ligula ut, laoreet tempor elit. Nullam vel sagittis eros, vel mattis ex.

Suspendisse fermentum luctus odio. Curabitur fringilla pulvinar interdum. Morbi porta orci neque, at commodo nulla tincidunt sed. Nulla finibus libero erat, eu auctor felis condimentum ac. Duis aliquet arcu sed luctus molestie. Pellentesque eros ipsum, ullamcorper ac turpis non, dictum hendrerit nulla. Integer mattis feugiat mauris a tincidunt. Duis fermentum faucibus nisl.

L'accordéon est basé sur les éléments html details/summary. Le javascript transforme cette base pour permettre les animations et un meilleur contrôle, il ajoute aussi des attributs aria pour l'accessibilité. L'accordéon reste accessible au clavier comme pour le html de base.

Par défaut, l'accordéon suit le comportement de details/summary avec des onglets indépendant les uns des autres. L'ajout sur l'accordéon d'une option singletab limitera l'ouverture à un seul onglet à la fois.

De même, l'attribut natif open sur l'élément details est pris en compte.

Notez que l'apparence de l'accordéon ne changera pas si javascript est désactivé. Seul les animations et l'option singletab auront disparus.

Les états des onglets sont sauvegardés en localStorage : au rechargement de la page les panneaux seront retrouvés ouverts ou fermés tel qu'ils ont été laissés.

Message Boxes

See page

.message

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

.message .icon

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

.message-info

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

.message-success

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

.message-error

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

.message-warning

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

.message-highlight

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

(style='--bg-color:tomato')

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

(style='--color:#aaa')

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Link test.

Code Blocks

See page

pre.pre > code

   OxxO
  X oo X
  X >< X
   XXXX~<>
 (..)(..)

code(data-select='Sélectionner et copier')

   OxxO
  X oo X
  X >< X
   XXXX~<>
 (..)(..)

code(data-select)

echo 'Single line content';

code:empty

code(data-code='HTML')

<!DOCTYPE html>
<html lang="fr" class="no-js">
  <head>
    <meta charset="utf-8">
    <title>a title</title>
    <!-- a comment... -->
  </head>
  <body>
    <header></header>
    <main>
      <article>a content</article>
    </main>
    <aside></aside>
    <footer></footer>
  </body>
</html>

/* a comment... */

:root {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  color: #e9dac5;
  background-color: #393939;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.5;
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

// a comment...
const startPage = (() => {
  const html = document.documentElement,
        c = 'start-map'
  html.classList.add(c)
  window.addEventListener('load', function() {
    setTimeout(() => {
      html.classList.remove(c)
    }, 1500)
  })
})()

// a comment...
.accordion
  display: flex
  flex-direction: column
  gap: .5em 0
  & > * > :first-child
    box-sizing: border-box
    display: flex
    align-items: center
    width: 100%

// a comment...

extends patternLayout

block variables
  - const documentType = 'articles'

block main
  h1.main-heading!= data._name
  .column4.gap
    each e in data
      article.card
        h2.h2!= e._name
        a(href='/article/' + e._id)
          svg
            use(href='/sprites/util.svg#test')
        p!= e._description

La coloration syntaxique du code s'appuie sur la bilbiothèque Prism.js.

Tables

See page

table.table

User	First Name	Last Name	Email
1	Vincent	de Paul	vincentdepaul@gmail.com
2	Frédéric	Ozanam	fredericOzanam@gmail.com
3	Martin	de Porrès	martin.o.p.@gmail.com
4	Paul		paulDeTarse@gmail.com
5	Philippe	Smaldone	philippe.smaldone@gmail.com
6	Anjezë Gonxhe Bojaxhiu		mere-teresa@gmail.com
7	Karol Józef	Wojtyła	Jean-PaulII@gmail.com
	Foot	Foot	Foot

table.table

First Name	Last Name	Email
Vincent	de Paul	vincentdepaul@gmail.com
Frédéric	Ozanam	fredericOzanam@gmail.com
Martin	de Porrès	martin.o.p.@gmail.com
Paul		paulDeTarse@gmail.com
Philippe	Smaldone	philippe.smaldone@gmail.com
Anjezë Gonxhe Bojaxhiu		mere-teresa@gmail.com
Karol Józef	Wojtyła	Jean-PaulII@gmail.com
Foot	Foot	Foot

table.table-responsive

First Name	Last Name	Email
Vincent	de Paul	vincentdepaul@gmail.com
Frédéric	Ozanam	fredericOzanam@gmail.com
Martin	de Porrès	martin.o.p.@gmail.com
Paul		paulDeTarse@gmail.com
Philippe	Smaldone	philippe.smaldone@gmail.com
Anjezë Gonxhe Bojaxhiu		mere-teresa@gmail.com
Karol Józef	Wojtyła	Jean-PaulII@gmail.com
Foot	Foot	Foot

Images

See page

.figure-image-focus

Phare de Newport, États-Unis — Yaquina Head, Newport, États-Unis.
Crédit : Clay Banks

Détails de l'intérieur de la Capilla Real, Cathédrale de Cordoue, Espagne.
Crédit : Girl With Red Hat (Pseudo)

Coucher de soleil sur un champ, Los Angeles, États-Unis.
Crédit : Sapan Patel

Bellagio, Province de Côme, Italie.
Crédit : Julia Solonina

.figure-image-focus-thumbnail-alignleft Est optio ducimus aut nesciunt enim quo nisi velit. Recusandae asperiores non esse numquam ab quisquam illum est voluptates provident ex vero libero? Aut ducimus magnam hic eveniet voluptas ea officia doloribus quo sapiente labore est perferendis animi sed officia voluptate rem expedita laborum. Hic accusamus facilis At quod ducimus et consequuntur deleniti. Ut vero quibusdam ut reprehenderit atque cum perferendis blanditiis. Aut sunt sunt eum explicabo nulla eum voluptate harum aut reiciendis dolore sunt provident ab dolorum deserunt. Nulla sint et voluptas consequatur aut blanditiis eveniet ea quia sunt id odit quasi. Et suscipit omnis non quam adipisci aut iusto dolore aut provident repellat.

Phasellus id massa ut diam lacinia condimentum sit amet at sem. Vestibulum molestie est sed elementum tincidunt. Curabitur id magna enim. Phasellus aliquam sapien in leo vulputate, ut gravida diam fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt dignissim tellus, et ultricies elit aliquam vitae. Quisque at gravida neque. Nam eu metus vestibulum, pulvinar neque in, aliquam neque.

Sit dignissimos omnis et cupiditate corporis hic voluptatem reiciendis et unde animi. pariatur enim id itaque enim et expedita maiores! Sit eveniet ratione est voluptatem excepturi aut assumenda repudiandae hic libero sequi sit explicabo aperiam. Vel facere cumque in omnis numquam eum cupiditate quod aut ipsum maxime et fuga dignissimos ab reprehenderit fuga. Proin dignissim nibh eu quam sodales, quis volutpat est porttitor. Aliquam ante nulla, cursus nec libero at, iaculis fermentum urna. Ut at varius arcu, in eleifend eros. Fusce sed quam at purus dapibus finibus. In hac habitasse platea dictumst.

Lac de Bled, Slovénie.
Crédit : Artem Sapegin

.figure-image-focus-thumbnail-alignright Eum mollitia accusantium. quam distinctio non consequatur quia ut perspiciatis inventore. Ea consequatur similique non repellendus nulla qui magni eius non perspiciatis sunt non aperiam repudiandae in laudantium consequatur. Sit dignissimos omnis et cupiditate corporis hic voluptatem reiciendis et unde animi. pariatur enim id itaque enim et expedita maiores! Sit eveniet ratione est voluptatem excepturi aut assumenda repudiandae hic libero sequi sit explicabo aperiam. Vel facere cumque in omnis numquam eum cupiditate quod aut ipsum maxime et fuga dignissimos ab reprehenderit fuga.

Ab dolorem iste et corrupti commodi qui officia repellendus. Nam velit obcaecati et itaque totam hic consequatur galisum. Ad omnis deleniti sit debitis consequatur qui temporibus tenetur aut repudiandae suscipit. accusamus sequi est recusandae voluptatibus. Ex aspernatur doloribus et dolorem soluta ea nulla repudiandae ea excepturi aspernatur ut tempora ut sunt soluta in internos molestiae.

Cras quis dapibus metus. Pellentesque ligula ex, viverra id tempus sit amet, placerat sodales nisi. Morbi feugiat consectetur nunc quis pretium. Fusce sed quam at purus dapibus finibus. In hac habitasse platea dictumst. Suspendisse dui mauris, tempor sed est quis, eleifend maximus quam. In viverra porta augue, eu auctor ligula vulputate non. Morbi non facilisis tellus. Integer sollicitudin id mauris vel convallis. Etiam rutrum sollicitudin imperdiet.

.mosaic

Forêt dans la brume, hautes montagnes d'Adjarie, Géorgie

Phare de Talacre, Point of Ayr, Pays de Galles, Royaume-Uni

Sefer Torah, Bibliothèque du Congrès, Washington, États-Unis

Silp Pa Phra Nakhon Si Ayutthaya, Thaïlande

« Il n'est pas ici, Il est ressuscité », Nazareth, Israël

Phare de Neist Point, Glendale, Royaume-Uni

Rive du lac Michigan vue du ciel, Traverse City, USA

La grande muraille, province de Hebei, Chine

Phare un jour brumeux, Cap Spear St. John's, Terre-Neuve

Une touche de violet dans les montagnes suisses

Une rue médiévale de la ville d'Assise, Ombrie, Italie

Media players

See page

audio.media

Adieu mon père

La tempête

Les souterrains (Electro City Gold), v1

Le Grand Héritage (electro war), v1

Interlude, lever de soleil, v1

.media-relationship(data-next-reading='true')

Le Feu de Saint-Elme

Le rêve d'Esteban

Le Serpent à plumes

Le vol du Condor

Réminiscences

Par défaut un seul lecteur peut être actif sur la page. En cas de nouveau player, le précédent passera sur pause, à part ce principe de base, les lecteurs sont indépendants entre eux.

Un élément parent bénéficiant de la classe .media-relationship rend ses médias enfants solidaires entre eux, sans pour autant qu'ils soient obligés d'être des élements frères.

data-next-reading=false ajoutera une option "lecture à la suite" dans le menu du player, data-next-reading=true activera cette même option par défaut.

Crédit pour les musiques : Les Mystérieuses Cités d'Or, interprétées par Yannick Rault (lien).

(src='urlError')

Stridulation d'un grillon

Erreur d'URL n°1

Erreur d'URL n°2

Petites n'abeilles...

Il s'agit ici de tester la fonction "lecture suivante" dans le cas où une erreurs de lecture s'est produite (ici les ressources des players n°2 et n°3 sont volontairement en erreur 404). La lecture passera du lecteur n°1 au lecteur n°4 sans bug.

[streaming] (test)

Vertige Radio

France Inter

France Info

France Culture

France Musique

video.media

Certains des lecteurs présents bénéficient de sous-titres, activés ou non par défaut selon les spécifications natives du code HTML5.

Crédit pour les vidéos : Blender Studio.

.video-youtube

(data-id='pZm94gQBzOQ')

(data-id='uWCGK4nneeU')

(data-id='errorId')

Afin de garder des pages légères les vidéos Youtubes ne sont chargées qu'à la demande de l'utilisateur, lorsque celui-ci clique sur le bouton de lecture.

L'API youtube n'est pas utilisée afin d'éviter les limitations inhérentes à cette dernière en terme de requêtes. Ce qui nous permet aussi de garder notre indépendance face à la nécessité d'une clef d'API.

Forms

See page

Search

Ranges

See page

.range

.range(data-intl='fr-FR' data-currency='EUR')

.range input[disabled]

.range-multithumb

.output.phylactery

.output.phylactery(style='--size')

.range-multithumb

Les sliders acceptent aussi les valeurs négatives pour leur plage respective.

Checkboxes & Radio buttons

See page

Les bouttons checkbox et radio sont utilisés lorsqu'un choix demande à être validé après coup, au sein d'un ensemble de choix dans un formulaire. Les switchs sont utilisés pour une validation imédiate du choix de l'utilisateur.

Buttons

See page

button.button

(style='--color;--bg-color')

.button:disabled

.scale(style='--scale:80%')

.scale(style='--scale:120%')

.scale(style='--scale:150%')

button.round-button

(style='--color;--bg-color')

button.button2

Progress

See page

progress.progress

(max='100' value='50')

(style='--color:#4e667a')

.scale(style='--scale:150%')

Test

L'élément HTML natif est désormais utilisé, notre solution précédente était constituée d'une div pilotée par JavaScript pour simuler la progression.

Loaders

See page

.loader

.loader.scale(style='--scale:120%')

(style='--frame:5s')

(style='--color:#d2b48c')

Charts

See page

pie-chart

(data='60;30')

(data='60;0')

(labels='Apricot;Peach')

(gap='0.1' donut='0.9')

(gap='0' donut='0')

(colors='hsl(30, 100%, 65%); hsl(90, 100%, 65%)')

pie-chart

Cards

See page

.card

Proin vestibulum dolor

Nullam id arcu in purus pretium tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu leo commodo, aliquam lorem at, auctor massa. Donec malesuada tellus id est convallis, non efficitur magna varius. Proin accumsan tristique hendrerit. Suspendisse tempus mauris felis, at pharetra elit malesuada et.

Aenean vitae faucibus

Curabitur diam magna, malesuada sed convallis non, fermentum lacinia dolor. Nullam iaculis sapien ac quam ultricies posuere. Suspendisse non luctus justo. Nulla facilisi. Maecenas dapibus maximus enim, et bibendum nisl vulputate sit amet. Donec semper felis eu porttitor auctor.

Suspendisse non luctus

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Suspendisse nibh neque, porta et placerat vel, gravida at magna.

Integer hendrerit

Vivamus sodales eget eros ut euismod. Ut eu pulvinar ante, vitae porta dui. Mauris eu elementum velit. Curabitur aliquet sem eget tempus venenatis. Vivamus vel lectus dictum, tempus arcu non, sodales ex. Praesent ut nisi cursus, tristique elit quis, tempus enim.

Nouveau

Proin vestibulum dolor

Nullam id arcu in purus pretium tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu leo commodo, aliquam lorem at, auctor massa. Donec malesuada tellus id est convallis, non efficitur magna varius. Proin accumsan tristique hendrerit. Suspendisse tempus mauris felis, at pharetra elit malesuada et.

Aenean vitae faucibus

Curabitur diam magna, malesuada sed convallis non, fermentum lacinia dolor. Nullam iaculis sapien ac quam ultricies posuere. Suspendisse non luctus justo. Nulla facilisi. Maecenas dapibus maximus enim, et bibendum nisl vulputate sit amet. Donec semper felis eu porttitor auctor.

Suspendisse non luctus

Morbi ac ex ornare, finibus turpis vel, pellentesque leo. Aenean dignissim eu dolor id dignissim. Duis ornare sapien ex, non porttitor sapien suscipit ut. Suspendisse nibh neque, porta et placerat vel, gravida at magna.

Nouveau

Aenean vitae faucibus

Curabitur diam magna, malesuada sed convallis non, fermentum lacinia dolor. Nullam iaculis sapien ac quam ultricies posuere. Suspendisse non luctus justo. Nulla facilisi. Maecenas dapibus maximus enim, et bibendum nisl vulputate sit amet. Donec semper felis eu porttitor auctor.

Ribbons

See page

.ribbon-top-left

Top left

.ribbon-top-right

Top right

.ribbon-content > .ribbon-<top|bottom>-<left|right>

Top left

Top right

Bottom left

Bottom right

.ribbon-bottom-left

Bottom left

.ribbon-bottom-right

Bottom right

Top left

Top right

Bottom left

Bottom right

.ribbon-bottom-left .rotate180

Bottom left

.ribbon-bottom-right .rotate180

Bottom right

Top left

Bottom right

.ribbon-top-left.scale(style='--scale:150%')

.ribbon-bottom-right.scale(style='--scale:150%') .rotate180.rescale

a.ribbon-top-right

a.ribbon-bottom-left

Link

(style='--color:#fff;--bg-color:#4e667a')

Custom color

Grids

See page

.grid4.gap

.c4

.r4

.c2

.r2

.r3

.c3

.grid4

.c4

.r4

.c2

.r2

.r3

.c3

.grid2.gap

.c2

.grid3.gap

.r2

.r2.c2

.c2

.c3

.grid4.gap.masonry

.c2

.grid-auto.gap

.grid-auto.gap(style='--size-grid:5em')

.grid-auto-min.gap

Les grilles utilisent les modules CSS Grid Layout, Container Queries et les opérateurs mathématiques de comparaison (Media Queries Level 4).

Voir pour les supports de Container Queries et Media Queries: Range Syntax.

Columns

See page

.column4.gap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas. Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Praesent pellentesque elit non dui finibus, malesuada tincidunt lorem laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget rhoncus justo, non consequat justo. Integer consequat sit amet mauris sed lacinia. In lobortis tincidunt odio at finibus. In in mauris ut neque aliquet efficitur sit amet eu metus.

Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.

Morbi a libero dictum, tempus lectus sit amet, luctus magna. Aliquam rutrum nunc eros, sed dignissim libero iaculis sit amet. Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Fusce eros mauris, congue vitae purus quis, suscipit semper metus. Praesent non velit lectus.

Pellentesque at sodales magna. Nullam id vestibulum urna. Etiam semper vehicula nibh, id fringilla velit vestibulum eu. Donec maximus, ligula quis consequat scelerisque, sapien risus sollicitudin erat, id malesuada sapien quam a odio.

Mauris vitae orci ullamcorper elit fringilla volutpat. Curabitur vehicula bibendum nibh, eu fringilla arcu ullamcorper et. Morbi massa ex, viverra eu risus id, ultricies luctus dolor. Ut ut laoreet purus.

Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor. Nunc vel nulla diam.

Pellentesque at sodales magna. In hac habitasse platea dictumst. Vestibulum aliquet feugiat quam ac maximus. Nam ligula neque, tincidunt eu mauris at, maximus rhoncus elit. Vestibulum porta euismod dignissim.

Fusce eros mauris, congue vitae purus quis, suscipit semper metus. Fusce sagittis nisl vitae volutpat fringilla. Donec elementum nisi eget augue egestas pharetra. Etiam sit amet pharetra felis. Ut eu velit nec massa vehicula tincidunt sit amet vel lectus.

Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam. Praesent non velit lectus. Proin vehicula ut metus non tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Quisque in interdum tortor. Quisque ornare id massa a placerat. Nam orci lorem, pharetra a lacus feugiat, lacinia porta sem. Pellentesque viverra fringilla tincidunt. Etiam condimentum elementum metus, et lacinia justo condimentum non.

Les styles CSS ne permettent pas encore une implémentation de type masonry, avec une distribution des items horizontale et non verticale comme ici. Mais .column est pour l'instant la solution full CSS qui s'en approche le plus. Pour tester l'effet masonry avec le framework nous vous conseillons une autre approche en grid layout + javascript.

Nombreux bugs affectant Chrome : éléments ou effet d'ombre tronqués, parfois des artfacts pour les pseudo-éléments. Ce constat est moins vrai sur les dernières versions de Chrome.

Scales

See page

.scale(style='--scale:70%')