01. Typography

Headings

Heading 1

h1 {font-size: 36px;}

Heading 2

h2 {font-size: 28px;}

Heading 3

h3 {font-size: 24px;}

Heading 4

h4 {font-size: 22px;}
Heading 5
h5 {font-size: 19px;}
Heading 6
h6 {font-size: 16px;}
Doing what you like is freedom...
blockquote {font-size: 20px;}

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.

body, p { font-size: 16px; }
Many desktop publishing packages now use Lorem Ipsum as their default model text. You can use the mark tag to highlight text.
.subheading {font-size: 19px;}

hr

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.

.truncate-text

Lists

  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
Unordered List
  1. Item in an ordered bulleted list
  2. Item in an ordered bulleted list
  3. Item in an ordered bulleted list
Ordered list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
Unstyled List

02. Buttons

Default buttons

Use the button classes on an <a></a>, <button></button>, or <input> element.

Button Sizes

Add .btn--xl, .btn--l.btn--m, .btn--s or .btn--xs for additional sizes.

Border Buttons

Add .btn--border to button to get border.

Rounded Button

Add .btn--rounded to default button to get rounded corners.

Buttons with Icons

Add an inline .btn-icon--xl, .btn-icon--l, .btn-icon--m, .btn-icon--s, .btn-icon--xs inside the button for a button icon.
Or combine any of button colors and styles with .btn--icon for a single icon button.

Flip Button

Add .btn--flip to button to get the flip 3D effect.

Buttons Group

Wrap a series of buttons with .btn in .btn-group.

03. Form Elements

Text Inputs

Use the .input class to get default styling for text inputs. Placeholder text is used for additional context when necessary.

Input sizes

Input fields come in four sizes which can be applied with .input--xl, .input--l, .input--m, .input--s and .input--xs on the .input component itself.

Textareas

Textareas come in four sizes which can be applied with .textarea--xl, .textarea--l, .textarea--m and .textarea--s.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

04. Select Fields

Default select

Use the .select class to get default styling for select fields.

Date picker

Dropdowns

Use the button to trigger the dropdown list.

Checkbox & Radio

Switch

Switch is used for switching between two opposing states.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

05. Notifications & Field Messages

Field messages

Wrap each field in a .fieldset and add a .form-fieldset--error, .form-fieldset--success or .form-fieldset--warning class to change the child label.

Notification

Use the following code snippets to add Error, Success and Warning messaging.

Your settings have been saved. View your settings.
Oh no, something went wrong. Fix this error.
This warning message is dismissible.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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

Add .table to enable a basic table.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive table

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
Country Languages Population Median Age Area (Km²)
Argentina Spanish (official), English, Italian, German, French 41,803,125 31.3 2,780,387
Australia English 79%, native and other languages 23,630,169 37.3 7,739,983
Greece Greek 99% (official), English, French 11,128,404 43.2 131,956
Luxembourg Luxermbourgish (national) French, German (both administrative) 536,761 39.1 2,586
Russia Russian, others 142,467,651 38.4 17,076,310
Sweden Swedish, small Sami- and Finnish-speaking minorities 9,631,261 41.1 449,954

08. Block Element Modifiers

Blocks, Elements and Modifiers

