Styleguide

Typography

Heading 1 with gradient text
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Paragraph

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecat deserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse cupidatat id consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sint dolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.

Large Paragraph

This is Large Body copy Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco.

Small Paragraph

This is small pagagraph text example, great for breadcrumbs and disclaimer text. Aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco

Inline text elements

This line rendered as bold text.

This line rendered as italicized text.

This line of text is meant to be treated as fine print.

Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Consectetur adipiscing elit
  2. Nulla volutpat aliquam velit
    1. Vestibulum laoreet porttitor sem
    2. Ac tristique libero volutpat at
  3. Eget porttitor lorem

Buttons

Showing button examples on a light background

General Styles

Primary Button Outline Button Text Button

Additional Options

Opens in new tab Download Button

Buttons

Showing button examples on a light background

General Styles

Primary Button Outline Button Text Button

Additional Options

Opens in new tab Download Button

Icons

  • icon-arrow-r
  • icon-filled-arrow-d
  • icon-globe
  • icon-profile
  • icon-social-linkedin
  • icon-social-youtube

Tables

This section also has a dark background theme applied.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Forms

Marketo

Marketo markup would look something like:

See the commented out code below this in the inspector or source code. Twig didn't want to render it as markup, without going further down the rabbit hole.

Basic Form

For projects not using Marketo, here are some basic field types.

Checkbox Group Label
Radio Group Label

Grid Column Examples

Single Columns

1 Column - 12col / 100%

1 Column - 11col / 91.66%

1 Column - 10col / 83.33%

1 Column - 9col / 75%

1 Column - 8col / 66.66%

1 Column - 7col / 58.33%

1 Column - 6col / 50%

1 Column - 5col / 41.66%

1 Column - 4col / 33.33%

1 Column - 3col / 25%

1 Column - 2col / 16.66%

1 Column - 1col / 8.33%

Multi Columns

Not showing all column variations, but follow a similar pattern as below to create multi-column layouts.

6col / 50%

6col / 50%

3col / 25%

9col / 75%

Columns Offsets

Not showing all column variations, but follow a similar pattern as below to create multi-column layouts.

1col with 0col Offset

1col with 1col Offset

1col with 2col Offset

1col with 3col Offset

1col with 4col Offset

1col with 5col Offset

1col with 6col Offset

1col with 7col Offset

1col with 8col Offset

1col with 9col Offset

1col with 10col Offset

1col with 11col Offset