General Elements

Buttons

Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Dialogs

Display a content in a layer above the App (like alert, helper text, etc) with Modal, Tooltips, and Popovers.

Tooltips & Popovers

Hover on buttons below to see tooltips.

Click buttons below to see Popover.

Modals & Toastr

Indicators

Provide contextual feedback messages for typical user actions and labeling components.

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.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Badges

Primary primary Success Danger Warning Info Light Dark

Primary primary Success Danger Warning Info Light Dark

Primary primary Success Danger Warning Info Light Dark

Live View


Progress

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Contextual
Striped
Multiple bars
Animated
Sizing
10%
25%
Loading

Navs

The base .nav component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.

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.


Breadcrumbs

Paginations


Containers

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Cards

Provide a flexible and extensible content container with multiple variants and options.

Components
Special title treatment
Support card subtitle
Card image

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. @stilearningTwit . #encode #admin

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment
Support card subtitle

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Components

Blanditiis architecto quaerat fugit sit ab veritatis ipsam assumenda doloremque repellendus expedita. #admin

Card Footer
Expansion Cards

A lightweight container that may either stand alone or be connected to a larger surface, such as a card.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Theme Selector
Multi Language