ATOMS
GLOBAL
BRAND COLORS
NEUTRAL COLORS
UTILITY COLORS
FONTS
Primary font: “Stellar Bold”, sans-serif;
Primary font italic: “Open Sans Regular”, sans-serif;
BUTTONS
BUTTONS
TEXT BUTTONS
BASIC FORM FIELDS / ELEMENTS
TEXT FIELD
TEXTAREA
SELECT
RADIO
CHECKBOX
Gravityform sample
IMAGES
HERO IMAGE
POST DYNAMIC FEATURED IMAGE
IMAGE MASKS
class="image-mask-1"
class="image-mask-2"
class="image-mask-3"
TEXT
Base HTML = 15px
Modular scale = 1.618
Line Height = 1.25
x2 Bases used for below scale
Base 15px + 18px (more options using 2)
http://www.modularscale.com/?15,18&px&1.618
PLEASE NOTE: PX have been rounded off to reduce decimal places as requested by senior developer
HEADINGS
Specify the line height here if changed from default
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
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)
Sub heading style
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
.small-dots
- 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
.list-group .check-list
- 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"]
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"]
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"]
[ff_news_query showposts=3][ff_news_query style="2" showposts="NUM_HERE"]
[ff_news_query style="2" showposts=3]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 ]
Faq content here…
Faq content here…
Custom Post Carousel – [ column_carousel ]
DIV 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