Color Palette
Colors
Black
Primary
Secondary
Tertiary
Error
Caution
Tan
Gray
Light Gray
White
Gradients
Dark Gradient
Primary Gradient
Secondary Gradient
Tertiary Gradient
Primary Gradient Top
Primary Gradient Bottom
Secondary Gradient Top
Secondary Gradient Bottom
Transparency
Transparent
Transparent Bottom
Transparent Top
Transparent Both
Typography
Headings
H1
H2
H3
H4
Body
Lorem ipsum dolor sit amen
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Example Ordered List
- Example Ordered List
- Example Unordered List
- Example Unordered List
Rich Text
All H1 Headings
All H2 Headings
All H3 Headings
All H4 Headings
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
"This is a block quote"
Forms
Light Background
Thank you for your submission!
Dark Background
Thank you for your submission!
Cards
Standard 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 MoreCepteur 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 MoreCepteur 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 MoreResponsive Grid
Full Width Container
Define your div with a class of "container-fluid" for full width.
Getting Started
Columns need to be nested within a "row". 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.
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-lg-(1-12)"
Grid - Mobile Landscape (Breakpoint)
Defining our mobile landscape breakpoints, all classes must precede with the class of "col" and if defined, your desktop and tablet classes of "col-lg-(1-12)" and "col-md-(1-12)"
Grid - Mobile Portrait (Breakpoint)
Defining our mobile portrait breakpoints, all classes must precede with the class of "col" and if defined, your desktop, tablet and mobile landscape classes of "col-lg-(1-12)", "col-md-(1-12)", and "col-sm-(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
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
Column Reordering
To individually reorder columns in a row, simply define the order on each viewport size
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 Card Slider
Sample product
Sample product
Sample product
Sample product
Sample product
- Add 'card-slider_wrapper' class to list wrapper element (or collection list wrapper element).
- Add 'owl-carousel, owl-theme, and card-slider' classes to the list item (or collection list element).
- Add 'card-slider_item' to the single card element (or collection item element).
- Create separate nav wrapper element and add class 'card-slider_nav'.
- Add 'card-slider_left' ID to the left nav button within the 'card-slider_nav' wrapper.
- Add 'card-slider_right' ID to the right nav button within the 'card-slider_nav' wrapper.
Margin
Margin (X&Y Axis)
Margin (X&Y Axis + Responsive)
Margin (X-Axis)
Margin (X-Axis + Responsive)
Margin (Y-Axis)
Margin (Y-Axis + Responsive)
Negative Margin (Y-Axis)
Negative Margin (X-Axis)
Padding
Padding (X&Y Axis)
Padding (X&Y Axis + Responsive)
Padding (X-Axis)
Padding (X-Axis + Responsive)
Padding (Y-Axis)
Padding (Y-Axis + Responsive)
Text
Color
Alignment
Responsive Alignment
Font
Images
Borders
Cropping
Filters & Opacity
Box Shadows
Outside
Outside
Inside
Other
Overflow
Visibility
Display
Positioning
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