hf-dash.com
logo logo

HF-UI

HTML First Components for Building Web Applications

logo

My Card

This is the description of the card.

By hf-component authors
logo

No Link

This is the description of the card.

By hf-component authors

No Image

This is the description of the card.

By hf-component authors

Component Examples

Accordion

Summary

Details about this thing

Summary

Details about this thing

Dots

Information Success Warning Error Unknown

Autocomplete

Badge

New

Tags

non-smoking WiFi pool pool free breakfast

Breadcrumb

Blockquote

Some Regular text
Someone said something.

Button

Ordinal name

Disabled state

Link as button

Link

Remove type

Button group

Alert

All types

Sign up for  premium  to see the full list Your order has been received! A confirmation email was sent to john@example.com Your flight has been canceled. You do not have permission to delete records.

Not dismissible

You can't get rid of me.

Container

Small container

Log in
Forgot password
Not a member? Sign up

Medium container

Log in
Forgot password
Not a member? Sign up

Default container

Log in
Forgot password
Not a member? Sign up

maxwidth=none container

Log in
Forgot password
Not a member? Sign up

Grids

Auto-span

One column in one row. Two columns... in another row. Three columns... in... yet another row.

Span size and auto-span

One column with span="3" ... and a second column fills remaining space. One column with span="3" ... another with span="4" ... and a third column fills remaining space. One column with span="7" and no other columns. One column with span="7" ... another with span="5" to make 12. One column with span="7" ... and another with span="6" , which exceeds the 12 column grid. Avoid!

Centering columns

One auto-span column inside a center ed row. One column with span="3" ... and one with the default auto-span inside a center ed row.

Responsive columns

This column spans 3 on lg screens, 5 on md, and 12 on sm. This column spans 9 on lg screens, 7 on md, and 12 on sm.

Boxes

Default

Regular text on the page.

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.

Regular text in a Box.

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.
Regular text in a secondary Box.

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.

Three in a row

Regular text on the page
 Regular text in a Box Regular text in a secondary Box

Nesting a secondary Box

Create an account
Must have a number and be 6 or more characters

Dialogs

Title

Body lorem ipsum

Regular text on the page.

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.

Regular text in a Box.

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.

Body lorem ipsum

Regular text on the page.

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.

Regular text in a Box.

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.

Body lorem ipsum

Regular text on the page.

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.

Regular text in a Box.

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.

Body lorem ipsum

Regular text on the page.

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.

Regular text in a Box.

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.
Text

Log in

Email Password Forgot password
Not a member? Sign up

Tip: This content retains its state after the Dialog is closed. Try filling in the form then close the Dialog and and re-open. See how the state of the DOM was not changed by Dialog?

Modeless

This Dialog is opened with the show() method, which makes it "modeless". This means the user can still interact with other elements on the page (try it, you can't do that with the other Dialog examples), which could result in the user triggering actions unintentionally, so be judicious when using this method.

Forms

Everything form
<textarea rows="3"></textarea>

Details

This is a short bit of info about elephants.

Learn more

Details about this thing.

And more details about this thing.

Loader

Basic loaders

Loader on its own:

Loader without loading :

Loader with text: Searching...

Loader used in button

The Loader in this button is hidden waiting for the user to click...
When clicked, the app removes hidden from the Loader and adds disabled to the button and updates its label:

Loader and links

This Loader has its own text and is inside a link. The app, for example, could toggle its loading attribute and text based on the state of the process: Pause / Resume

This Loader has its own text, is medium text size, and sits above a link. They've both been centered:

Downloading... Stop

Loader size

Explicit font-size of 70px:

Inherited size:

Inside heading 1

Inside heading 2

Inside heading 3

Inside heading 4

Inside heading 5
Inside heading 6

Inside paragraph

Inside small

Menu

Basic Menu with links

Menu with custom content and min-width: 300px

Text Here
Some more text with a link 
</div>

Switch

Checked, unchecked, and disabled

Standalone in a custom layout

Alarm 7:00AM

In a Box as a form of options

Notification preferences
Currently unavailable 
</hf-col>

Tables

Basic table

Column heading Column heading
Cell Cell
Cell Cell

Tabs

Basic tabs

With icons

Scrollable

 <script type="module" src="/_public/browser/index.mjs"></script>