ATOMS
GLOBAL
BRAND COLORS
NEUTRAL COLORS
UTILITY COLORS
FONTS
Primary font: 'Lato', sans serif
Secondary font: 'Lora', serif
Tertiary font: Not set
BUTTONS
TEXT BUTTONS
BASIC FORM FIELDS / ELEMENTS
TEXT FIELD
TEXTAREA
SELECT
RADIO
CHECKBOX
IMAGES
HERO IMAGE
POST DYNAMIC FEATURED IMAGE
IMAGE MASKS
class="image-mask-1"
class="image-mask-2"
class="image-mask-3"
TEXT
HEADINGS
Specify the line height here if changed from default
Heading Level 1 > 64px
Heading Level 2 > 48px
Heading Level 3 > 40px
Heading Level 4 > 36px
Heading Level 5 > 32px
Heading Level 6 > 24px
TEXT STYLES
Font size default = 1em / 15px (fs-default)
Minor = .993em / 14px (fs-minor)
Small = .8em / 13px (fs-small)
Sub script = .6667em / 11px (fs-sub)
Buttons text style (text-style-1)
Page Navigation (text-style-2)
Navigation page listings (text-style-3)
Breadcrumbs styles (text-style-4)
12px text only button (text-style-5)
Sub Heading (text-style-6)
INLINE ELEMENTS
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and
This text has a strikethrough
SuperscriptSup
Subscript for things like H2O
This small text is small for for fine print, etc.
PARAGRAPH
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula odio. Vestibulum
Blockquote
Nam porttitor blandit accumsan. Ut vel dictum sem, a pretium dui. In malesuada enim in dolor euismod, id commodo mi consectetur. Curabitur at vestibulum nisi. Nullam vehicula nisi velit. Mauris turpis nisl, molestie ut ipsum et, suscipit vehicula
TABLES
BASIC TABLE
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
STRIPED TABLE
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
BORDERED TABLE
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
LISTS
Unordered List
- List Item 1
- List Item 2
- List Item 3
Ordered List
- List Item 1
- List Item 2
- List Item 3
.list-group ul
- List Item 1
- List Item 2
- List Item 3
.list-group ol
- List Item 1
- List Item 2
- List Item 3
MOLECULES
WELLS + MEDIA
[custom_well heading="TEXT_HERE"] TEXT_HERE [/custom_well]
Custom Well (custom_well)
[custom_well heading="TEXT_HERE" icon="FONTAWESOME_CLASS_HERE"] TEXT_HERE [/custom_well]
Well with icon heading
[custom_well heading="TEXT_HERE" image="IMAGE_URL_HERE"] TEXT_HERE [/custom_well]
Image and text well
[point_listing heading="TEXT_HERE" icon="FONTAWESOME_CLASS_HERE"] TEXT_HERE [/point_listing]
Icon and point listing style (point_listing)
[point_listing heading="TEXT_HERE" number="NUMBER_HERE"] TEXT_HERE [/point_listing]
Heading
TESTIMONIALS
[box_item icon="FONTAWESOME_CLASS_HERE" heading="TEXT_HERE"] TEXT_HERE [/box_item]
Heading
Body<p> strong in here
[testimonial_item style="1" name="TEXT_HERE" title="TEXT_HERE" image="IMAGE_URL_HERE"]TEXT_HERE[/testimonial_item]
[testimonial_item style="2" name="TEXT_HERE"]TEXT_HERE[/testimonial_item]
[testimonial_item style="3" name="TEXT_HERE"]TEXT_HERE[/testimonial_item]
[testimonial_item style="4" name="TEXT_HERE" title="TEXT_HERE" image="IMAGE_URL_HERE"]TEXT_HERE[/testimonial_item]
[testimonial_item style="5" name="TEXT_HERE" title="TEXT_HERE" image="IMAGE_URL_HERE"]TEXT_HERE[/testimonial_item]
ACCORDION
FULL ROW LISTINGS
[row_listing text="TEXT_HERE" link="#LINK_HERE"]
[row_listing text="TEXT_HERE" text="TEXT_HERE" link="#LINK_HERE"]
FIGURE WITH CAPTION
[image_box text="TEXT_HERE" sub_text="TEXT_HERE" link="#LINK_HERE" link_text="TEXT_HERE" image="IMAGE_URL_HERE"]
TEAM PROFILE POST
[profile_item name="TEXT_HERE" position="TEXT_HERE" link="#LINK_HERE" image="IMAGE_URL_HERE"]
PRODUCT ITEM
[ff_product_item name='TEXT_HERE' price="TEXT_HERE" link="#LINK_HERE" image="IMAGE_URL_HERE"]
MISC
Notification
ORGANISMS
TEAM BLOCK OVERVIEW
[ff_team_overview]
[ff_team_overview heading="Other profiles" heading_class="f-15" showposts=9 class="carousel-cols-3 navigation-style-2 mt-50"]
Other profiles
INSTAGRAM FEED
[ff_instagram_carousel]
POST AUTHORS
[ff_post_author_box id="USER_ID_HERE" heading="TEXT_HERE"]
About the author
ICON CONTENT LIST BLOCK
[box_item icon="FONTAWESOME_ICON_CLASS" heading="TEXT_HERE"]TEXT_HERE[/box_item]
Heading
Body<p> strong in here
Heading
Body<p> strong in here
Heading
Body<p> strong in here
PRICING / PACKAGES
[ff_pricing_box heading="TEXT_HERE" price="PRICE_HERE" link_text="TEXT_HERE" link="#LINK_HERE"]TEXT HERE[/ff_pricing_box]
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
Listing Sub content next to primary
SERVICE BLOCK
[ff_service_item heading="TEXT_HERE" sub_text="TEXT_HERE" link_text="TEXT_HERE link="#LINK_HERE" bg_color="#HEX_CODE_HERE" bg_image="IMAGE_URL_HERE"]
NEWS
[ff_news_query showposts="NUM_HERE"]
Do you wake up feeling tired? Maybe thereβs something you can, or need, to do about it!
Unveiling the Magic of Clear Aligner Therapy: A Modern Approach to Straightening Your Smile
Maintaining Optimal Oral Health as You Age. Why is this important?
[ff_news_query style="2" showposts="NUM_HERE"]
Do you wake up feeling tired? Maybe thereβs something you can, or need, to do about it!
Unveiling the Magic of Clear Aligner Therapy: A Modern Approach to Straightening Your Smile
Maintaining Optimal Oral Health as You Age. Why is this important?
EVENT POSTS
[ff_event_item name="TEXT_HERE" category="TEXT_HERE" excerpt="TEXT_HERE" link="#LINK_HERE" link_text="TEXT_HERE" date="01 | Jan | 2017" time="7:00PM - 8:00PM"]
Event Name
FORMS
Signup for all the latest news + offers
CTA
[ff_cta class="style-1" heading="TEXT_HERE" text="TEXT_HERE" btn_text="TEXT_HERE" btn_link="#LINK_HERE"]
Heading here
[ff_cta class="style-2" heading="TEXT_HERE" text="TEXT_HERE" btn_text="TEXT_HERE" btn_link="#LINK_HERE"]
Heading here
[ff_cta class="style-3" heading="TEXT_HERE" text="TEXT_HERE" btn_text="TEXT_HERE" btn_link="#LINK_HERE"]
Heading here
[ff_cta class="style-4" heading="TEXT_HERE" text="TEXT_HERE" btn_text="TEXT_HERE" btn_link="#LINK_HERE"]
Heading here
ROTATION / CAROUSELS
[ff_logo_carousel heading="TEXT_HERE"]
[ff_logo_carousel_item image="IMAGE_URL]
[/ff_logo_carousel]
[ff_cta_carousel ff_cta_carousel="#COLOR_HEX_CODE_HERE"]
[ff_cta heading="TEXT_HERE" text="TEXT_HERE" btn_text="TEXT_HERE" btn_link="#LINK_HERE"]
[/ff_cta_carousel]
Heading here
Heading here
Heading here
[ff_testimonials_carousel heading="TEXT_HERE" limit=NUMBER]
Testimonials
SOCIAL MEDIA LINKS
[social_icons icons="facebook,twitter,googleplus,youtube,linkedin,instagram,pinterest,email,sharethis"]
[social_icons class="style-1" icons="facebook,twitter,googleplus,youtube,linkedin,instagram,pinterest,email,sharethis"]
[social_icons class="style-2" icons="facebook,twitter,googleplus,youtube,linkedin,instagram,pinterest,email,sharethis"]
[custom_social_icons class="" facebook="#url" twitter="#url" youtube="#url" google_plus="#url" instagram="#url" linkedin="#url" pinterest="#url" mail="#url" trip_advisor="#url"]
MISC SHORTCODES
[ff_meta_detail label="TEXT_HERE" value="TEXT_HERE" link="#OPTIONAL_LINK_HERE"]
[ff_meta_detail class="style-2" label="TEXT_HERE" value="TEXT_HERE" link="#OPTIONAL_LINK_HERE"]
OLD STYLES / ELEMENTS
Bootsrap Shortcode – [ bs_tooltip ]
Bootsrap Shortcode – [ bs_lead ]
Shortcode – [ boxed ]
Shortcode – [ query_faq ]
Custom Post Carousel – [ column_carousel ]
Maintaining Optimal Oral Health as You Age. Why is this important?
Health EducationDo I have my wisdom teeth and do I need to have them removed?
Health EducationDental extras or ancillary cover for dental: Is it worth it?
Health EducationThe patient-dentist relationship: Is your health fund interfering?
Health EducationDefine Dental, dentistry and COVID-19: Can I see the dentist?
Health EducationDIV Custom Scrollbar (.custom-scroll)
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width
Just add "custom-scroll" for your div that have a fix height or width, Just add "custom-scroll" for your div that have a fix height or width