Blue Heading
Button
CSS STYLE
.b-card.b-card--blue h4 {
color:#3d70b2;}

.b-card--blue .btn-primary--lg {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
Red Heading
Button
CSS Style
.b-card.b-card--red h4 {
color:#d32f2f;}

.b-card--red .btn-primary--lg {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}

Green Heading
Button
CSS STYLE
.b-card.b-card--green h4 {
color:#5aa700;}

.b-card--green .btn-primary--lg.btn-border {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
View source cSS

10. Grid System

Grid system

This is a .container it has a max width of 1200px with a 15px left/right padding
This is a .fluid-container it has 100% width and a 15px left/right padding
This is a .row it has flexbox properties with a -15 margin on the left and right
This is a .col it has a 15px left and right padding and expands to 100% width on mobile portrait

Grid Options

See how aspects of the grid system work across multiple devices with a handy table.
Extra small devices Phones (<479px) Small devices Tablets (<767px) Medium devices Desktops (<992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Min container width None (auto) 479px 767px 992px
Class prefix .xs- .sm- .md- .lg-
# of columns 12
Max column width Auto 40px 64px 83px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Box Sizing

Grid systems are used for creating page layouts through a series of rows and columns that house your content. We uses a responsive, mobile first, fluid flex grid system that appropriately scales up to 12 columns as the device or viewport size increases. Make sure to add a .col class before the size class to inherit the expand property.

Large screens

.col.lg-1
Max size is 8.333%
.col.lg-2
Max size is 16.666%
.col.lg-3
Max size is 25%
.col.lg-4
Max size is 33.333%
.col.lg-5
Max size is 41.665%
.col.lg-6
Max size is 50%
.col.lg-7
Max size is 58.331%
.col.lg-8
Max size is 66.664%
.lg-9
Max size is 75%
.col.lg-10
Max size is 83.333%
.col.lg-11
Max size is 91.663%
.col.lg-12
This is a full width column - it will never shrink less than 100%
The below boxes will contract at its set breakpoint

Medium screens

.col.md-1
.col.md-2
.col.md-3
.col.md-4
.col.md-5
.col.md-6
.col.md-7
.col.md-8
.col.md-9
.col.md-10
.col.md-11
.col.md-12

Small screens

.col.sm-1
.col.sm-2
.col.sm-3
.col.sm-4
.col.sm-5
.col.sm-6
.col.sm-7
.col.sm-8
.col.sm-9
.col.sm-10
.col.sm-11
.col.sm-12

XSmall screens

.col.xs-1
.col.xs-2
.col.xs-3
.col.xs-4
.col.xs-5
.col.xs-6
.col.xs-7
.col.xs-8
.col.xs-9
.col.xs-10
.col.xs-11
.col.xs-12

Chaining

Using the above classes we can now chain together multiple classes and have an expanded or contracting based on the breakpoint.
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.
.col.lg-8.md-6.sm-9
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
.col.lg-6.md-9.sm-10.xs-6
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

Cards

Static card

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Elevations
.elevation-0
Left nav, Header with tabs, Tables
.elevation-1
Modules, Cards
.elevation-2
Overflow menu, dropdowns, tooltips
.elevation-3
Global header, Detail page header
.elevation-4
Global left nav
.elevation-5
Modals

12. Icon font

Directional & Suggested icons

  • up-square
    &#xe6c8;
  • down-square
    &#xe6c9;
  • left-square
    &#xe6ca;
  • right-square
    &#xe6cb;
  • right-square-o
    &#xe6cc;
  • left-square-o
    &#xe6cd;
  • down-square-o
    &#xe6ce;
  • up-square-o
    &#xe6cf;
  • caretright
    &#xe604;
  • caretleft
    &#xe605;
  • caretdown
    &#xe606;
  • caretup
    &#xe607;
  • right-circle
    &#xe608;
  • left-circle
    &#xe609;
  • up-circle
    &#xe60a;
  • down-circle
    &#xe60b;
  • right-circle-o
    &#xe60c;
  • left-circle-o
    &#xe60d;
  • up-circle-o
    &#xe60e;
  • down-circle-o
    &#xe60f;
  • doubleright
    &#xe617;
  • doubleleft
    &#xe618;
  • arrowdown
    &#xe619;
  • arrowup
    &#xe61a;
  • arrowright
    &#xe61b;
  • arrowleft
    &#xe61c;
  • down
    &#xe61d;
  • up
    &#xe61e;
  • right
    &#xe61f;
  • left
    &#xe620;
  • minus-square
    &#xe6c1;
  • minus-square-o
    &#xe621;
  • minus-circle
    &#xe622;
  • minus-circle-o
    &#xe623;
  • minus
    &#xe624;
  • plus-square
    &#xe6c0;
  • plus-square-o
    &#xe645;
  • plus-circle
    &#xe626;
  • plus-circle-o
    &#xe625;
  • plus
    &#xe627;
  • info-cirlce
    &#xe628;
  • info-cirlce-o
    &#xe629;
  • info
    &#xe62a;
  • warning-circle
    &#xe62c;
  • warning-circle-o
    &#xe62d;
  • error
    &#xe997;
  • close-circle
    &#xe62e;
  • close-circle-o
    &#xe62f;
  • close-square
    &#xe6c2;
  • close-square-o
    &#xe6c3;
  • close
    &#xe633;
  • check-circle
    &#xe630;
  • check-circle-o
    &#xe631;
  • check-square
    &#xe6c4;
  • check-square-o
    &#xe6c5;
  • check
    &#xe632;
  • question-circle
    &#xe63b;
  • question-circle-o
    &#xe63c;
  • rollback
    &#xe612;
  • retweet
    &#xe613;
  • swap
    &#xe642;
  • swapleft
    &#xe643;
  • swapright
    &#xe644;
  • totop
    &#xe66c;

General icons

  • menu
    &#xe907;
  • home
    &#xe65e;
  • mail
    &#xe659;
  • book
    &#xe637;
  • star
    &#xe660;
  • star-o
    &#xe661;
  • clock-circle
    &#xe640;
  • clock-circle-o
    &#xe641;
  • hourglass
    &#xe653;
  • flag
    &#xe655;
  • filter
    &#xe663;
  • sharealt
    &#xe671;
  • setting
    &#xe672;
  • picture
    &#xe674;
  • phone
    &#xe675;
  • paperclip
    &#xe676;
  • bells
    &#xe64e;
  • notification
    &#xe677;
  • inbox
    &#xe67a;
  • cloud
    &#xe680;
  • cloud-o
    &#xe67f;
  • cloudupload
    &#xe681;
  • cloudupload-o
    &#xe684;
  • clouddownload
    &#xe682;
  • clouddownload-o
    &#xe683;
  • enviroment
    &#xe685;
  • enviroment-o
    &#xe686;
  • eye
    &#xe687;
  • eye-o
    &#xe688;
  • pushpin-o
    &#xe6a1;
  • pushpin
    &#xe6a2;
  • heart
    &#xe6a3;
  • heart-o
    &#xe6a4;
  • like
    &#xe64c;
  • like
    &#xe69d;
  • dislike
    &#xe64b;
  • dislike
    &#xe69e;
  • lock
    &#xe6b9;
  • unlock
    &#xe6ba;
  • key
    &#xe654;
  • tag
    &#xe6d6;
  • tag-o
    &#xe6d7;
  • tags
    &#xe67d;
  • tag-o
    &#xe67e;
  • chat
    &#xe9c4;
  • message
    &#xe6ab;
  • login
    &#xe657;
  • logout
    &#xe65a;

Application icons

  • dashboard
    &#xe99a;
  • user
    &#xe66a;
  • adduser
    &#xe6ed;
  • team
    &#xe66d;
  • addusergroup
    &#xe6dd;
  • deleteuser
    &#xe6e0;
  • deleteusergroup
    &#xe6e1;
  • contacts
    &#xe6f0;
  • solution
    &#xe66f;
  • idcard
    &#xe6e5;
  • folder
    &#xe662;
  • folderopen
    &#xe699;
  • file
    &#xe664;
  • switcher
    &#xe9b8;
  • search
    &#xe670;
  • ellipsis
    &#xe647;
  • calendar
    &#xe6bb;
  • filetext
    &#xe698;
  • copy
    &#xe648;
  • jpgfile
    &#xe69c;
  • pdffile
    &#xe6b3;
  • exclefile
    &#xe6b0;
  • pptfile
    &#xe6b1;
  • unknowfile
    &#xe6af;
  • wordfile
    &#xe6b2;
  • link
    &#xe65b;
  • disconnect
    &#xe64f;
  • database
    &#xe650;
  • layout
    &#xe656;
  • exception
    &#xe665;
  • code-square
    &#xe6bf;
  • code-square-o
    &#xe636;
  • fork
    &#xe6f2;
  • edit
    &#xe692;
  • edit form
    &#xe996;
  • table
    &#xe998;
  • list
    &#xe999;
  • bars
    &#xe639;
  • carryout
    &#xe6df;
  • save
    &#xe669;
  • delete
    &#xe69f;
  • export2
    &#xe690;
  • export
    &#xe691;
  • upload
    &#xe6b6;
  • download
    &#xe6b7;
  • reload
    &#xe616;
  • sync
    &#xe6da;
  • enter
    &#xe6a0;
  • barschart
    &#xe638;
  • areachart
    &#xe65c;
  • linechart
    &#xe65d;
  • dotchart
    &#xe6bd;
  • barchart
    &#xe6be;

Miscellaneous icons

  • shoppingcart
    &#xe668;
  • Safety
    &#xe6ea;
  • wallet
    &#xe6eb;
  • creditcard
    &#xe635;
  • printer
    &#xe673;
  • car
    &#xe6de;
  • usb
    &#xe6d9;
  • wi-fi
    &#xe6dc;
  • gift
    &#xe6e6;
  • rest
    &#xe6e8;
  • trophy
    &#xe6ef;
  • bulb
    &#xe649;
  • rocket
    &#xe90f;
  • earth
    &#xe6f1;
  • shake
    &#xe94f;
  • mobile
    &#xe678;
  • tablet
    &#xe66e;
  • laptop
    &#xe65f;
  • desktop
    &#xe6b4;
  • hdd
    &#xe69a;
  • calculator
    &#xe6aa;
  • videocamera
    &#xe66b;
  • camera
    &#xe689;
  • camera-o
    &#xe68a;
  • customerservice
    &#xe634;
  • scan
    &#xe697;
  • barcode
    &#xe652;
  • qrcode
    &#xe67c;
  • man
    &#xe6ee;
  • woman
    &#xe6ec;
  • meho
    &#xe666;
  • meh
    &#xe667;
  • smile
    &#xe6a7;
  • smile-o
    &#xe6a8;
  • frown
    &#xe646;
  • frown-o
    &#xe6a9;

Controls icons

  • poweroff
    &#xe6d8;
  • play
    &#xe6d0;
  • stepforward
    &#xe600;
  • stepbackward
    &#xe601;
  • forward
    &#xe602;
  • banckward
    &#xe603;
  • fastbackward
    &#xe6c6;
  • fastforward
    &#xe6c7;
  • pause-circle
    &#xe63e;
  • pause-circle-o
    &#xe63f;
  • verticleleft
    &#xe610;
  • verticleright
    &#xe611;
  • shrink
    &#xe614;
  • arrowsalt
    &#xe615;
  • select
    &#xe64a;
  • sound
    &#xe6e9;
  • indent-left
    &#xe9a6;
  • indent-right
    &#xe9a7;
  • menu-unfold
    &#xe9ac;
  • menu-fold
    &#xe9ad;
  • menufold
    &#xe658;
  • menuunfold
    &#xe679;
  • loading
    &#xe6ae;
  • loading
    &#xe64d;

Brand & logos

  • facebook
    &#xe90b;
  • google
    &#xe9b5;
  • amazon
    &#xe9b6;
  • codepen
    &#xe9b7;
  • dropbox
    &#xe9b9;
  • google plus
    &#xe9ba;
  • mediumm
    &#xe9bc;
  • gitlab
    &#xe9bd;
  • codepen-circle
    &#xe9b4;
  • skype
    &#xe9c0;
  • youtube
    &#xe9c3;
  • twitter
    &#xe9c5;
  • HTML5
    &#xe9c7;
  • behance
    &#xe707;
  • dribbble
    &#xe709;
  • instagram
    &#xe70b;
  • slack
    &#xe705;
  • windows-o
    &#xe6bc;
  • windows
    &#xe68b;
  • ie
    &#xe69b;
  • chrome
    &#xe6ac;
  • Safary
    &#xe6db;
  • github
    &#xe6ad;
  • apple
    &#xe68c;
  • android
    &#xe938;
  • android-o
    &#xe68d;
  • appstore-o
    &#xe695;
  • appstore
    &#xe696;
  • API
    &#xe951;
  • trademark
    &#xe651;
  • copyright
    &#xe6f5;

13. Brand

Horizontal logo
LOGO BLACK
DOWNLOAD
LOGO WHITE
DOWNLOAD
Vertical logo
LOGO BLACK
DOWNLOAD
LOGO WHITE
DOWNLOAD

14. Colors

Primary Colors

.primary-color--light
#0094ea
.primary-color
#0080d6
.primary-color--dark
#036cc1

Supporting Colors

.positive-color
#85c737
.negative-color
#F5222D
.warning-color
#ffc53d
.info-color
#05b8ff

Text colors

.text-color--lighter
#c0ccda
.text-color--light
#94a0ad
.text-color--default
#4f5e6e
.text-color--dark
#273444

Dark Colors

.dark-color--lighter
#3c4858
.dark-color--light
#1f2d3d
.dark-color
#142433
.dark-color--darker
#0b151f

Neutral Colors

.gray-color--lighter
#f9fafc
.gray-color--light
#eff2f7
.gray-color
#e0e6ed
.gray-color--darker
#d3dce6

Color Palette

Dust Red

.red-color--1
#ffccc7
.red-color--2
#ffccc7
.red-color--3
#ffa39e
.red-color--4
#ff7875
.red-color--5
#ff4d4f
.red-color--6
#f5222d
.red-color--7
#cf1322
.red-color--8
#A8071A
.red-color--9
#cf1322
.red-color--10
#5c0011

Dust Red

.volcano-color--1
#fff1f0
.volcano-color--2
#ffccc7
.volcano-color--3
#ffa39e
.volcano-color--4
#ff7875
.volcano-color--5
#ff4d4f
.volcano-color--6
#f5222d
.volcano-color--7
#cf1322
.volcano-color--8
#A8071A
.volcano-color--9
#cf1322
.volcano-color--10
#5c0011

Sunset Orange

.volcano-color--1
#FFF1F0
.orange-color--1
#fff1f0
.orange-color--2
#ffccc7
.orange--color--3
#ffa39e
.orange--color--4
#ff7875
.orange--color--5
#ff4d4f
.orange--color--6
#f5222d
.orange--color--7
#cf1322
.orange--color--8
#A8071A
.orange--color--9
#cf1322
.orange-color--10
#5c0011

Calendula Gold

.volcano-color--1
#FFF1F0
.gold-color--1
#fff1f0
.gold-color--2
#ffccc7
.gold-color--3
#ffa39e
.gold-color--4
#ff7875
.gold-color--5
#ff4d4f
.gold-color--6
#f5222d
.gold-color--7
#cf1322
.gold-color--8
#A8071A
.gold-color--9
#cf1322
.gold-color--10
#5c0011

Sunrise Yellow

.yellow-color--1
#fff1f0
.yellow-color--2
#ffccc7
.yellow-color--3
#ffa39e
.yellow-color--4
#ff7875
.yellow-color--5
#ff4d4f
.yellow-color--6
#f5222d
.yellow-color--7
#cf1322
.yellow-color--8
#A8071A
.yellow-color--9
#cf1322
.yellow-color--10
#5c0011

Lime

.lime-color--1
#fff1f0
.lime-color--2
#ffccc7
.lime-color--3
#ffa39e
.lime-color--4
#ff7875
.lime-color--5
#ff4d4f
.lime-color--6
#f5222d
.lime-color--7
#cf1322
.lime-color--8
#A8071A
.lime-color--9
#cf1322
.lime-color--10
#5c0011

Polar Green

.green-color--1
#fff1f0
.green-color--2
#ffccc7
.green-color--3
#ffa39e
.green-color--4
#ff7875
.green-color--5
#ff4d4f
.green-color--6
#f5222d
.green-color--7
#cf1322
.green-color--8
#A8071A
.green-color--9
#cf1322
.green-color--10
#5c0011

Cyan

.cyan-color--1
#fff1f0
.cyan-color--2
#ffccc7
.cyan-color--3
#ffa39e
.cyan-color--4
#ff7875
.cyan-color--5
#ff4d4f
.cyan-color--6
#f5222d
.cyan-color--7
#cf1322
.cyan-color--8
#A8071A
.cyan-color--9
#cf1322
.cyan-color--10
#5c0011

Daybreak Blue

.blue-color--1
#ffccc7
.blue-color--2
#ffccc7
.blue-color--3
#ffa39e
.blue-color--4
#ff7875
.blue-color--5
#ff4d4f
.blue-color--6
#f5222d
.blue-color--7
#cf1322
.blue-color--8
#A8071A
.blue-color--9
#cf1322
.blue-color--10
#5c0011

Geek Blue

.geekblue-color--1
#fff1f0
.geekblue-color--2
#ffccc7
.geekblue-color--3
#ffa39e
.geekblue-color--4
#ff7875
.geekblue-color--5
#ff4d4f
.geekblue-color--6
#f5222d
.geekblue-color--7
#cf1322
.geekblue-color--8
#A8071A
.geekblue-color--9
#cf1322
.geekblue-color--10
#5c0011

Golden Purple

.volcano-color--1
#FFF1F0
.purple-color--1
#fff1f0
.purple-color--2
#ffccc7
.purple-color--3
#ffa39e
.purple-color--4
#ff7875
.purple-color--5
#ff4d4f
.purple-color--6
#f5222d
.purple-color--7
#cf1322
.purple-color--8
#A8071A
.purple-color--9
#cf1322
.purple-color--10
#5c0011

Magenta

.volcano-color--1
#FFF1F0
.magenta-color--1
#fff1f0
.magenta-color--2
#ffccc7
.magenta-color--3
#ffa39e
.magenta-color--4
#ff7875
.magenta-color--5
#ff4d4f
.magenta-color--6
#f5222d
.magenta-color--7
#cf1322
.gold-color--8
#A8071A
.gold-color--9
#cf1322
.gold-color--10
#5c0011

15. Code View

.slant-section {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  	margin-bottom: -10vw;
}

01. Typography

Headings

Heading 1

h1 {font-size: 36px;}

Heading 2

h2 {font-size: 28px;}

Heading 3

h3 {font-size: 24px;}

Heading 4

h4 {font-size: 22px;}
Heading 5
h5 {font-size: 19px;}
Heading 6
h6 {font-size: 16px;}
Doing what you like is freedom...
blockquote {font-size: 20px;}

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.

body, p { font-size: 16px; }
Many desktop publishing packages now use Lorem Ipsum as their default model text. You can use the mark tag to highlight text.
.subheading {font-size: 19px;}

hr

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.

.truncate-text

Lists

  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
  • Item in an unordered bulleted list
Unordered List
  1. Item in an ordered bulleted list
  2. Item in an ordered bulleted list
  3. Item in an ordered bulleted list
Ordered list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
  • Item in an ordered unstyled list
Unstyled List

02. Buttons

Default buttons

Use the button classes on an <a></a>, <button></button>, or <input> element.

Button Sizes

Add .btn--xl, .btn--l.btn--m, .btn--s or .btn--xs for additional sizes.

Border Buttons

Add .btn--border to button to get border.

Rounded Button

Add .btn--rounded to default button to get rounded corners.

Buttons with Icons

Add an inline .btn-icon--xl, .btn-icon--l, .btn-icon--m, .btn-icon--s, .btn-icon--xs inside the button for a button icon.
Or combine any of button colors and styles with .btn--icon for a single icon button.

Flip Button

Add .btn--flip to button to get the flip 3D effect.

Buttons Group

Wrap a series of buttons with .btn in .btn-group.

03. Form Elements

Text Inputs

Use the .input class to get default styling for text inputs. Placeholder text is used for additional context when necessary.

Input sizes

Input fields come in four sizes which can be applied with .input--xl, .input--l, .input--m, .input--s and .input--xs on the .input component itself.

Textareas

Textareas come in four sizes which can be applied with .textarea--xl, .textarea--l, .textarea--m and .textarea--s.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

04. Select Fields

Default select

Use the .select class to get default styling for select fields.

Date picker

Dropdowns

Use the button to trigger the dropdown list.

Checkbox & Radio

Switch

Switch is used for switching between two opposing states.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

05. Notifications & Field Messages

Field messages

Wrap each field in a .fieldset and add a .form-fieldset--error, .form-fieldset--success or .form-fieldset--warning class to change the child label.

Notification

Use the following code snippets to add Error, Success and Warning messaging.

Your settings have been saved. View your settings.
Oh no, something went wrong. Fix this error.
This warning message is dismissible.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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

Add .table to enable a basic table.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

Add .table-bordered for borders on all sides of the table and cells.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive table

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
Country Languages Population Median Age Area (Km²)
Argentina Spanish (official), English, Italian, German, French 41,803,125 31.3 2,780,387
Australia English 79%, native and other languages 23,630,169 37.3 7,739,983
Greece Greek 99% (official), English, French 11,128,404 43.2 131,956
Luxembourg Luxermbourgish (national) French, German (both administrative) 536,761 39.1 2,586
Russia Russian, others 142,467,651 38.4 17,076,310
Sweden Swedish, small Sami- and Finnish-speaking minorities 9,631,261 41.1 449,954

08. Block Element Modifiers

Blocks, Elements and Modifiers

Blue Heading
Button
CSS STYLE
.b-card.b-card--blue h4 {
color:#3d70b2;}

.b-card--blue .btn-primary--lg {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
Red Heading
Button
CSS Style
.b-card.b-card--red h4 {
color:#d32f2f;}

.b-card--red .btn-primary--lg {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}

Green Heading
Button
CSS STYLE
.b-card.b-card--green h4 {
color:#5aa700;}

.b-card--green .btn-primary--lg.btn-border {
color:#fff;
box-shadow:inset 0 0 0 2px #fff;}
View source cSS

10. Grid System

Grid system

This is a .container it has a max width of 1200px with a 15px left/right padding
This is a .fluid-container it has 100% width and a 15px left/right padding
This is a .row it has flexbox properties with a -15 margin on the left and right
This is a .col it has a 15px left and right padding and expands to 100% width on mobile portrait

Grid Options

See how aspects of the grid system work across multiple devices with a handy table.
Extra small devices Phones (<479px) Small devices Tablets (<767px) Medium devices Desktops (<992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Min container width None (auto) 479px 767px 992px
Class prefix .xs- .sm- .md- .lg-
# of columns 12
Max column width Auto 40px 64px 83px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

Box Sizing

Grid systems are used for creating page layouts through a series of rows and columns that house your content. We uses a responsive, mobile first, fluid flex grid system that appropriately scales up to 12 columns as the device or viewport size increases. Make sure to add a .col class before the size class to inherit the expand property.

Large screens

.col.lg-1
Max size is 8.333%
.col.lg-2
Max size is 16.666%
.col.lg-3
Max size is 25%
.col.lg-4
Max size is 33.333%
.col.lg-5
Max size is 41.665%
.col.lg-6
Max size is 50%
.col.lg-7
Max size is 58.331%
.col.lg-8
Max size is 66.664%
.lg-9
Max size is 75%
.col.lg-10
Max size is 83.333%
.col.lg-11
Max size is 91.663%
.col.lg-12
This is a full width column - it will never shrink less than 100%
The below boxes will contract at its set breakpoint

Medium screens

.col.md-1
.col.md-2
.col.md-3
.col.md-4
.col.md-5
.col.md-6
.col.md-7
.col.md-8
.col.md-9
.col.md-10
.col.md-11
.col.md-12

Small screens

.col.sm-1
.col.sm-2
.col.sm-3
.col.sm-4
.col.sm-5
.col.sm-6
.col.sm-7
.col.sm-8
.col.sm-9
.col.sm-10
.col.sm-11
.col.sm-12

XSmall screens

.col.xs-1
.col.xs-2
.col.xs-3
.col.xs-4
.col.xs-5
.col.xs-6
.col.xs-7
.col.xs-8
.col.xs-9
.col.xs-10
.col.xs-11
.col.xs-12

Chaining

Using the above classes we can now chain together multiple classes and have an expanded or contracting based on the breakpoint.
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.
.col.lg-8.md-6.sm-9
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
.col.lg-6.md-9.sm-10.xs-6
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

Cards

Static card

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Elevations
.elevation-0
Left nav, Header with tabs, Tables
.elevation-1
Modules, Cards
.elevation-2
Overflow menu, dropdowns, tooltips
.elevation-3
Global header, Detail page header
.elevation-4
Global left nav
.elevation-5
Modals

12. Icon font

Directional & Suggested icons

  • up-square
    &#xe6c8;
  • down-square
    &#xe6c9;
  • left-square
    &#xe6ca;
  • right-square
    &#xe6cb;
  • right-square-o
    &#xe6cc;
  • left-square-o
    &#xe6cd;
  • down-square-o
    &#xe6ce;
  • up-square-o
    &#xe6cf;
  • caretright
    &#xe604;
  • caretleft
    &#xe605;
  • caretdown
    &#xe606;
  • caretup
    &#xe607;
  • right-circle
    &#xe608;
  • left-circle
    &#xe609;
  • up-circle
    &#xe60a;
  • down-circle
    &#xe60b;
  • right-circle-o
    &#xe60c;
  • left-circle-o
    &#xe60d;
  • up-circle-o
    &#xe60e;
  • down-circle-o
    &#xe60f;
  • doubleright
    &#xe617;
  • doubleleft
    &#xe618;
  • arrowdown
    &#xe619;
  • arrowup
    &#xe61a;
  • arrowright
    &#xe61b;
  • arrowleft
    &#xe61c;
  • down
    &#xe61d;
  • up
    &#xe61e;
  • right
    &#xe61f;
  • left
    &#xe620;
  • minus-square
    &#xe6c1;
  • minus-square-o
    &#xe621;
  • minus-circle
    &#xe622;
  • minus-circle-o
    &#xe623;
  • minus
    &#xe624;
  • plus-square
    &#xe6c0;
  • plus-square-o
    &#xe645;
  • plus-circle
    &#xe626;
  • plus-circle-o
    &#xe625;
  • plus
    &#xe627;
  • info-cirlce
    &#xe628;
  • info-cirlce-o
    &#xe629;
  • info
    &#xe62a;
  • warning-circle
    &#xe62c;
  • warning-circle-o
    &#xe62d;
  • error
    &#xe997;
  • close-circle
    &#xe62e;
  • close-circle-o
    &#xe62f;
  • close-square
    &#xe6c2;
  • close-square-o
    &#xe6c3;
  • close
    &#xe633;
  • check-circle
    &#xe630;
  • check-circle-o
    &#xe631;
  • check-square
    &#xe6c4;
  • check-square-o
    &#xe6c5;
  • check
    &#xe632;
  • question-circle
    &#xe63b;
  • question-circle-o
    &#xe63c;
  • rollback
    &#xe612;
  • retweet
    &#xe613;
  • swap
    &#xe642;
  • swapleft
    &#xe643;
  • swapright
    &#xe644;
  • totop
    &#xe66c;

General icons

  • menu
    &#xe907;
  • home
    &#xe65e;
  • mail
    &#xe659;
  • book
    &#xe637;
  • star
    &#xe660;
  • star-o
    &#xe661;
  • clock-circle
    &#xe640;
  • clock-circle-o
    &#xe641;
  • hourglass
    &#xe653;
  • flag
    &#xe655;
  • filter
    &#xe663;
  • sharealt
    &#xe671;
  • setting
    &#xe672;
  • picture
    &#xe674;
  • phone
    &#xe675;
  • paperclip
    &#xe676;
  • bells
    &#xe64e;
  • notification
    &#xe677;
  • inbox
    &#xe67a;
  • cloud
    &#xe680;
  • cloud-o
    &#xe67f;
  • cloudupload
    &#xe681;
  • cloudupload-o
    &#xe684;
  • clouddownload
    &#xe682;
  • clouddownload-o
    &#xe683;
  • enviroment
    &#xe685;
  • enviroment-o
    &#xe686;
  • eye
    &#xe687;
  • eye-o
    &#xe688;
  • pushpin-o
    &#xe6a1;
  • pushpin
    &#xe6a2;
  • heart
    &#xe6a3;
  • heart-o
    &#xe6a4;
  • like
    &#xe64c;
  • like
    &#xe69d;
  • dislike
    &#xe64b;
  • dislike
    &#xe69e;
  • lock
    &#xe6b9;
  • unlock
    &#xe6ba;
  • key
    &#xe654;
  • tag
    &#xe6d6;
  • tag-o
    &#xe6d7;
  • tags
    &#xe67d;
  • tag-o
    &#xe67e;
  • chat
    &#xe9c4;
  • message
    &#xe6ab;
  • login
    &#xe657;
  • logout
    &#xe65a;

Application icons

  • dashboard
    &#xe99a;
  • user
    &#xe66a;
  • adduser
    &#xe6ed;
  • team
    &#xe66d;
  • addusergroup
    &#xe6dd;
  • deleteuser
    &#xe6e0;
  • deleteusergroup
    &#xe6e1;
  • contacts
    &#xe6f0;
  • solution
    &#xe66f;
  • idcard
    &#xe6e5;
  • folder
    &#xe662;
  • folderopen
    &#xe699;
  • file
    &#xe664;
  • switcher
    &#xe9b8;
  • search
    &#xe670;
  • ellipsis
    &#xe647;
  • calendar
    &#xe6bb;
  • filetext
    &#xe698;
  • copy
    &#xe648;
  • jpgfile
    &#xe69c;
  • pdffile
    &#xe6b3;
  • exclefile
    &#xe6b0;
  • pptfile
    &#xe6b1;
  • unknowfile
    &#xe6af;
  • wordfile
    &#xe6b2;
  • link
    &#xe65b;
  • disconnect
    &#xe64f;
  • database
    &#xe650;
  • layout
    &#xe656;
  • exception
    &#xe665;
  • code-square
    &#xe6bf;
  • code-square-o
    &#xe636;
  • fork
    &#xe6f2;
  • edit
    &#xe692;
  • edit form
    &#xe996;
  • table
    &#xe998;
  • list
    &#xe999;
  • bars
    &#xe639;
  • carryout
    &#xe6df;
  • save
    &#xe669;
  • delete
    &#xe69f;
  • export2
    &#xe690;
  • export
    &#xe691;
  • upload
    &#xe6b6;
  • download
    &#xe6b7;
  • reload
    &#xe616;
  • sync
    &#xe6da;
  • enter
    &#xe6a0;
  • barschart
    &#xe638;
  • areachart
    &#xe65c;
  • linechart
    &#xe65d;
  • dotchart
    &#xe6bd;
  • barchart
    &#xe6be;

Miscellaneous icons

  • shoppingcart
    &#xe668;
  • Safety
    &#xe6ea;
  • wallet
    &#xe6eb;
  • creditcard
    &#xe635;
  • printer
    &#xe673;
  • car
    &#xe6de;
  • usb
    &#xe6d9;
  • wi-fi
    &#xe6dc;
  • gift
    &#xe6e6;
  • rest
    &#xe6e8;
  • trophy
    &#xe6ef;
  • bulb
    &#xe649;
  • rocket
    &#xe90f;
  • earth
    &#xe6f1;
  • shake
    &#xe94f;
  • mobile
    &#xe678;
  • tablet
    &#xe66e;
  • laptop
    &#xe65f;
  • desktop
    &#xe6b4;
  • hdd
    &#xe69a;
  • calculator
    &#xe6aa;
  • videocamera
    &#xe66b;
  • camera
    &#xe689;
  • camera-o
    &#xe68a;
  • customerservice
    &#xe634;
  • scan
    &#xe697;
  • barcode
    &#xe652;
  • qrcode
    &#xe67c;
  • man
    &#xe6ee;
  • woman
    &#xe6ec;
  • meho
    &#xe666;
  • meh
    &#xe667;
  • smile
    &#xe6a7;
  • smile-o
    &#xe6a8;
  • frown
    &#xe646;
  • frown-o
    &#xe6a9;

Controls icons

  • poweroff
    &#xe6d8;
  • play
    &#xe6d0;
  • stepforward
    &#xe600;
  • stepbackward
    &#xe601;
  • forward
    &#xe602;
  • banckward
    &#xe603;
  • fastbackward
    &#xe6c6;
  • fastforward
    &#xe6c7;
  • pause-circle
    &#xe63e;
  • pause-circle-o
    &#xe63f;
  • verticleleft
    &#xe610;
  • verticleright
    &#xe611;
  • shrink
    &#xe614;
  • arrowsalt
    &#xe615;
  • select
    &#xe64a;
  • sound
    &#xe6e9;
  • indent-left
    &#xe9a6;
  • indent-right
    &#xe9a7;
  • menu-unfold
    &#xe9ac;
  • menu-fold
    &#xe9ad;
  • menufold
    &#xe658;
  • menuunfold
    &#xe679;
  • loading
    &#xe6ae;
  • loading
    &#xe64d;

Brand & logos

  • facebook
    &#xe90b;
  • google
    &#xe9b5;
  • amazon
    &#xe9b6;
  • codepen
    &#xe9b7;
  • dropbox
    &#xe9b9;
  • google plus
    &#xe9ba;
  • mediumm
    &#xe9bc;
  • gitlab
    &#xe9bd;
  • codepen-circle
    &#xe9b4;
  • skype
    &#xe9c0;
  • youtube
    &#xe9c3;
  • twitter
    &#xe9c5;
  • HTML5
    &#xe9c7;
  • behance
    &#xe707;
  • dribbble
    &#xe709;
  • instagram
    &#xe70b;
  • slack
    &#xe705;
  • windows-o
    &#xe6bc;
  • windows
    &#xe68b;
  • ie
    &#xe69b;
  • chrome
    &#xe6ac;
  • Safary
    &#xe6db;
  • github
    &#xe6ad;
  • apple
    &#xe68c;
  • android
    &#xe938;
  • android-o
    &#xe68d;
  • appstore-o
    &#xe695;
  • appstore
    &#xe696;
  • API
    &#xe951;
  • trademark
    &#xe651;
  • copyright
    &#xe6f5;

13. Brand

Horizontal logo
LOGO BLACK
DOWNLOAD
LOGO WHITE
DOWNLOAD
Vertical logo
LOGO BLACK
DOWNLOAD
LOGO WHITE
DOWNLOAD

14. Colors

Primary Colors

.primary-color--light
#0094ea
.primary-color
#0080d6
.primary-color--dark
#036cc1

Supporting Colors

.positive-color
#85c737
.negative-color
#F5222D
.warning-color
#ffc53d
.info-color
#05b8ff

Text colors

.text-color--lighter
#c0ccda
.text-color--light
#94a0ad
.text-color--default
#4f5e6e
.text-color--dark
#273444

Dark Colors

.dark-color--lighter
#3c4858
.dark-color--light
#1f2d3d
.dark-color
#142433
.dark-color--darker
#0b151f

Neutral Colors

.gray-color--lighter
#f9fafc
.gray-color--light
#eff2f7
.gray-color
#e0e6ed
.gray-color--darker
#d3dce6

Color Palette

Dust Red

.red-color--1
#ffccc7
.red-color--2
#ffccc7
.red-color--3
#ffa39e
.red-color--4
#ff7875
.red-color--5
#ff4d4f
.red-color--6
#f5222d
.red-color--7
#cf1322
.red-color--8
#A8071A
.red-color--9
#cf1322
.red-color--10
#5c0011

Dust Red

.volcano-color--1
#fff1f0
.volcano-color--2
#ffccc7
.volcano-color--3
#ffa39e
.volcano-color--4
#ff7875
.volcano-color--5
#ff4d4f
.volcano-color--6
#f5222d
.volcano-color--7
#cf1322
.volcano-color--8
#A8071A
.volcano-color--9
#cf1322
.volcano-color--10
#5c0011

Sunset Orange

.volcano-color--1
#FFF1F0
.orange-color--1
#fff1f0
.orange-color--2
#ffccc7
.orange--color--3
#ffa39e
.orange--color--4
#ff7875
.orange--color--5
#ff4d4f
.orange--color--6
#f5222d
.orange--color--7
#cf1322
.orange--color--8
#A8071A
.orange--color--9
#cf1322
.orange-color--10
#5c0011

Calendula Gold

.volcano-color--1
#FFF1F0
.gold-color--1
#fff1f0
.gold-color--2
#ffccc7
.gold-color--3
#ffa39e
.gold-color--4
#ff7875
.gold-color--5
#ff4d4f
.gold-color--6
#f5222d
.gold-color--7
#cf1322
.gold-color--8
#A8071A
.gold-color--9
#cf1322
.gold-color--10
#5c0011

Sunrise Yellow

.yellow-color--1
#fff1f0
.yellow-color--2
#ffccc7
.yellow-color--3
#ffa39e
.yellow-color--4
#ff7875
.yellow-color--5
#ff4d4f
.yellow-color--6
#f5222d
.yellow-color--7
#cf1322
.yellow-color--8
#A8071A
.yellow-color--9
#cf1322
.yellow-color--10
#5c0011

Lime

.lime-color--1
#fff1f0
.lime-color--2
#ffccc7
.lime-color--3
#ffa39e
.lime-color--4
#ff7875
.lime-color--5
#ff4d4f
.lime-color--6
#f5222d
.lime-color--7
#cf1322
.lime-color--8
#A8071A
.lime-color--9
#cf1322
.lime-color--10
#5c0011

Polar Green

.green-color--1
#fff1f0
.green-color--2
#ffccc7
.green-color--3
#ffa39e
.green-color--4
#ff7875
.green-color--5
#ff4d4f
.green-color--6
#f5222d
.green-color--7
#cf1322
.green-color--8
#A8071A
.green-color--9
#cf1322
.green-color--10
#5c0011

Cyan

.cyan-color--1
#fff1f0
.cyan-color--2
#ffccc7
.cyan-color--3
#ffa39e
.cyan-color--4
#ff7875
.cyan-color--5
#ff4d4f
.cyan-color--6
#f5222d
.cyan-color--7
#cf1322
.cyan-color--8
#A8071A
.cyan-color--9
#cf1322
.cyan-color--10
#5c0011

Daybreak Blue

.blue-color--1
#ffccc7
.blue-color--2
#ffccc7
.blue-color--3
#ffa39e
.blue-color--4
#ff7875
.blue-color--5
#ff4d4f
.blue-color--6
#f5222d
.blue-color--7
#cf1322
.blue-color--8
#A8071A
.blue-color--9
#cf1322
.blue-color--10
#5c0011

Geek Blue

.geekblue-color--1
#fff1f0
.geekblue-color--2
#ffccc7
.geekblue-color--3
#ffa39e
.geekblue-color--4
#ff7875
.geekblue-color--5
#ff4d4f
.geekblue-color--6
#f5222d
.geekblue-color--7
#cf1322
.geekblue-color--8
#A8071A
.geekblue-color--9
#cf1322
.geekblue-color--10
#5c0011

Golden Purple

.volcano-color--1
#FFF1F0
.purple-color--1
#fff1f0
.purple-color--2
#ffccc7
.purple-color--3
#ffa39e
.purple-color--4
#ff7875
.purple-color--5
#ff4d4f
.purple-color--6
#f5222d
.purple-color--7
#cf1322
.purple-color--8
#A8071A
.purple-color--9
#cf1322
.purple-color--10
#5c0011

Magenta

.volcano-color--1
#FFF1F0
.magenta-color--1
#fff1f0
.magenta-color--2
#ffccc7
.magenta-color--3
#ffa39e
.magenta-color--4
#ff7875
.magenta-color--5
#ff4d4f
.magenta-color--6
#f5222d
.magenta-color--7
#cf1322
.gold-color--8
#A8071A
.gold-color--9
#cf1322
.gold-color--10
#5c0011

15. Code View

.slant-section {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  	margin-bottom: -10vw;
}