Site Kit

01. Typography

H1-H6 values are coded in /scss/components/typography and follows the Major Third typescale. If you want to use a heading widget with a div tag or text area widget and apply a heading style, you can apply the h1, h2, h3, h4, h5, or h6 class.

When the hero class is applied to a section, any h1's within that section will get a special size. If you wish to use the hero h1 outside of a section with the hero class, you can use the h1-hero class on the element.

Do NOT use primary, secondary, text, or accent font definitions. They aren't set, but cannot be deleted.

Try and not diverge from the defined styles unless absolutely necessary. One-offs can be treated as such and be created "inline" without a saved font definition.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is the default body definition

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Other body styles

Body LG: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Body LG Bold: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Body Reg Bold: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Body SM: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta

02. Buttons

Schedule a Call with Us

Invert: Confirm with Jason

The squiggle link buttons require a mockup in Figma for the exact text to be used and then the SVG code copied within the HTML. Remove inline stroke color definitions from the SVG.

03. Making Pages

Don't forget to set metabox options for the page. This sets whether the menu is transparent for the page and the primary background color (typically black; defaults white). This is not required on any posts pages.

04. Making Sections

It is always preferred that sections are "nested" logically and functionally; use your discretion based on existing pages.

For single "row" sections: We follow the 2 deep pattern meaning for a section with only one row we have 2 containers, one within the other, with the 2nd container containing the widgets. Paddings remain on the 2nd container (are not 0'd out).

For multi-row sections and nested containers the 3rd most nested container must be 0'd out. Functionally, the 1st OR 2nd container can be 0'd out so long as 2 of the containers have default paddings. If you are unsure, verify the alignment to the header logo with guides on desktop, tablet, and mobile (check all three).

We have 2 utility classes that can be applied to sections to adjust font color: bg-black and bg-white. Apply to the outermost applicable container for that section/nested section.

Black section

There is a link within below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

White section

There is a link within below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

05. Using Spacers

Spacers can be applied as classes under Advanced -> Layout -> CSS Classes on either Widgets or containers. It is always preferred to space containers. For a margin bottom the class begins with mb- and after the dash goes the desired spacing. The values below are desktop values collapse down on tablet/mobile to smaller spacings (f.e. xxl goes down to lg).

my-{spacing} = margin top and bottom. Do not use with mt- or mb-; use when you want the same margin top and bottom.

mt-{spacing} = margin top

mb-{spacing} = margin bottom

py-{spacing} = padding top and bottom

pt-{spacing} = padding top

pb-{spacing} = padding bottom

ps-{spacing} = padding left

pe-{spacing} = padding right

Site Kit

Table of Contents

01. Typography

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

02. Buttons

03. Making Pages

04. Making Sections

05. Using Spacers