Select theme

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

1. Ordered List
2. More text
3. Wow such text

Text, link.

link-ohno

link-warn

link-yay

link-extra

link-love

Disabled buttons with disabled attribute (for buttons) & disabled class (for link-buttons)

Default text

Ohno text

Warn text

Yay text

Main text

Fg2 text

Fg1 text

Fg0 text

Dropdowns are cool:

Dropdown buttons with more color classes:

raw-dropdown class (for stuff like js-powered dropdowns)

"Icon-only" buttons

Combo-select buttons (.combo-select class)

Combo-select with .combo-selected-icon

combo-buttons class (similar to combo-select, but with no selected/unselected styles)

Combo-buttons with alt buttons inside

Dropdown select

Searchbars

Searchbar with autocomplete

Searchbar with raw-autocomplete

Notice boxes

Notice box text

Notice box text

Notice box text

Notice box text

Boxes

Inputs

Text input

Password input

Textarea input

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

Grid List Thingy

Grid List & .flex.center-h & .center-v

Separator

text

text

Example

Option 1

Option 2

"yay" color is for success (usually green)
"ohno" is for danger/error (usually red)
"warn" is for warning/loading (usually orange)
"extra" is just an accent/secondary color, it can be the same as yay if we want
"love" is a cute (usually red) color for not-scary stuff, it can be the same as ohno
the main difference is ohno and yay need to have contrast, so in colorblind themes they might not be red/green, but they should always give off negative/positive vibes, while love is supposed to be used for stuff like like buttons or donation links which isn't the same "scary" vibe use case that ohno is for

Link using link-love class: link is here hiii

Ohno and love are not usually directly next to eachother, so they might look odd in the example below but they usually look nice in real use cases (or they might be the same, which is fine)

Large buttons (continued?)

continued again?

Modals & Alerts

You/we can use ehui's .hide class to show/hide modals.

Open Modal

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

We can apply color classes .yay, .ohno, etc 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", ...)

We can also make button boxes disabled

You can use the button-box-selected-icon class to show/hide icons when selected

For example, Question Types: (select multiple)

You can use classes button-box and with-bordercolor-border when button boxes are inside of div elements that have class="box" This example also applies/resets disabled attributes when answers are submitted/reset. Also use no-box-shadow to disable shadows

Accordions using the <details> element

Text goes here

More text goes here and here and here

Progress bars:

Change progress (live)

More progress bar styles:

Sticky Header

The trans-dots class adds a pretty semi-transparent blurred dots effect. The example header below also uses style="position: sticky; top: 0px;"

Loading Spinners

Spinner class: <div> <div class="spinner"></div> </div>

Wrap in an extra div for correct margins

Add yay, ohno, warn, love, fg0, fg1, main, currentcolor or currentColor classes for colors (or color-yay, color-ohno, color-warn, color-love, color-fg0, color-fg1, color-main, color-currentcolor or color-currentColor)

Change speed with speed-fast, speed-mid, speed-slow, speed-slower, speed-slowest classes or time-0.5 or time-1/2, time-1, time-2, time-4, time-6 classes

Change thickness with thick class & reset to default with thin class

Set size with css width, height properties or classes size-1rem, size-1.2rem, size-1.4rem, size-1.6rem, size-1.8rem, size-2rem, size-3rem, size-4rem

Use class semi-trans or bg-semi-trans to use the spinner's primary color (but semi-transparent) as the secondary color, useful for spinners inside of elements with background colors, like buttons.