Heading 1

Sub-Heading

Published on

Style

Template

Layouts

- article (centered, full-width breakouts) - documentation (aside, scrollspy) - faceted search - form input

Horizontal rule

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.

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.

Colour

Theme override

- CSS Rules

Typography

Typeface

system-ui, sans-serif

Type scale

16px (default) + View port width * 0.05/100

Headings

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. http://example.org/0000000000/0000000000/0000000000/0000000000/0000000000/0000000000 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 0.0000000000000000000000000000000000000000000000000000000000006. 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline text elements

abbr

reverse

dfn

bold bold

italic italic italic

deleted

inserted

var meaning = 42;

Ctrl + K

highlighted

1 2

english quote french quote german quote

strikthrough

small

Xsub

Xsup

underline

variable

Links

link link (current page) link (external)

link (active) link (focus) link (hover) link (visited)

verb verb (active) verb (focus) verb (hover) verb
name@example.org +1-000-000-0000 (RTT/TTY Supported) Back

Lists

Unordered

  • Item
  • Item
    • Item
    • Item
      • Item
      • Item
      • Item
    • Item
  • Item

Ordered

  1. Item
  2. Item
    1. Item
    2. Item
      1. Item
      2. Item
      3. Item
    3. Item
  3. Item

Descriptions

Term
description
Term
description
Term
description

Forms

Buttons

- print - copy

Text inputs

Just some friendly text
How we should refer to you
Use the format username+alias@example.org
Use the format +1-000-999-1234
Use the format https://example.org
You should probably use PassKeys instead

Number inputs

Should be prime and greater than 99
Enter 6 digit code from your notification

Date input

Date of your last adventure For example 2022 5 30

Date picker [Avoid]

Search input

TODO - Address Input

Checkboxes

Checkboxes legend hint
label hint
label hint

Radios

Radios legend hint
label hint
label hint

Select [Avoid]

Radios would be a better UX
Just type
Checkboxes will be a better UX

Textarea

hint

File input

Choose file with .csv

Authentication - username - email [Avoid] - password [Avoid] - totp [Avoid] - WebAuthn / PassKey

Input focus

Checkboxes
hint
hint
Radios
hint
hint

Address

#000, 123 Home Street
A1A 1A1

Errors

text error message
textarea error message
select error message
Checkboxes checkbox error message
hint
hint
Radios radio error message
hint
hint
file error message

Media elements

Icons

Images

Video

- HTML - Vimeo? - Youtube?

Audio

Chart (Histogram)

Chart (Scatter)

Map

Components

Accordion

Summary A

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Summary B

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Summary C

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Address

user+alias@example.org

+1-000-000-0000 x000

Unit A, 1 Address Street, City, Region, Country, Postcode

Banner

Blockquote

“The Semantic Web is not a separate Web but an extension of the current one, in which information is given well-defined meaning, better enabling computers and people to work in cooperation.”
— Tim Berners-Lee

Card

  • Card title

    Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur

Code block

Disclosure

Summary

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dialog [Avoid]

Heading

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Dialog footer

Dropdown

Form Aside (Faceted search)

Header

- multi-locale - search

Footer

Footnotes

Maintaining footnotes manually can be a pain. By using CSS counters to add the numbered references in the text and an ordered list to display the actual footnotes in the footer, it becomes extremely easy.

Footnotes

  1. about uid ↵
  2. about css ↵

Nav Aside

Nav Scrollspy

Pagination (Numbered)

Pagination (Next/Prev)

Tabs [Avoid]

Table

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
1 Cell Cell Cell Cell Cell
1 Cell Cell Cell Cell Cell
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
1 Cell Cell Cell Cell Cell
1 Cell Cell Cell Cell Cell

Code block

Grid

  • Card title

    Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur

  • Card title

    Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur

  • Card title

    Commodo ut laborum

Map

Style

- colours - patterns

Tiles

- PMTiles + Brotli

Component