Typography


Typography

Size

Font Weight

Heading 1

27px

Bold

Heading 2

20px

Bold

Heading 3

18px

Bold

Heading 4

16px

Bold

Heading 5
14px
Bold
Heading 6
12px
Semi Bold

Paragraph Body Text Large

18px

Regular

Paragraph Body Text Medium

16px

Regular

Paragraph Body Text Small

13px

Regular

Paragraph Body Text Extra Small

10px

Regular

Paragraph Bold Body

Bold

Paragraph Body Italic

Regular Italic

Text Link Large

18px

Regular

Text Link Medium

16px

Regular

Text Link Small

13px

Regular

Text Link Extra Small

10px

Regular

This is a text link in a paragraph

16px

Regular

Icon Links

Settings

Regular

Refresh



Forms


Form Title Style Category Font Style Form category sub helper text Sub Category Font Style

Example Form Layout



Datepicker








Tables


Standard Table

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2

Standard Table Light

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Standard Table Blue

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Standard Table Dark

Lorem Ipsum Dolor Sit
Sit Dolor 03.788 Lorem
Sit Dolor 32.210 Lorem
Sit Dolor 47.797 Lorem
Sit Dolor 09.640 Lorem
Sit Dolor 12.117 Lorem

Standard Table - Table Compact

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2

Standard Table - Table Cosy

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2

Standard Table - Table Comfy

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2

Standard Table - Table Colossal

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2

Table Cells Table

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2

Bordered Table

Product Code Contract Last Change charset Open High
Corn Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Soybean Oil Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2
Lean Hog Futures ZCH8 March 2018 March 2018 +1'4 352'4 360'2


Progress Indicators


45%
60%
80%


Panels


Block Panel

Title

Panel content

Block panel w/ border

Lorem ipsum dolor sit amet

Colored Panel

blue-3

Lorem ipsum dolor sit amet

blue-4

Lorem ipsum dolor sit amet

grey-2

Lorem ipsum dolor sit amet

grey-3

Lorem ipsum dolor sit amet

Outlined Panel

blue-4 - Outline Heavy

Lorem ipsum dolor sit amet

blue-5 - Outline Heavy

Lorem ipsum dolor sit amet

grey-3 - Outline Heavy

Lorem ipsum dolor sit amet

grey-4 - Outline Heavy

Lorem ipsum dolor sit amet


Callout Panel

blue-4 - Callout

Lorem ipsum dolor sit amet

blue-5 - Callout

Lorem ipsum dolor sit amet

grey-3 - Callout

Lorem ipsum dolor sit amet

grey-4 - Callout

Lorem ipsum dolor sit amet



Accordion


Default Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Default Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Lite Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Lite Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Non Active Default Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Non Active Default Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Non Active Lite Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.

Non Active Lite Style

Accordion title 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui sit amet massa vehicula semper id eu neque. Nulla venenatis consectetur mauris. Integer eu ornare eros. In malesuada viverra urna sed vehicula.

Accordion title 2

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam id lorem vestibulum, ornare ipsum vel, varius magna. Integer venenatis nibh urna, et hendrerit felis venenatis in.

Accordion title 3

Curabitur accumsan augue eget purus lacinia, at fringilla velit vestibulum. Aenean iaculis enim elit. Vestibulum convallis, massa et vestibulum feugiat, leo ipsum commodo libero, vel lacinia diam libero vel purus.



Toggles


Label Before

Disabled State






Label After

Disabled State








Drawers


     


Split Layout


Content Main

Lorem Ipsum Dolor Sit Amet Consectetur Afdipisicing
Sit Dolor 03.788 Lorem Amet Consectetur Afdipisicing
Sit Dolor 32.210 Lorem Amet Consectetur Afdipisicing

Content Secondary

Lorem Ipsum Dolor Sit Amet Consectetur Afdipisicing
Sit Dolor 03.788 Lorem Amet Consectetur Afdipisicing
Sit Dolor 32.210 Lorem Amet Consectetur Afdipisicing
Sit Dolor 47.797 Lorem Amet Consectetur Afdipisicing
Sit Dolor 09.640 Lorem Amet Consectetur Afdipisicing
Sit Dolor 12.117 Lorem Amet Consectetur Afdipisicing


Loaders




Pagination


Pagination Default

  1. Prev
  2. 1 of 10
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next
  1. Prev
  2. 1
  3. 2
  4. 3 of 10
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next

Pagination Lite

  1. Prev
  2. 1 of 10
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next
  1. Prev
  2. 1
  3. 2
  4. 3 of 10
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next

Pagination Small

  1. Prev
  2. 1 of 10
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next
  1. Prev
  2. 1
  3. 2
  4. 3 of 10
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next

Pagination Lite and Small

  1. Prev
  2. 1 of 10
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next
  1. Prev
  2. 1
  3. 2
  4. 3 of 10
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. Next


Toasts




Toasts Demo

Select a type, and whether to outline the toast message and click the "Show Toast" button.



filters




Alerts


Default Alert

Lite Alert

Attention Alert

Minimal Alert

Alert Box









Default Alert - Small

Attention Alert - Small

Light Alert - Small

Minimal Alert - Small

Alert Box - Small



Tabs




Default Styling

Jules Verne
Around the World
80 Days
But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.


Default Prominent Styling

Jules Verne
Around the World
80 Days
But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.


Lite Styling

Jules Verne
Around the World
80 Days
But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.


Lite Prominent Styling

Jules Verne
Around the World
80 Days
But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.


Vertifcal Styling

Category Title
Level 2
Level 2
Level 2
Category Title
Level 2
- Level 3
- Level 3
- Level 3
Level 2
Level 2
But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.

Level 2

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Level 3

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Level 3

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Level 3

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.


Vertifcal Prominent Styling

Category Title
Level 2
Level 2
Level 2
Category Title
Level 2
- Level 3
- Level 3
- Level 3
Level 2
Level 2
But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.

Level 2

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Level 3

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Level 3

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.

Level 3

But could he even wait till they reached Hong Kong? Fogg had an abominable way of jumping from one boat to another, and, before anything could be effected, might get full under way again for Yokohama.
Fix decided that he must warn the English authorities, and signal the Rangoon before her arrival. This was easy to do, since the steamer stopped at Singapore, whence there is a telegraphic wire to Hong Kong. He finally resolved, moreover, before acting more positively, to question Passepartout. It would not be difficult to make him talk; and, as there was no time to lose, Fix prepared to make himself known.
It was now the 30th of October, and on the following day the Rangoon was due at Singapore.


Dismissable Side Panel




Events

Results Content



Outline Buttons