01. Typography
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Doing what you like is freedom...
Text elements
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here', making it look like readable English. You can use the mark tag to highlight text.
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.
Text manipulation
This text overflows its parent element and therefore will be truncated and three dots will be appended. This is some long text that is going to get cut off by the container because its too long.
Lists
- Item in an unordered bulleted list
- Item in an unordered bulleted list
- Item in an unordered bulleted list
- Item in an ordered bulleted list
- Item in an ordered bulleted list
- Item in an ordered bulleted list
- Item in an ordered unstyled list
- Item in an ordered unstyled list
- Item in an ordered unstyled list
03. Form Elements
04. Select Fields
05. Notifications & Field Messages
06. Tabs
Divide data collections which are related yet belong to different types.
Horizontal Tabs
Tab 1
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Many desktop publishing packages now use Lorem Ipsum as their default model text.
Tab 2
Many desktop publishing packages now use Lorem Ipsum as their default model text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
The languages only differ in their grammar, their pronunciation and their most common words.
Tab 3
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
Tab 4
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Many desktop publishing packages now use Lorem Ipsum as their default model text.
Vertical Tabs
Tab 1
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Many desktop publishing packages now use Lorem Ipsum as their default model text.
Tab 2
Many desktop publishing packages now use Lorem Ipsum as their default model text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
The languages only differ in their grammar, their pronunciation and their most common words.
Tab 3
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
Tab 4
For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.
Many desktop publishing packages now use Lorem Ipsum as their default model text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
07. Sliders
Box Slider
Loop a series of images or texts in a limited space.
Carousel slider
09. Tables
Basic example
Striped rows
Bordered table
Hover rows
Responsive table
08. Block Element Modifiers
Blocks, Elements and Modifiers
Blue Heading
Buttoncolor:#3d70b2;}
.b-card--blue .btn-primary--lg {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
Red Heading
Buttoncolor:#d32f2f;}
.b-card--red .btn-primary--lg {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
Green Heading
Buttoncolor:#5aa700;}
.b-card--green .btn-primary--lg.btn-border {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
10. Grid System
Grid system
Grid Options
Box Sizing
Large screens
Max size is 8.333%
Max size is 16.666%
Max size is 25%
Max size is 33.333%
Max size is 41.665%
Max size is 50%
Max size is 58.331%
Max size is 66.664%
Max size is 75%
Max size is 83.333%
Max size is 91.663%
This is a full width column - it will never shrink less than 100%
Medium screens
Small screens
XSmall screens
Chaining
Note: unless you explicitly add a xs-* class the default action will be to expand the column to 100% on mobile portrait devices. Adding the .xs class to set a mobile portrait width.
This is a column has a starting of 66% on large screens, 50% on tablets, 75% on small devices and finally expands to 100% on mobile portrait devices
This is a column has a starting width of 50% on large screens, 75% on tablets, 83% on small devices and then expands back to 50% on xtra small devices (mobile portrait)
11. Cards & Elevations
Static card
Left nav, Header with tabs, Tables
Modules, Cards
Overflow menu, dropdowns, tooltips
Global header, Detail page header
Global left nav
Modals
