d1 › Docs › Demo › Test page

d1 frontend framework

Alert (swipe me)

Warning

Dismiss Sticky success message

Info

Note

10em

Typography

Bold
Italic
~~Strike~~
Insert
~~Delete~~
x^super
x_sub

Time
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;
}

Close

Buttons

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

Inline form

Stacked form

Responsive flex form with custom validation tooltips

Responsive table form with custom validation messages

Name

Set value

One
Two

Reset

Type 2 up to 4 letters

Looks good

Input types

Lookup	Type and select from lookup
Chained
Chained datalist
Select	Select language
Readonly
Disabled
Time
Date	Input the date
Datetime	Input the date and time
Number	Enter number between 1 and 10, step 0.1
Range
Color
E-mail
URL
Textarea	Type something
Upload
Box	Required box Check to continue

Switches

Icons

Show icons

Icon No label Hidden label Desktop label Mobile label

Responsive table sort and filter

more totals

String	Number	Bytes	Interval	Date	Icon
HTML	4	900 B	1min 125s	1993-07-09 08:05:01	+
JavaScript	10.12345	1 MB	3m	12/4/1995	x
CSS	3	350 KB	1y	17.12.1996 1:2:3	-
items
Sum
Avg
Min
Max

Code sample and toggle class JS

abbreviation code input

HTML code sample .

Manage items JS

Add Delete all Clear	Name	Value
+ — ✕	Table row item	+ ×

Filter items JS

Reset Colors: any red yellow green any red yellow green
Style: any plain shadow inverted any plain shadow inverted

Fetch URL JS

[preview area]

(preview)

Dynamic content JS

Insert Arrange Clone IDs Clear

Status

JavaScript off JavaScript on
Mobile layout Desktop layout

Page setup JS

Topbar
Invert [!]
Custom scroll [!] [#]

Components

Toggle
Togglable
Popup
Pop
Internal popup
Nested
Hover
Internal popup on
hover
Nested, to the left on desktop
Modal
Full
Gallery #1 #2 #3 JS
Pure CSS Gallery [!]
Drawer & tree

Close Fullscreen modal

Languages

Computer
- Programming
  - JavaScript
  - PHP
- Markup
  - HTML
  - CSS
Human
- English
- Spanish
- Russian

Anchors

Nested dialog
Local anchor
Local tree anchor
~~Nested modal~~
Nested popup
Nested popup
Outside anchor
Outside modal
Absent anchor

2
2

Overlay

Text link

Dialogs JS

File picker with dropzone JS

User

Media object
January 1970
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

#10

#11