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 anchor

Heading 3 anchor

Heading 4 anchor

Heading 5 anchor
Heading 6 anchor

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 style elements

abbr

reverse

dfn

bold bold

italic italic italic

deleted

inserted

var meaning = 42;

Ctrl + K

highlighted

1 2

output

english quote french quote german quote

strikethrough

small

Xsub

Xsup

underline

variable

Inline format elements

1,000.99

1 MB

Metadata label

Links

link link (current page) link (external) (opens in new tab)

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

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

To view the skip link component tab to this example, or click inside this example and press tab.

Tagged with:

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

Need help? View our guidance

How we should refer to you

Need help? View our guidance

Use the format username+alias@example.org

Need help? View our guidance

Use the format +1-000-999-1234

Need help? View our guidance

Use the format https://example.org

Need help? View our guidance

You should probably use PassKeys instead

Need help? View our guidance

Number inputs

Should be prime and greater than 99

Need help? View our guidance

Enter 6 digit code from your notification

Need help? View our guidance

Date input

Need help? View our guidance

Date picker [Avoid]

Need help? View our guidance

Search input

Need help? View our guidance

Address input

#000, 123 Home Street
A1A 1A1

Need help? View our guidance

Checkboxes

Checkboxes

legend hint

Need help? View our guidance

Radios

Radios

legend hint

Need help? View our guidance

Select [Avoid]

Radios would be a better UX

Need help? View our guidance

Checkboxes will be a better UX

Need help? View our guidance

Textarea

hint

Need help? View our guidance

File input

Choose file with .csv

Need help? View our guidance

WebAuthn

Register

WebAuthn create input is a hidden input used during passkey registration.

Authenticate

WebAuthn get input is a hidden input used during passkey authentication.

Need help? View our guidance

Input focus

Checkboxes
Radios

Errors

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

Media elements

Icons

Search

External link

Warning

Location

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.

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

Alert

Assertive: message about the alert.

Polite: message about the status.

Badge

3 New 99+

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

Callout

Card

  • Card title

    Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur

Code block

Data formatters

0 Bytes

1 KB

1 MB

1 GB

1 TB

Active

Inactive

Pending review

Archived

1,234.56

1,000,000

13%

$99.99

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.

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.

Nav Aside

Nav Scrollspy

Pagination (Numbered)

Pagination (Next/Prev)

Popover

This is popover content that appears on demand.

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

Tag

or

Task list

Grid

  • Card title

    Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur

  • Card title

    Commodo ut laborum fugiat aliqua eiusmod voluptate pariatur

Map

Style

- colours - patterns

Tiles

- PMTiles + Brotli

Component