Element library

Every HTML element with the design system applied, in isolation.

Text and phrasing

aLink (cyan, hover pink)
abbr

The WWW is a network.

b / strong

Plain bold and strong.

cite

From Design Systems.

code / kbd / samp / var

const x = 1; Ctrl out n

del / ins

Removed Inserted.

em / i

Emphasis and italic.

mark

Here is highlighted text.

q

She said Hello.

ruby

漢かん字じ

s

Strikethrough.

small

Normal small text.

sub / sup

H2O and x2.

u

Underlined.

span

A span inline.

Headings and paragraphs

h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5
Heading 5
h6
Heading 6
p

A paragraph of body text.

blockquote
A quoted block.
pre
  preformatted
  code block

Lists and definitions

ul / li
  • One
  • Two
ol / li
  1. First
  2. Second
dl / dt / dd
Term
Definition.
Another
Another definition.

Sections and grouping

div
A div block.
main
Main content.
article
Article content.
section
Section content.
aside
nav
header
Header.
footer
Footer.
address
123 Street, City
figure / figcaption
A figure caption.
details / summary
Click to expand

Hidden content.

Tables

table
Table caption
AB
12
34
Sum10

Forms

form, label, fieldset
Legend

Fieldset content.

button
button.primary
button.danger
button.ok
button[disabled]
input text
input search
input number
input email
textarea
select
checkbox
checkbox checked
radio
range
color
output0

Media

imgPlaceholder
canvas
picturepicture

Dividers and other

hr
progress60%
data

Value: 123

time

Generic components

.tab
.control-row
42
.tool-divider
.hintHint text
.credit-linkCredit link
.scene-list-item
.scene-list-empty
.panel

Panel content.