Granum v2.1.15 Typo Color List Table Form Layout Toggle Icon GitHub Top Back Customize

Granum v2.1.15 Small

Typography #

Text Link Unlink Code Kbd Quote Small Mark Abbr xsub xsuper

Block quote
Preformatted text
Code: window = click
Tags, badges, progress
Tag Border Info Text Bg Invert 1 Invert Small 8

Link 1 Link 8 Link 5

40% Default
50% Neutral
60% Note
70% Info
80% Success
90% Warning
100% Danger

Image
Circled image
Figure caption
Headings

Heading 1
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 2
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 3
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 4
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 5
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Heading 6
has a second line

Some text. More text. And more text. And more text. And more text. And more text. Another word. And more text. Like this one.
Final line.

Color #

Text Link Visited Status Small

Neutral Note Info Success Warning Danger

Neutral Note Info Success Warning Danger

Neutral Note Info Success Warning Danger

Buttons etc.

Buttons

Pad span

Pad

Border Danger Text Border Bg Text bg Border bg Text bg border

Invert

Span Icon Pad Icon pad Link Span Link inside span

List #

  1. One
  2. Two
  3. Three
    1. Uno
    2. Dos
    3. Tres
One
Uno
Two
Dos
2

Table #

Sample table

Status colors
#TextLinkBackBack+textInvertButton
11 Default Note Text Link Text Link Text Link
.5 Marked Note Text Link Text Link Text Link
0 Neutral Note Text Link Text Link Text Link
1 Note Note Text Link Text Link Text Link
99 Info Info Text Link Text Link Text Link
1123 Success Success Text Link Text Link Text Link
100 Warning Warning Text Link Text Link Text Link
5.5 Danger Danger Text Link Text Link Text Link
Σ 1234567

Form #


Info
#
Popup
Type in some text
Value required
Correct value



Boxes
Checked!
Nodes: One Two Three Four Five Six


Editable

Input types
Force validation
Type in the number Value required Correct value











Buttons

Text





Layout #

Regular grid
1
2
pic pic pic pic
Inverted
Flex row nowrap
pic pic pic pic
Flex row wrap
3
2
1
Auto
3 stick (inside nearest scrollable)
2
1
Auto
width
Three
Two
Fraction
Auto width
Stick
Stick to top

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

Stick to bottom
Columns
1
2
3
4
5
6
7
8
9
10
Full center
Center
Full scroll part
Header
Content

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

p

Footer
Slider
← One →
‹
Two
›
Three
Four
Horizontal responsize splitter
Left column
Table
Value
Some very long text written to trigger horizontal scroll
Center
column
Right column
Vertical splitter
Top
Bottom
Vertical full height splitter
Top
Bottom

Stacked paragraph one.

Stacked paragraph two.

Stacked paragraph three.

Stacked div one.
Stacked div two.
Stacked div three.

Toggle #

Details #

Summary
Details
Sub Sub-details
  • Sub-list
Before
Popup summary
Details.
Sub
Sub-details. Long line of text. Long line of text. Long line of text. Long line of text.
  • Sub-list
After
Tree item 1 mem
1.1
  • 1.1.1
  • 1.1.2
1.2
  • 1.2.1
  • 1.2.2
Tree item 2 mem
2.1
  • 2.1.1
  • 2.1.2

Target #

Target sub Target
Target
Target sub
Target sub
Target

Modal Anchor Modal full Gallery
Drawer left Drawer anchor Drawer right
Close

Modal

Anchor
Modal sub
Drawer

Expand
Expanded
Popup auto-position
More info with some long text to wrap lines

p

p

p

p

p

p

p

p

p

p

p

p

Close

Drawer left

Modal
Drawer anchor

Expand
Expanded
Red Green Blue Grey
Close

Customize style







Drawbacks:
Jumps to hash
No active tab highlighting
Tab 2
Tab 1
Tab 2
line
Tab 3
line
line.

Hover #

Before popup
Default
Info
Text
Nested
More info

p

p

p

p

p

p

p

p

p

p

p

p

After Hint.

Checked #

Checked 1
with separator
Checked 2

Display #

Screen: S M L
Container: S M L
Responsive target
Shown on target and on small screen Close

Dialog #

Requires JS to open

No wide support yet in 2023

Close

Modal Dialog

Popover

Dialog

Requires Invoker Commands API to work without JS
Closes on Escape
Closes on click out
Closes on opening another dialog
Traps focus
Has styleable ::backdrop
Autofocus
Nestable
Requires JS to open by link or by hash
Invert
Requires anchor support for positioning
Position relative to anchor
Invoker is the default anchor
Position fallback options
Can show outside of parent
Closes on Escape
Closes on click outside
Closes on opening another popover
Autofocus
Nestable
Requires JS to work on hover
Requires JS to have hint on non-buttons

Hint3 text text text text

1
2
3
4
5
6
7
8

Simple Nested Dialog

Simple Nested Popover

Nested dialog
Link Hint1 Hint2 texttexttext text text text text text text
text text text

Alerts #

JavaScript required
Confirm Prompt

Animations #

Icon # Iconset

Top

Cancel