TEMPLATE CUSTOMIZER

Set preferences that will be cookied for your live preview demonstration.

Color Scheme

Overall light or dark presentation.

Navigation Position

Select the primary navigation paradigm for your app.

Semi Dark (Sidebar & Header)

Layout Style

Select the primary layout style for your app.

Direction

Select the direction for your app.

Navbar Type

Sticky or Floating.

Sticky Floating Static

Router Transition

Animation of main content.

VRISTO

Elements
Badges

Basic

Code

Primary Secondary Success Danger Warning Info Dark

Outline

Code

Primary Secondary Success Danger Warning Info Dark

Pills

Code

Primary

Classic

Code

Primary

Badges with Heading

Code

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading Primary

Example heading Success

Example heading Info

Example heading Warning

Example heading Danger

Example heading Dark

Custom Badges

Code

John Doe

John Doex

John DoePro

Basic

Outline

Pills

Classic

Badges with Heading

Example heading Primary

Example heading Success

Example heading Info

Example heading Warning

Example heading Danger

Example heading Dark

Custom Badges