Color Palette

  • $palette-dark
  • $palette-light
  • $palette-text
  • $palette-light-text
  • $palette-link
  • $palette-primary
  • $palette-border
  • $palette-success
  • $palette-error

Font Families

  • Playflair Display Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
  • DM Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
  • DM Sans Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
  • DM Sans Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
  • DM Sans Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Typography

Headings

Heading 1

Heading 1 Link

Heading 2

Heading 2 Link

Heading 3

Heading 3 Link

Heading 4

Heading 4 Link

Heading 5
Heading 5 Link
Heading 6
Heading 6 Link
Eyebrow

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, laboriosam nihil expedita aliquid architecto iure, dolore impedit. Doloremque modi, quasi obcaecati laudantium incidunt, tenetur nam accusamus error, tempore sequi illo.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam sint doloremque officiis ut, doloribus, totam mollitia dicta. Explicabo nemo est maxime recusandae placeat cum quae quidem, quia magni.

Blockquote Caption

Other Type

Strong Copy

Emphasized Copy

Inline Anchor Link

Small Copy

  • Onions
  • Tomatos
  • Beans
  1. Onions
  2. Tomatos
  3. Beans

Horizontal Rulers

Buttons

Styles

Default Alternate Hollow Instagram Has Icon Left Has Icon Right

Sizing

Small Default Large

Responsive

Expanded Expanded - Small Only

Action Buttons

Default

With Text

{Button Label} {Button Label}

Tab Buttons

Tab One Tab Two Tab Three

Filter Buttons

Cards

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut necessitatibus aperiam maiores sapiente.

Eyebrow

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut necessitatibus aperiam maiores sapiente.

Read The rest
Eyebrow

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut necessitatibus aperiam maiores sapiente.

Read The rest
Eyebrow

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis ut necessitatibus aperiam maiores sapiente.

Card Button

Forms

Inputs

Required fields are followed by *

uploaded file no file uploaded

Select

Radio + Checkboxes

Select An Option

Grid

@include grid-cell(12)
@include grid-cell(1)
@include grid-cell(11)
@include grid-cell(2)
@include grid-cell(10)
@include grid-cell(3)
@include grid-cell(9)
@include grid-cell(4)
@include grid-cell(8)
@include grid-cell(5)
@include grid-cell(7)
@include grid-cell(6)
@include grid-cell(6)

Spacing

@include grid-cell(5, 2)
@include grid-cell(5, 8)

Images

Default

alt text

Round

alt text

Video

Vimeo Player

YouTube Player

Maps

Modules

Module Pre Header

Module: Fifty Fifty

Module Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

IMAGE ALT

Module Pre Header

Module: Text Columns

Module Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo earum laboriosam nulla, dolores unde excepturi aliquam repellendus consequatur distinctio porro impedit omnis quae et neque, magni dolor maiores eligendi dicta.

Module Pre Header

Module: Logo Wall

Module Subtitle

IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT

Module Pre Header

Module: Gallery

Module Subtitle

IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT
IMAGE ALT

Module Pre Header

Module: CTA

Module Subtitle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti vel voluptatibus consequatur deserunt! Molestias deleniti explicabo fugiat saepe quis veniam architecto consectetur aliquam, adipisci, possimus distinctio a placeat itaque culpa!

Button Text

Module Pre Header

Module: Latest News

Module Subtitle

Advice

Tolerances are different for each different trade. Mitigate potential problems with communication in the procurement phase.

Image c/o: StructureCraft

Advice

Bonding is an issue for smaller companies, putting smaller or new companies at a disadvantage. For example, a small company has a smaller revenue stream and cannot afford to tie up all of their cash flow for one project. Installers are disqualified from bidding if they cannot get bonding.