Styles
Colors
Typography
Grids
Helpers
Icons
Buttons
Forms
Sections
Boxed Content
Containers
Template Style Guide

This style guide is an overview of the different colors, typography styles, buttons & other elements used in the template.

Typography
  • Default font is Arial. This is to prevent loading unused fonts in the project.
  • Default font size is 16px for Desktop, Tablet and Mobile. 18px for Large Desktops.
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Headings: Section Headings Class

Hero Title

Section Subtitle

pre title

Other Elements
Text Link
Text Link
Button Text

Paragraph

  • List Item 1
  • List Item 2
  1. List Item
  2. List Item
Blockquote
Grids
  • Grids are created to be reused throughout the project.
  • Grids with gap default value is 2rem, modify as needed.
Grid: 1 Column
Grid 2 Columns
  • Tablet & Mobile Landscape: 2 columns
  • Mobile: 1 Column
Grid 2 (No Gap) Columns
  • Tablet & Mobile Landscape: 2 columns
  • Mobile: 1 Column
Grid 3 Columns
  • Tablet, Mobile Landscape, Mobile: 1 column
Grid 3 (No Gap) Columns
  • Tablet, Mobile Landscape, Mobile: 1 column
Grid 4 Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 4 (No Gap) Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 5 Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 5 Columns
  • Tablet: 2 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 6 Columns
  • Tablet: 3 columns
  • Mobile Landscape & Mobile: 1 Column
Grid 6 Columns
  • Tablet: 3 columns
  • Mobile Landscape & Mobile: 1 Column
Helpers
Text Alignment: Text Center
Text Center
Text Center Tablet
Text Center Landscape
Text Center Mobile
Text Alignment: Text Left
Text Left
Text Left Tablet
Text Left Landscape
Text Left Mobile
Text Alignment: Text Right
Text Right
Text Right Tablet
Text Right Landscape
Text Right Mobile
Margin: X
MX-Auto: Margin X Auto
Margin: Y
MY-0: Margin Y 0
Margin: Top
MT-0: Margin Top 0
MT-0: Margin Top 0
MT-1: Margin Top 1 Unit
MT-2: Margin Top 2 Units
MT-3: Margin Top 3 Units
MT-4: Margin Top 4 Units
MT-5: Margin Top 5 Units
MT-6: Margin Top 6 Units
MT-7: Margin Top 7 Units
MT-8: Margin Top 8 Units
Margin: Bottom
MB-0: Margin Bottom 0
MB-0: Margin Bottom 0
MB-1: Margin Bottom 1 Unit
MB-2: Margin Bottom 2 Units
MB-3: Margin Bottom 3 Units
MB-4: Margin Bottom 4 Units
MB-5: Margin Bottom 5 Units
MB-6: Margin Bottom 6 Units
MB-7: Margin Bottom 7 Units
MB-8: Margin Bottom 8 Units
Display: Responsive
Display Desktop
Display Tablet
Display Landscape
Display Landscape
Display Mobile
Display Mobile
Display: Hide
Hide
Icons
  • In order to avoid impacting on the page speed load we will now use SVG icon with the "currentColor" feature.
  • Below you can find some of the icons use, feel free to include any additional icon if needed.
Buttons
Book Now
Display Tablet
Book Now
Display Landscape
Display Landscape
Book Now
Display Mobile
Display Mobile
Book Now
Display Mobile
Display Mobile
Book Now
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sections
Section: General Section
General Section: Setup with margins. Margin top and bottom: 4 units
Section: Filled Section
Filled Section: Base for filled sections, setup with padding. Padding top and bottom: 4 units
Containers
Container: Max Width: 1600px, Padding X: 2rem
Container + Container Full on Mobile: Max Width: 1600px, Padding X: 2rem / Padding X on mobile: 0
Container Full on Desktop
Container + Container Full on Desktop: Max Width: none, Padding X: 4rem / Padding X on mobile: 0
Container + Container Narrow: Max Width: 800px;
Container + Mobile: Max Width: 800px;