Typography
Headings
H1
H2
H3
H4
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Central to this project is the aim to create enabling environments, and the improvement of production practices which improves livelihoods and provides protection to the environment.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Example Ordered List
- Example Ordered List
- Example Unordered List
- Example Unordered List
Color
Primary
Blue
Color Base
Tan
Light Gray
Secondary
Green
Clay
Brown
Forms
Light Background
Thank you for your submission!
Dark Background
Thank you for your submission!
Cards
Cepteur sint occaecat cupidatat non proident, sunt in culpa qui
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn MoreDuis aute irure dolor in reprehenderit in voluptate eiusmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate eiusmod tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Getting Started
Columns need to be nested within a "row" and a direct child of a "container". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.
Remove Gutters
To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".
Full Width Container
Define your div with a class of "container-fluid" for full width.
Responsive Grid
Grid - Desktop
To define our 12 column grid, all classes must precede with the initial class of "col"
Grid - Tablet (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop class of "col-(1-12)"
Grid - Mobile Landscape (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-(1-12)"
Grid - Mobile Portrait (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-(1-12)"
Column Wrapping
If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.
Vertical Alignment
Align-Start
To align columns from the top, combine a class of "align-start" preceded by the class of "row"
Align-Center
To align columns from the center, combine a class of "align-center" preceded by the class of "row"
Align-End
To align columns from the bottom, combine a class of "align-end" preceded by the class of "row"
Horizontal Alignment
Justify-Start
To align columns from the left, combine a class of "justify-start" preceded by the by class of "row"
Justify-Center
To align columns from the right, combine a class of "justify-center" preceded by the class of "row"
Justify-End
To align columns from the right, combine a class of "justify-end" preceded by the class of "row"
Justify-Between
To evenly space columns between each-other, combine a class of "justify-between" preceded by the class of "row"
Justify-Around
To evenly space columns around each-other, combine a class of "justify-around" preceded by the class of "row"
Self-Align Columns
To individually self-align columns, combine a class of "self-start", "self-center", "self-end" preceded by the by class of "col"
Column Reordering
To individually reorder columns, combine a class of either "order-first", "order-last", preceded by the by class of "col"
Column Extra Padding
To add extra inner padding to columns, combine a class of either "extra-pad-left", "extra-pad-right", preceded by the by class of "col"
Navigation ↑
This is an example of a basic navigation, and it can be modified as desired to make the brand style or aesthetic.
Footer ↓
This is an example of a basic footer. It can be modified as desired, and the generalconcepts to retain are contact info, reiterated nav links, a logo and copyright.
Interactive
Modal
A Header Goes Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
ButtonAccordion
What is the sound a doggy makes?
Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Custom Form Elements
Single Add-a-Field
Thank you for your submission!
- Add 'dynamic-preference' class to input-group.
- Add 'dynamic-preference-1' ID to input-group.
- Add 'first-preference' ID to the input.
- Add 'add-preference' ID to the add button.
- Add 'remove-preference' ID to the remove button.
- Add 'remove-btn' class to the remove button.
- A 'remove-btn_show' class should exist to set the remove button to show again.
Multi Add-a-Field
Thank you for your submission!
- Add 'dynamic-option' class to input-group_col.
- Add 'dynamic-option-1' ID to input-group_col.
- Add 'first-option' ID to the first input.
- Add 'first-example' ID to the second input.
- Add 'add-option' ID to the add button.
- Add 'remove-option' ID to the remove button.
- Add 'remove-btn' class to the remove button.
- A 'remove-btn_show' class should exist to set the remove button to show again.
Date Picker
Thank you for your submission!
- Add 'date' class to the input field.
Step Form w/ Validation
Thank you for your submission!
- Add 'tab1' through tabX to each tab menu link.
- Add 'to_tab1' through to_tabX to each next or back button.
- Add 'form-step1' through form-stepX to each tab pane.
International Phone Number Input
Thank you for your submission!
- Add 'int-phone' class to the input field.
Custom Card Slider
Spacing
Margin
Padding
Text
Color
Alignment
Font
Other
Overflow
Display
Prevent Style Clean Up
Internet Explorer Card Fixes
Set both the 'card' and 'card-body' classes to display:block only in IE to prevent text overflow and layout shift issues due to Flexbox.
Learn More