Styles

Panels

PCJ1 Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

PCJ2 Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

PCJ3 Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Collapsible Panel

Panel can be collapsed clicking on the chevron up/down icon on the top right corner

Initially collapsed Panel

Initially collapsed panel

Dismissable Panel

Panel can be dismissed by clicking on the cross icon icon on the top right corner

Standard Spinner

Click on the refresh icon to see how it triggers a refresh-event while it shows a spinner

Custom Spinner

Click on the refresh icon to see how it triggers a refresh-event while it shows a spinner

Another Spinner

See the list of allowed spinner at the Spinners page. A real use example is at the chart page.

Collapsible Accordion Panel Group

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.

Basic Tabs

Suspendisse velit erat, vulputate sit amet feugiat a, lobortis nec felis.
Integer lobortis commodo auctor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed commodo tellus ut mi tristique pharetra.

Normal Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Large Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Small Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Jumbotron

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.

Learn more

Colors and buttons

Background colors

.bg-pcj1-light
.bg-pcj1
.bg-pcj1-dark
.bg-pcj2-light
.bg-pcj2
.bg-pcj2-dark
.bg-pcj3-light
.bg-pcj3
.bg-pcj3-dark

Button Labeled

Button colors



Button Link anchor tag anchor tag anchor tag

Button Link anchor tag

Button sizing

Default Styles

Default Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Primary Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Success Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Info Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Warning Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Danger Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Purple Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Dark Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Inverse Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Green Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Pink Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Yellow Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Colors and buttons

Background colors

.bg-primary-light
.bg-primary
.bg-primary-dark
.bg-success-light
.bg-success
.bg-success-dark
.bg-info-light
.bg-info
.bg-info-dark
.bg-warning-light
.bg-warning
.bg-warning-dark
.bg-danger-light
.bg-danger
.bg-danger-dark
.bg-inverse-light
.bg-inverse
.bg-inverse-dark
.bg-green-light
.bg-green
.bg-green-dark
.bg-pink-light
.bg-pink
.bg-pink-dark
.bg-purple-light
.bg-purple
.bg-purple-dark
.bg-yellow-light
.bg-yellow
.bg-yellow-dark
.bg-gray-darker
.bg-gray-dark
.bg-gray
.bg-gray-light
.bg-gray-lighter

Button colors



Button Link anchor tag

Button sizing

Button Labeled



Notifications

Notify Alerts

Create toggleable notifications that fade out automatically.

You can use HTML inside your notification message

Alert Styles

Notify with Status

Uses builtin alert status to apply notifications

Show in different positions

Modals

Popovers

Tooltips

Progress Bar

40% Complete (success)
60% Complete (warning)
80% Complete (danger)
40% Complete (success)
40% Complete (success)
40% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
40% Complete (success)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

Sweet Alerts

A basic message

A title with a text under

A success message!

A warning message, with a function attached to the "Confirm"-button

... and by passing a parameter, you can execute something else for "Cancel".

Portlets

PCJ 1 Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Default Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Primary Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

100%

VOLUME

150

FORKS

PCJ 2 Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Info Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Purple Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

10k

VISITORS

100%

VOLUME

PCJ 3 Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Success Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Green Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

150

FORKS

10

NEW MESSAGES

Forms

Inline form

Stacked form

Horizontal form

Form elements

Classic inputs
A block of help text that breaks onto a new line and may extend beyond one line.

email@example.com


Input variants



@

.00

$ .00



Form elements

New Components


Automatically switches from hex to rgba format when transparency is selected:

As a component:

Inline mode:

Quick select Bootstrap colors:

data-inputmask="'mask': '999-99-999-9999-9"'
data-inputmask="'mask': '99/99/9999"'
data-inputmask="'mask': '(999) 999-9999"'
data-inputmask="'mask': 'aaaa-9999-aa99-9999"'
data-inputmask="'mask': '$ 999.999.999,99"'
data-inputmask="'mask': '€ 999.999.999,99"'

With margin

Nestable

  1. Item 1
  2. Item 2
    1. Item 3
    2. Item 4
    3. Item 5
      1. Item 6
      2. Item 7
      3. Item 8
    4. Item 9
    5. Item 10
  3. Item 11
  4. Item 12
  1. Drag
    Item 13
  2. Drag
    Item 14
  3. Drag
    Item 15
    1. Drag
      Item 16
    2. Drag
      Item 17
    3. Drag
      Item 18
Para dúvidas, comentários e sugestões, clique aqui.