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.



Breadcrumb

  1. Top level
  2. Level 1
  3. Level 2
  4. Level 3
  1. Home
  2. About
  3. The Board
  4. Directors


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

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

Pagination Lite

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

Pagination Small

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

Pagination Lite and Small

  2. Prev
  3. 1 of 10
  4. 2
  5. 3
  6. 4
  7. 5
  8. 6
  9. 7
  10. 8
  11. 9
  12. 10
  13. Next
  2. Prev
  3. 1
  4. 2
  5. 3 of 10
  6. 4
  7. 5
  8. 6
  9. 7
  10. 8
  11. 9
  12. 10
  13. 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



Modal



Modal heading



Search





Outline Buttons