Topbar Right
d1DocsDemoTest page

d1 frontend framework

Alert (swipe me)

Warning

Sticky success message

Info • 1280x720px • 80x45em • 16px/em

Note

10em

Typography #

Bold
Italic
Strike
Insert
Delete
xsuper
xsub

Abbr
Quote inside quote
Cite
Dfn
Mark
Small
Code
Var
Kbd
Samp
Link
Link reset
Link no href
JS or not
Span
Error
Warning
Success
Info
Note

Paragraph.
New line inside paragraph.

Blockqoute
// JavaScript preformatted code
let double = function (x) {
  console.log('double', x);
  return 2 * x;
}

Forms #

Buttons



A A A A
Link Link Link Link Link Link
Link Span B

Inline form

Stacked form



Link

Responsive flex form with custom validation tooltips

Needs 2..4 letters Fine
Fieldset

Responsive table form with custom validation messages

Reset
Type 2 up to 4 letters
Looks good
Input types
Type and select from lookup
Select language
Input the date
Input the date and time
Enter number between 1 and 10, step 0.1
Type something
Upload
Box
Check to continue
Switches
Box



Radio

Select to continue

Icons #

Icon No label Desktop label Mobile label

Responsive table sort and filter #

3/3  

StringNumberBytesIntervalDateIcon
String
HTML
Number
4
Bytes
900 B
Interval
1min 125s
Date
1993-07-09 08:05:01
Icon
String
JavaScript
Number
10.12345
Bytes
1 MB
Interval
3m
Date
12/4/1995
Icon
String
CSS
Number
3
Bytes
350 KB
Interval
1y
Date
17.12.1996 1:2:3
Icon
String
3 items
String
Sum
Number
17.123
Bytes
1.343 MB
Interval
1y 3m 3min 5sec
Date
String
Avg
Number
5.71
Bytes
458.29 KB
Interval
5m 1min 1.666666666045785sec
Date
20.06.1995 19:02:21
String
Min
Number
3
Bytes
900 B
Interval
3min 5sec
Date
09.07.1993 08:05:01
String
Max
Number
10.12
Bytes
1 MB
Interval
1y
Date
17.12.1996
String
count
3
Number
sum
17.12
Bytes
sum
1.34 MB
Interval
sum
1y 3m 3min 5sec
Date
max
17.12.1996 01:02:03
Icon
count
3

Code sample and toggle class JS #

abbreviation

HTML code sample .
<!-- HTML -->
<abbr title="Hypertext Markup Language">HTML</abbr>
<code>code</code>
<b>sample</b>
<input type="checkbox">.

Manage items JS #

Add Name Value
+ Table row item
+ ×

Filter items JS #

Colors: any red yellow green
Style: any plain shadow inverted
A
B
C
D
E
F
G
H
I

Fetch URL JS #

(preview)

Dynamic content JS #

Status

JavaScript off JavaScript on
Mobile layout Desktop layout

Page setup JS



Components

Fullscreen modal
2
2
3
Green

Overlay

Text link

File picker with dropzone JS


Media object

Link
Figure caption
Progress
85%

Tooltips • simple
popup
This is a popup tooltip
js
Tag Danger Warning OK Info Note
Inverted text link colors
Full height

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
#11
Theme

Theme

Reset to default

Background

Menu

Links

Text

Font

sans-serifserifmonospacePT SansRoboto Slab

Gaps

0.50.711.21.5