Hero Module

Style Guide

Two Column Pattern Module

Here’s an example of one of the ‘harder working’ modules on the website. You’ll use a module like this one to display larger amounts of text for when you have a lot to say about something. An example of how to use this might be as an introduction to a page, setting a header font in the left column and WYSIWYG text in the right column.

In viverra bibendum auctor. Maecenas molestie mi a elementum maximus. Vivamus laoreet massa ut mi rhoncus finibus. Donec at mollis nibh. Quisque ante dolor, lacinia a eleifend in, feugiat ut diam. Fusce ac purus ligula. Ut consequat quam lectus. Donec malesuada quis ex ac placerat.

Here’s another example of one of the ‘harder working’ modules on the website. You’ll use a module like this one to display larger amounts of text for when you have a lot to say about something. You also have the ability to add formatted buttons, links, and subheads that are inline with the style for the site.

Black (#231f20)
White(#fff)
Off White (#e1e1e1)
Gray (#999999)
Light Gray (#F5F5F5)
Dark Gray (#5a5a5a)
Orange (#f89a21)

Arrow Link

Button

Charming kitchen design — Image One Caption

Wonderful dining area — Image Two Caption

Holmes Built House with Pool — Full width Image module with (optional) caption set to 100% width.

Full width Image module with (optional) caption set to 50% width.

This is the same ‘Centered Copy Block’ module as higher in the page, but this time we’re showing you how to use some more custom typography styles. Please note that while we hardcode in may of these styles, you’re free to use them at your own discretion as there are no hard-and-fast rules for their usage.

H1: Heading 1

The Heading 1 style is primarily used in the Hero modules and is usually hardcoded into that area. In the context of a webpage, think of it’s use mostly as the title of the page. (Mobile: 32/32 | Desktop: 48/48)

H2: Heading 2

The Heading 2 style is used a bit more often than the Heading 1 style. You’ll often find this style used as an introduction to a section or page (as seen in the two column pattern module example above). In the context of a webpage, you can think of H2’s as section titles related to the H1 of the page. (Mobile: 24/28 | Desktop: 36/48)

H3: Heading 3

The Heading 3 style is primarily used in the Project/Perspective callouts and listing for their titles. In the context of a webpage, you can think of it as topics, related to the H2 section title. (Mobile: 18/21 | Desktop: 28/32)

H4: Heading 4

The Heading 4 style is one of the least used header styles. It is used for employee names on the People page. In the context of a webpage, you can think of an H4 as a sub-topic related to the H3 above it. (Mobile: 16/21 | Desktop: 21/24)

H5: Heading 5

The Heading 5 style is frequently used throughout the site for both section titles (i.e. Projects Callout, Call To Action Module below), as well as titles of project and employee job positions. In the context of a webpage, we are not using this header semantically, only for it’s style attributes. (Mobile: 12/14 | Desktop: 14/16)

H6: Heading 6

See Heading 5 above, except this style uses slightly lighter font-weight. (Mobile: 12/14 | Desktop: 14/16)

Pull quote (Mobile: 32/32 | Desktop: 48/48) ligula porta felis euismod semper.

Large body (Mobile: 16/24 | Desktop: 21/32) aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in.