Site Widths

Two sass variables in the settings layer control the maximum widths for the site. $site-max-width is the maximum width of the outermost container and therefore every element on the site. $layout-width is the maximum width for most site content.

The .page-layout Block

The block .page-layout is the outer container for all pages on the website. It extends the trump .grid-lines and its first child should be the element .page-layout__content.

Anytime a page-specific class is needed a modifier should be added to this block such as .page-layout--homepage.

This block and it's elements are intended to handle the bulk of vertical and horizontal spacing on page layouts. Therefore, developers should avoid applying outer margins and padding on components and they should endeavor to handle their page layout spacing needs with these classes.

This block has several elements that are intended for use in structuring pages. They are:

• .page-layout__section - A page's content should be divided up into sections using this element. All vertical spacing between content components should be handled with modifiers of this class. See the stylesheet for available spacing modifiers.
• .page-layout__section-container - This class is used to constrain content to the $layout-width and to ensure that content sits above the grid lines in the z-index.
• .page-layout__content-wrapper - This class is used to ensure that content sits above the grid lines in the z-index without constraining the width.

The golden rule of this layout setup is that no element from the level of .page-layout__section on up should ever have a max-width lower than $site-max-width. Any narrower container width should only ever be applied to a child of .page-layout__section. All of our decorative design elements described below depend on this.

Grid Lines

The trump class .grid-lines provides the 3 gray horizontal lines that are visible throughout the site. These elements appear consistently across all pages and designs often require them to sit between section backgrounds and content.

The .grid-lines class itself uses two absolutely positon pseudo-elements with gray borders to create the lines. The lines should always split the outer site width into 4 equal sections.

There are many situations where the grid lines need to appear between section backgrounds and section content. This is why .grid-lines was developed as a trump class and not an element of .page-layout. The trump class allows the lines to be included within page sections and components.

In order to maintain the illusion that the lines are continous .grid-lines must always stretch to the full site width. It should never be used within .page-layout__section-container.

There are two acceptable ways to include the lines in a section or component. They are:

• By extending (@extend %gridlines;) the placeholder object.
• By including an empty div with the class .grid-lines within a section or component.

In both cases you should be careful to ensure that lines are contained within the full site width and not some smaller container. The correct approach will depend on the z-indexing needs of the situation.

Colorblock

Much like .grid-lines, .colorblock is a trump class that adds a decorative psuedo-element. It adds a pink block of color that can be sized differently depending on the design. It has three size/position modifiers: .colorblock--left, .colorblock--right, and .colorblock--middle. It is never appropriate to apply .grid-lines and .colorblock to the same element because their use of pseudo-elements would conflict.

Brand Color Variables

• $bva-orange

• $neon-blue

• $dark-blue

• $peachy

• $pinkish

• $warm-white

• $warm-black

• $dark-brown

Web Utility Color Variables

• $darkest-grey

• $dark-grey

• $grey

• $light-grey

• $error-red

.svg-icon

Hero tall

Project Hero

Hero short

Hero short - single line with scribble

• `disabled [bool]` - adds disabled styles to the button
• `secondary [bool]` - adds secondary button styles
• `url [string]` - pass internal `/blog` or external `https://google.com` URLs.
• `button [bool]` - renders component as a `button` element

Primary Buttons:

Secondary Buttons:

Arrow CTAs:

Arrow CTAs:

Body Text Links

Lorem ipsum dolor click here sit amet.

Stand Alone Links

Props:

• title: String
• body: String
• imgName: String (name of file in images folder)
• altText: String (alt text for img)
• projectNum: String (text shows up in top left corner of card)
• link: String (link to project)
• size: Number (column size. Default is 12. Valid input is 1-12.)
• small: Boolean (set to true for short card height)
• fullWidth: Boolean (removes left and right padding for a 100% width card)

LET’S START
YOUR PROJECT