Style Guide
Your valuables deserve more than a dusty drawer or forgotten corner. Welcome to Vaultik – the secure digital vault, built for everything you treasure.
Color Palette
Primary Colors
Black
Dark Gray
Light Gray
White
Purple
Blue
Orange
Green
Transparency
Transparent
Transparent Bottom
Transparent Top
Transparent Both
Typography
Headings
H1
H2
H3
H4
H5
H6
"Lorem ipsum dolor sit amen"
Body
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.
- Ordered List Item
- Ordered List Item
- Unordered List Item
- Unordered List Item
Rich Text
All H1 Headings
All H2 Headings
All H3 Headings
All H4 Headings
All H5 Headings
All H6 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 sample unordered list item
- This is a sample unordered list item
- This is a sample unordered list item
- This is a sample ordered list item
- This is a sample ordered list item
"This is a block quote"
Forms
Note: These are Hubspot embeds that are styled with the "Hubspot Form Styles" component directy beneath this paragraph. It is only needed once on any page that has an embedded Hubspot form and one is included in the Footer component.
Customer Support
Contact Sales
Newsletter
Cards
Card Components
Card Feature
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.
VaultCare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.
Card Standard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum.
"A must-have app for collectors."
Interactive
Modal
Accordion
Accordion Heading
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 velit esse cillum dolore eu fugiat nulla pariatur.
Swiper
Note: Custom code is required in the page settings and "Swiper Styles" + "Swiper Nav & Pagination" components also need to be added to the page.
Responsive 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" and "col-lg-(1-12)"
Grid - Tablet (Breakpoint)
Defining our tablet breakpoints, all classes must precede with the class of "col" and "col-md-(1-12)"
Grid - Mobile Landscape (Breakpoint)
Defining our mobile landscape breakpoints, all classes must precede with the class of "col" and "col-sm-(1-12)"
Grid - Mobile Portrait (Breakpoint)
Defining our mobile portrait breakpoints, all classes must precede with the class of "col" and "col-xs-(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
Align-Center
Align-End
Align-between
Horizontal Alignment
Justify-Start
Justify-Center
Justify-End
Justify-Between
Justify-Around
Self-Align Columns
Self-Align Columns
Column Reordering
Column Reordering
To individually reorder columns in a row, simply define the order on each viewport size
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
Object Sizing
Cropping
Filters & Opacity
Positioning
Position
Absolute Positioning
Box Shadows
Outside
Inside
Other
Overflow
Visibility
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