Samples
Headline Level 1
This is paragraph text. Etiam imperdiet ligula lacus, sollicitudin venenatis sem sagittis vel. In lacus diam, scelerisque non risus at, semper volutpat purus. Nunc lobortis nisi ipsum, ornare euismod urna pulvinar in.
Headline Level 2
This is paragraph text. Etiam imperdiet ligula lacus, sollicitudin venenatis sem sagittis vel. In lacus diam, scelerisque non risus at, semper volutpat purus. Nunc lobortis nisi ipsum, ornare euismod urna pulvinar in.
Headline Level 3
This is paragraph text. .text-uppercase -- Etiam imperdiet ligula lacus, sollicitudin venenatis sem sagittis vel. In lacus diam, scelerisque non risus at, semper volutpat purus. Nunc lobortis nisi ipsum, ornare euismod urna pulvinar in.
Headline Level 4
This is paragraph text. Donec velit quam, scelerisque nec iaculis pharetra, posuere eu lectus. Nam vel dui augue. Proin nec odio ut ipsum imperdiet dictum. Donec varius justo sed metus cursus, id mattis libero tincidunt.
Headline Level 5
- Unordered list. Phasellus ac mauris tincidunt, malesuada massa nec, tempor nisl.
- Praesent nec tortor eget odio vestibulum consectetur sit amet sed metus.
- Donec iaculis urna quis imperdiet commodo.
- Etiam accumsan turpis nec tortor ultricies consectetur.
Headline Level 6
- Ordered list. Phasellus ac mauris tincidunt, malesuada massa nec, tempor nisl.
- Praesent nec tortor eget odio vestibulum consectetur sit amet sed metus.
- Donec iaculis urna quis imperdiet commodo.
- Etiam accumsan turpis nec tortor ultricies consectetur.
Text Color Classes
This is sample text, .text-muted.
This is sample text, .text-primary.
This is sample text, .text-secondary.
This is sample text, .text-success.
This is sample text, .text-info.
This is sample text, .text-warning.
This is sample text, .text-danger.
This is sample text, .text-white.
This is sample text, .text-gray-100.
This is sample text, .text-gray-200.
This is sample text, .text-gray-300.
This is sample text, .text-gray-400.
This is sample text, .text-gray-500.
This is sample text, .text-gray-600.
This is sample text, .text-gray-700.
This is sample text, .text-gray-800.
This is sample text, .text-gray-900.
This is sample text, .text-black.
Theme/Brand Colors
This is sample text, .text-primary-100.
This is sample text, .text-primary-200.
This is sample text, .text-primary-300.
This is sample text, .text-primary-400.
This is sample text, .text-primary-500.
This is sample text, .text-primary-600.
This is sample text, .text-primary-700.
This is sample text, .text-primary-800.
This is sample text, .text-primary-900.
This is sample text, .text-secondary-100.
This is sample text, .text-secondary-200.
This is sample text, .text-secondary-300.
This is sample text, .text-secondary-400.
This is sample text, .text-secondary-500.
This is sample text, .text-secondary-600.
This is sample text, .text-secondary-700.
This is sample text, .text-secondary-800.
This is sample text, .text-secondary-900.
This is sample text, .text-tertiary-500.
This is sample text, .text-tertiary-800.
Text Size, and Style Classes
This is sample text, .fs-10.
This is sample text, .fs-12.
This is sample text, .fs-14.
This is sample text, .fs-16.
This is sample text, .fs-18.
This is sample text, .fs-20.
This is sample text, .fs-22.
This is sample text, .fs-24.
This is sample text, .fs-28.
This is sample text, .fs-32.
This is sample text, .fs-36.
This is sample text, .fs-40.
This is sample text, .fs-44.
This is sample text, .fs-48.
WEIGHT & FAMILY
The following weights are available to use on the base font family, FuturaPT (the default weight does not require the weight class unless you are overriding a different weight):
- font weight .fw-normal / family font-base
- font weight .fw-bold / family font-base
Font-family classes:
font family .font-base
font family .font-heading
font family .font-monospace
This is sample text, .text-heading.text-20.
This is sample text, .text-heading-base.text-20.
This is sample text, .text-base.text-20.
BUTTON STYLES
FORM STYLES
ALERTS
SECTION, BACKGROUND, BORDER STYLES
BORDER, ROUNDED, SHADOW
Borders
Rounded
Shadows
NOTE: filter shadows take a lot more resources to render than box-shadow, so use mostly on transparent PNG images where you need to give a shadow to the visible part of the image.
CARDS, TABS
Cards
Card Sample
Use for generic containers. Defaults to 100% wide. Add class of shadow for the default drop shadow.
Cillum duis excepteur deserunt anim sunt in ullamco amet minim elit dolore incididunt officia in aliquip nulla nisi cupidatat amet excepteur duis sed proident cillum qui cillum amet eu excepteur veniam cupidatat.
Tabs
contact tab, content in .collapse-box
description info here
Ut minim non aliqua ad sit ex nostrud ullamco adipisicing non voluptate qui est dolore ex et laboris sunt irure duis dolor dolor fugiat tempor ut cupidatat reprehenderit velit enim sed minim officia pariatur ullamco commodo sint ex enim est veniam aliquip excepteur cillum irure dolore occaecat minim labore pariatur magna fugiat tempor ea amet excepteur consectetur laborum incididunt anim enim ea cillum.
contact tab, content in .collapse-box
description info here
Ut minim non aliqua ad sit ex nostrud ullamco adipisicing non voluptate qui est dolore ex et laboris sunt irure duis dolor dolor fugiat tempor ut cupidatat reprehenderit velit enim sed minim officia pariatur ullamco commodo sint ex enim est veniam aliquip excepteur cillum irure dolore occaecat minim labore pariatur magna fugiat tempor ea amet excepteur consectetur laborum incididunt anim enim ea cillum.
resources tab, free range content
Sint voluptate sunt tempor eiusmod amet voluptate consequat minim duis ut esse laborum in laborum incididunt pariatur ea ut veniam et cillum ea fugiat nisi nostrud id incididunt dolore ut tempor ullamco deserunt ut sint.
Amet commodo minim aute in incididunt ut ex pariatur exercitation velit reprehenderit commodo in ullamco veniam ut eiusmod culpa minim dolor occaecat irure incididunt consequat proident culpa ut nisi pariatur laborum esse do excepteur culpa nostrud exercitation.