HUI Test & Demo Page
This page is for testing, previewing, and developing various @huement/ui 'mojo' components, utilities, and themes.
It is currently in a pretty rough / minimal condition. In the future it will be expanded and improved. Currently if you want to customize it, its very simple.
$ npm install $ npm run build
Theme Colors
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
Mono Scale
.mono-100
.mono-200
.mono-300
.mono-400
.mono-500
.mono-600
.mono-700
.mono-800
.mono-900
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
This is a normal paragraph. The quick brown fox jumps over the lazy dog. 0123456789
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) _ + - = [ ] { } ; : ' " , . < > / ? | \
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) _ + - = [ ] { } ; : ' " , . < > / ? | \
Buttons
Tables
| Type | Column heading | Column heading | Column heading |
|---|---|---|---|
| Active | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
| Primary | Column content | Column content | Column content |
| Secondary | Column content | Column content | Column content |
| Success | Column content | Column content | Column content |
| Danger | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Info | Column content | Column content | Column content |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
Form Evaluation & Testing
Spacers: Margin Top Utilities
Below are 5 divs, each with a different mt-* class applied (from mt-1 to mt-5):
Navbars
Navs
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Pills
Underline
Indicators, Alerts, Badges
Indicators
Alerts
Warning!
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,vel scelerisque nisl consectetur et.
Badges
Containers, List Groups
Containers
List groups
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
- Cras justo odio5
- Dapibus ac facilisis in4
- Morbi leo risus9
- Morbi leo risus8
- Morbi leo risus0
- Cras justo odio
Dialogs, Modals, Offcanvas, Popovers, Tooltips, Toasts
Dialogs
Modals
Offcanvas
Offcanvas
Popovers
Tooltips
Toasts
Cards
Cards
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Accordions
.accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow.