Utility Classes & Typography

Colors

This design set uses this color palette. To edit, go to Manage > Settings > Global Styles> Colors

primary
primary 2
primary 3
primary translucent
primary transparent
secondary
secondary 2
secondary 3
secondary
translucent
secondary transparent
black
white
gray 1
gray 2
black translucent
black transparent

Typography

This design set uses the standard CSS for headings, To update the headings, go to Manage > Stylesheet > Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum ipsum est, at auctor quam eleifend sed. Mauris purus mauris, malesuada eget interdum quis, euismod quis augue. Cras auctor lacus ut arcu rhoncus, vitae egestas risus condimentum. Nullam id molestie erat. Aliquam et risus a nisl ultrices varius. Pellentesque vitae consequat ante. In nec nunc in ligula semper venenatis. Donec eu est sapien. Ut imperdiet mollis risus id commodo. Praesent suscipit sapien ut scelerisque pulvinar. Aenean mollis, ligula vel ullamcorper cursus, risus dolor interdum eros, non vehicula nisi nunc et felis.

Font Family & Font Weights

This design only uses the following font families and font weights. To edit, go to Manage > Settings > Global Styles> Fonts

Display Font: Raleway (used for headings)
Enabled font weights: regular, 700, 900

Text Font: Nunito (used for paragraphs & blurbs)
Enabled font weights & styles: regular, italic, 700, 700 italic

Other Typography Classes

This design set only uses the FS classes from the standard typography in the design set. To find all standard typography classes go to Manage > Stylesheet > Typography 

fs-1

fs-2

fs-3

fs-4

fs-4

fs-6

fs-7

Buttons and other Design Classes

btn (Primary button)btn (Secondary button)

use case dark & light background section

ter-btn (tertiary button)

use case light background section

box-shadow

**boder radius used for boxes (10px)

text-highlight

use case pre-header

curved-seperator

use case highlight-heading

secondary button

use case light background section

Global Reusables

Global Services Section

Components:
- h2
- paragraph text enlarged
- dynamic service divs using parent page id to populate the data

Eget urna, laoreet posuere sit id quam etiam id scelerisque. Sit non est gravida etiams.

Auctor cursus egestas sapien, eget. Ac orci amet, massa, aliquet massa scelerisque ipsum pellentesque.

Global Locations Section

Components:
- h2
- paragraph text enlarged
- dynamic location divs using parent page id to populate the data
- map using custom fields (if section is needed, ACF must be set accordingly kindly ask export file from manager)

Eget urna, laoreet posuere sit id quam etiam id scelerisque. Sit non est gravida etiams.

Auctor cursus egestas sapien, eget. Ac orci amet, massa, aliquet massa scelerisque ipsum pellentesque.

Global Team Section

Components:
- h2
- 4 col div with team member image, name & position each

MEET

Our Doctor

Dr. Alan Ng

Dentist

Dr. Al truly believes in dentistry from the heart. He’s passionate about oral health and he treats every patient as a member of his family. He believes in having fun, and here at the office we try very hard to make our patients feel at ease from the moment they walk in the door.

Learn More about Dr. Al

Global Stat Section (Static)

Components:
- 4 col stat boxes
- static stat h3
- paragraph text stat label

25+

Years of Experience

35

Amazing employees

10k+

Hours of maintenance

2k+

Projects done

Global Page Title

Components:
- section with background image
- h1 with page title dynamically pulled from post/page

Design Components

Global Testimonial Section

Components:
- h2
- paragraph text enlarged 
- 3 col div with icon, testimonial message, star rating and customer name
- CTA button linked to google reviews or testimonial page

Testimonials

A friend referred me to this dentist Al… I wasn’t sure until today. Very HAPPY to get my most concerned problem fixed! He’s cheerful, professional and detail-oriented with great skills, especially he understands fully what I want and prioritize things and explain it very clearly. I am very impressed. so glad to find the right place for my future dental appointment.

M. Zhang

This has been the best experience i have ever had at any dentist. I would highly recommend AI dental. They helped me thru the complete process of getting dentures. For the first time i was comfortable going in for my appointments.

Brian T.

AL dental is the best dental services we have received for the last 50 years I have been living in Edmonton and go through few different dentists and truely AL dental is the one I felt comfortable and trust I have to give AL dental 5 stars for their excellent service and me and my wife will go back to enjoy the service and I will also recommend my children and friends. Keep up the good work.

Maggie T.

MORE TESTIMONIALS

Design Set Blocks

Dynamic Blog Post Section with Sticky Side Bar

Use Case: Single Blog Post Template
Components:
- CSS Code for styling content from default editor
- Date (dynamic)
- Fallback Image if Featured image is blank (**delete if not needed or add a new fallback image from site media library)
- Featured Image Dynamically pulled from post
- Post Content Dynamically pulled from default editor
- Sticky Sidebar Section
- Negative Margin to overlap page title section

February 8, 2022

This is content from the default editor

We offer free XXXX!

Lorem ipsum dolor sit amet, consectetur adipiscing elit

book appointment

Covering residential and commercial needs

KNOW MORE ABOUT OUR SERVICES

Intro text

Use Case: Can add to any inner page that is not using a template
Components: 
- h2
- paragraph text enlarged

Eget urna, laoreet posuere sit id quam etiam id scelerisque. Sit non est gravida etiams.

Auctor cursus egestas sapien, eget. Ac orci amet, massa, aliquet massa scelerisque ipsum pellentesque.

Intro text with image and buttons

Use Case: Can add to any inner page that is not using a template
Components: 
- image
- h2
- paragraph text
- 2 buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat, sem vitae iaculis semper, justo risus pharetra dui, at lacinia leo erat vitae est. Donec nec turpis enim. Nunc nec magna ac lacus pellentesque euismod. Praesent sapien turpis, tincidunt ac leo sit amet, pharetra fringilla ex. Fusce fringilla pulvinar tellus, ut fringilla tortor euismod nec. Aliquam in interdum nunc. Praesent congue facilisis sem. Nulla elementum orci libero, sed congue mauris ultricies sed. Aliquam nec quam neque. Aliquam diam eros, porttitor feugiat urna ut, vestibulum iaculis felis.

FAQs Section

Use Case: Can add to FAQs page or  to any inner page or template
Components: 
- image div
- h2
- paragraph text
- accordions

Frequently asked questions.

Malesuada velit et ut malesuada amet tempor velit dui. Nullam amet commodo gravida gravida.

Curabitur non nulla sit amet nisl tempus?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Quam at scelerisque in velit nisl ultrices neque fames?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Curabitur arcu erat, accumsan id imperdiet et?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Vestibulum ac diam sit amet quam vehicula?
Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

Page Banner

Use Case: Can add to any inner page or template
Components: 
- section with background image with overlay
- pre-heading
- h2
- cta button

About Us

Design Components

BOOK AN APPOINTMENT NOW!

Hero Banner with CTA and Contact Form

Use Case: Added as a hero section
Components: 
- 2 column section
- div with background image
- contact form shortcode
- pre-heading
- h1
- cta button
- cta button with image and phone number

Name(Required)

Services Feature

Use Case: Featured in the homepage
Components: 
- 3 column service divs that can be linked to the individual service page
- section with background image
- contact form shortcode
- h2
- paragraph text enlarged
- cta button
- text link

Lower than
Alberta Dental Fee Guide

BOOK AN APPOINTMENT TODAYview all services

About Us Feature 3 Columns with button

Use Case: Featured in the homepage
Components: 
- 3 columns
- h2
- paragraph text
- cta button for about page
- 2 USP feature divs with paragaph heading & curved separator each

Cras ultricies ligula sed magna dictum.

Pharetra sit pellentesque pellentesque pharetra viverra tempus quisque.

Learn more about us

Unique Selling Point 1

Unique Selling Point 2

chevron-right