Style Guide


Header Styles

Heading h1

This is a heading h1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Heading h2

This is a heading h2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Heading h3

This is a heading h3 set in 18px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Heading h4

This is a heading h4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Heading h5

This is a heading h5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Heading h6

This is a heading h6. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

List Styles

Unordered List
  • Lorem ipsum dolor sit amet.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
Ordered List
  1. Cras ornare tristique elit.
  2. Vivamus vestibulum nulla nec ante.
  3. Praesent placerat risus quis eros.
  4. Fusce pellentesque suscipit nibh.

Link Styles

Primary Link Button Modal Link Button

Large Link Button

Regular Text Link  Alt Link Button Modal Link Alt Button


 

Instructions

Homepage Background

This is managed under Content Editor > Content Blocks. Here you can edit the Content Block 'Homepage Background' or 'Add A New Content Block' and give it the 'Group' or 'Homepage Background. Upload your image, save, and you are good to go!

Homepage Header Content

This text can be added or edited under Content Editor > Content Blocks > Homepage Header. You have the ability to add your own text and change the button link and text. 

Featured Products

These products are added to the Homepage through the Product Group 'Featured Products'. After clicking on a product, it can be added under Categories > Product Groups > Featured Product. 

Image Content Sections ('Become a member' and 'We aim to please')

These are content blocks. To add one go to Content Editor > Content Blocks > Add A Content Block > select the 'Group' of 'Homepage Image Content Section'. To edit one go to Content Editor > Content Blocks > Homepage Image Content Section. You can then add your content and an optional button. 

Homepage Content

This text can be edited under Content Editor > Homepage. 

Newsletter

This form is connected to the Contact Type of 'Newsletter'. Any user who fills it out will be added to that contact type. The title 'Newsletter Sign Up' can be edited under Content Editor > Pods > Newsletter Title.

Footer Left

The title is a pod and can be edited under Content Editor > Pods > Footer Left Title.  The pages that display underneath are managed in the Content Editor. To add or remove a page from the footer, select the page, click Page Properties, for Footer Menu select Yes or No.

Footer Middle

This title and text is a pod and can be edited under Content Editor > Pods > Footer Middle Content.
The social media icons available to use are Facebook, Twitter, Google Plus, Pinterest, Instagram, Vimeo, Youtube, and Yelp. These are not editable and must be changed by our design team. During the setup process, please send the corresponding links to your project manager. 

Footer Right

This title and text is a pod and can be edited under Content Editor > Pods > Footer Right Content. 

 

Did you break something?


Luckily for you we have included the default HTML and CSS files for this template that you can download right here.

HTML      CSS