Heading
Text text text text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph of normal text
Paragraph with bold text, italic text,
strikethrough, highlighted text, and
inline code
- Unordered List
- Text
- Text text
- Ordered List
- More text
- Wow such text
Text, link.
Default text
Ohno text
Yay text
Main text
Fg2 text
Fg1 text
Fg0 text
Dropdowns are cool:
Dropdown buttons with more color classes:
"Icon-only" buttons
Combo-select buttons (.combo-select class)
Combo-select with .combo-selected-icon
Searchbars
Searchbar with example autocomplete
Notice boxes
Notice box text
Notice box text
Notice box text
Boxes
Box text
Green box
Red box
Inputs
Text input
Password input
Textarea input
Radio select
Checkbox select
File input
Tables
Inner table
| Header, column 0 | Header, column 1 | Header, column 2 |
|---|---|---|
| Row 0, column 0 | Row 0, column 1 | Row 0, column 2 |
| Row 1, column 0 | Row 1, column 1 | Row 1, column 2 |
Outer table
| Header, column 0 | Header, column 1 | Header, column 2 |
|---|---|---|
| Row 0, column 0 | Row 0, column 1 | Row 0, column 2 |
| Row 1, column 0 | Row 1, column 1 | Row 1, column 2 |
Cards
Card
Card front
Click to flip
Click to flip
Card back
Click to flip
Click to flip
Grid List Thingy
Item 0
Item 1
Item 2
Green
Item 3
Item 4
Item 5
Red
Item 6
Item 7
Green
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Grid List & .flex.center-h & .center-v
text
.center-h
more
text
.center-v
-v and -h
example
text
Separator
text
separator
text
Example
Option 1
or
Option 2
Extra header
Extra inputs
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.
Large buttons (continued?)
continued again?
Modals & Alerts
You/we can use ehui's .hide class to show/hide modals.
Button boxes
We have fancy styling for button boxes with <button class="button-box">...<button> or <a class="button button-box">...<a>
You/we can add `.selected` for a fancy outline
We can also have other elements like images inside button boxes
(and with .no-clickable-effect to disable scale effect/animation on hover)
We can apply color classes .yay and .ohno to button boxes too
We can apply color classes after being clicked.
You can do this with JavaScript using element.classList.add(...) and element.classList.remove(...) in element.addEventListener("click", ...)