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

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

Colors
  • Colors defined here are global.
  • Please edit the colors below to match the office color scheme. If you need to add more color, save them as swatches and add them here.
  • You can use this "Coolors" Tool to generate the palette.
White
White 050
Text
CTA
CTA Hover
Primary Darker
Primary Dark
Primary
Primary Medium
Primary Light
Primary Light Medium
Primary Soft
Primary Soft Medium
Primary Overlay
Secondary
Overlay
Shadow
Body gray
Text Color
Text White
Text Primary
Text Size
Text Large
Text Small
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

Section Heading

Section Subheading

Section Subtitle

Section Subheading + Smaller (combo class)

Section Subheading + Larger (combo class)

pre title

Section Tagline
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 Tablet
Display Landscape
Display Landscape
Display Mobile
Display Desktop
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
Button Text Here
Button Text Here
Button Text Here
Button Text Here
Button Text Here
Button Text Here
Forms
Form: Dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form: White
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
Combo Class: Filled Section + Background Main Darker +  Color:White;
Combo Class: Filled Section + Background Main +  Color:White;
Combo Class: Filled Section + Background Main Soft Medium
Combo Class: Filled Section + Background Gradient + Text White
Combo Class: Filled Section + Background Gradient + Text White
Combo Class: Filled Section + Background Image Overlay + Text White
Combo Class: Filled Section + Filled Section Padless + Background Main Dark+  Color:White;
Boxed Content
Boxed Content: Normal
Boxed Content: Base for boxed sections, setup with padding. Padding top and bottom: 4 units
Boxed Content + Background Main Dark + Text White
Boxed Content: Medium
Boxed Content: Base for boxed sections, setup with padding. Padding top and bottom: 2 units
Boxed Content MD+ Background Main Dark + Text White
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;
Actions
Close Modal
Open Book Modal
Open Bio 1 Modal
Open Bio 2 Modal
Open Bio 3 Modal
Open Bio 4 Modal
Open Bio 5 Modal
Dr. Azita Bahrami
DMD
Meet Dr. [Name Link Dr's Individual Page] →
[Doctor’s full name 02]
JoB Title
Meet Dr. [Name Link Dr's Individual Page] →
We are dedicated to providing a higher standard of care and improving lives in our community through healthier, more comfortable smiles.

We’re reinventing dentistry

Dolor purus non enim praesent. Ultrices mi tempus imperdiet nulla. Mauris a diam maecenas sed. Et netus et malesuada fames ac turpis egestas maecenas.

We have decades of clinical experience

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In egestas erat imperdiet sed euismod nisi.
✕

Dr. Name Last Name

DMD

SOME PARAGRAPHS INTRODUCING THE DOCTOR 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.

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!

Sample Image
AsSociations
FUN FACTS [if aplicable]
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Continue the doctor's bio here

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.

✕

Book Your Appointment Today!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.