Style Guide
Here is a summary of some of the main styles used throughout the site. If you edit styles here, they will change across the site.
Typography
HTML Heading Tags
HTML tags define default Heading styles.
H1
This is a H1
H2
This is a H2
H3
This is a H3
H4
This is a H4
H5
This is a H5
H6
This is a H6
Typography
Other HTML Tags
HTML tags define default text styles.
All paragraphs
This is a paragraph.
All Links
This is a link.All Quotes
This is a quote.
All Ordered Lists
- This is an ordered list.
- This is an ordered list.
- This is an ordered list.
All Unordered Lists
- This is an unordered list.
- This is an unordered list.
- This is an unordered list.
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a paragraph with a link.
- This is an unordered list.
- This is an unordered list.
- This is an unordered list.
- This is an ordered list.
- This is an ordered list.
- This is an ordered list.
This is a quote.
Typography
Heading Styles
Use these text classes when the visual typography style you want doesn't match the default HTML tag.
Heading Style H1
This is Heading style H1.
Heading Style H2
This is Heading style H2.
Heading Style H3
This is Heading style H3.
Heading Style H4
This is Heading style H4.
Heading Style H5
This is Heading style H5.
Heading Style H6
This is Heading style H6.
Typography
Text Sizes
Use these text classes when the visual typography style you want doesn't match the default HTML tag.
Text Size Large
This is a paragraph with text size large.
Text Size Medium
This is a paragraph with text size medium.
Text Size Regular
This is a paragraph with text size regular.
Text Size Small
This is a paragraph with text size small.
Text Size Tiny
This is a paragraph with text size tiny.
Accent
Features
Color Palette
Background Color
These colors have been created using Variables. If you edit the Variable color, it will change every element that uses that color Variable.
Black #00000
White #ffffff
Light Gray #F6F6F6
Medium Gray #E5E5E5
Dark Gray #AAAAAA
Color Palette
Text Color
These colors have been created using Variables. If you edit the Variable color, it will change every element that uses that color Variable.
Text Color Black
Text Color Black
Text Color Dark Gray
Text Color Dark Gray
Text Color White
Text Color White
Buttons
Button Primary Small
Button TextButton Primary Regular
Button TextButton Primary Large
Button TextButton Text Only
Button TextButton Full Width
Button TextButton Icon
Icons
Uniform icons sizes used throughout the template.
Icon 1x1 XXSmall
Icon 1x1 XSmall
Icon 1x1 Small
Icon 1x1 Medium
Icon 1x1 Large
Forms
Form Component
Structure
Structure
Core structure classes used throughout the template.
Page Wrapper
Main Wrapper
Container - Small
Container Medium
Container Large
Container Full Width
Padding Global
Padding Section Small
Padding Section Medium
Padding Section Large
Button Group
Layout
Multi-column layouts used throughout the template.
2 Column Grid
2 Column Grid Uneven Right
2 Column Grid Uneven Left
3 Column Grid
4 Column Grid
Spacers
Uniform spacer sizes used throughout the template.
Spacer XXXSmall
Spacer XXSmall
Spacer XSmall
Spacer Small
Spacer Medium
Spacer Large
Spacer XLarge
Spacer XXLarge
Spacer XXXLarge
Spacer XXXXLarge
Outdoorable connects you with insiders all over the world for 1:1 trip planning sessions