COMPONENTS

 

NAVBARS

 

NAVBAR LIGHT

 

NAVBAR CENTERED PRIMARY

 

NAVBAR PILLS INVERSE

 

SPLIT NAVBAR

 
 

BUTTONS

 

STYLES

Default Button Rectangle Button Pill Button Outline Button Rectangle Outline Button Pill Outline Button

 

SIZES

xSmall Small Medium Large

 

COLORS

Primary Button Secondary Button Success Button Info Button Warning Button Danger Button White Button Black Button

 

BUTTONS WITH ICONS

favoritePrimary watch_laterSecondary verified_userSuccess public Info Warningpan_tool Dangersettings Whiteemail Blackstar

COLLAPSE BUTTONS

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

DROPDOWN & DROPUP BUTTONS

Action Another action Something else here
Separated link
Split Dropdown
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Split Dropup
Action Another action Something else here
Separated link
 
 

INPUTS

CHECKBOX

RADIO

INPUT GROUPS

GO!
search
 

PAGINATIONS

 

BREADCRUMB

 

CENTERED PAGINATION

 

PAGER

 

BUTTON PAGER

 

TABS & ACCORDIONS

 

TAB PILLS

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

TABS ON CARD

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 irure terry richardson ex squid.
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.
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.
 

ACCORDION

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.

PRIMARY ACCORDION

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.
 

PROGRESS BARS

 

DEFAULT PROGRESS BARS

CUSTOM ANIMATION & HEIGHT PROGRESS

PROGRESS BARS WITH LABELS

25%
40%
55%
70%
85%

STRIPED PROGRESS BARS

MULTIPLE PROGRESS

ANIMATED PROGRESS BARS

 

ALERTS

 

DISMISSABLE ALERTS

DISMISSABLE ALERTS WITH ICONS

 

CARDS

 

CARD BLOCK

This is some text, button and icon within a card block.Button star

CARDS

CARD TITLE

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARD TITLE

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARD TITLE

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARDS WITH ICONS

extension

CARD TITLE

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
explore

CARD TITLE

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
favorite

CARD TITLE

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button

CARDS WITH IMAGE TOP

card-image-cap

CARD TITLE

Left-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

CARD TITLE

Center-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
card-image-cap

CARD TITLE

Right-aligned content. Example text to build on the card title and make up the bulk of the card's content.

Button
 

TYPOGRAPHY

 

HEADINGS

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

PARAGRAPHS

Large Paragraph (lead). Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames.

Regular Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum.

Extra Small Paragraph. Vivamus sollicitudin ligula ut ante bibendum, et sollicitudin sem ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.

LISTS

  • Aliquam molestie quam in tincidunt
  • Morbi quis neque non nisl egestas
  • Vestibulum nisi nibh, pulvinar sit amet
  • Mauris pretium elit ac facilisis mollis
  1. Aliquam molestie quam in tincidunt
  2. Morbi quis neque non nisl egestas
  3. Vestibulum nisi nibh, pulvinar amet
  4. Mauris pretium elit ac facilisis mollis
 

INLINE TEXT ELEMENTS

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is like an addition to a document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

TEXT COLORS

Primary. Morbi quis neque non nisl egestas laoreet

Muted. Aliquam molestie quam in tincidunt

Success. Vestibulum nisi nibh, pulvinar sit amet lacinia

Info. Mauris pretium elit ac facilisis mollis posuere

Warning. Mauris vitae magna in dolor porta aliquam

Danger. Mauris vitae magna in dolor porta aliquam

TEXT BACKGROUNDS

Pellentesque iaculis nisl vitae ligula volutpat, sit amet rhoncus nisl posuere. Vestibulum vel nisi euismod, commodo felis fermentum, fringilla ex. Fusce vel mattis quam, id bibendum leo. Vivamus et sollicitudin sem ultricies.

BLOCKQUOTE

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title

BLOCKQUOTE REVERSE

Quisque tincidunt dolor diam, malesuada pellentesque lectus finibus pretium. Curabitur a nibh.

Someone famous in Source Title
 

TABLES

 

DEFAULT TABLE

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

INVERSE TABLE

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

STRIPED TABLE

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

INVERSE STRIPED TABLED

# FIRST NAME LAST NAME USERNAME
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
 

IMAGES

 

IMAGE CAPTION

IMAGE CAPTION GOES HERE.

REGULAR IMAGE

ROUNDED IMAGE

CIRCLE IMAGE

 

RAISED IMAGES

 

IMAGE CAPTION

IMAGE CAPTION GOES HERE.

REGULAR IMAGE

ROUNDED IMAGE

CIRCLE IMAGE

 

MODAL

 
Default Modal Long Modal Grid Modal Varying Modal
 

POPOVERS & TOOLTIPS

 

Popover on top Popover on bottom Popover on right Popover on left

Tooltip on top Tooltip on bottom Tooltip on right Tooltip on left