Style Tile

Table of Contents

Colors

Primary Color Palette

primary-95
primary-50
primary-30
primary-15

Secondary Color Palette

secondary-95
secondary-60

Tertiary Color Palette

tertiary-95
tertiary-80

Neutral Color Palette

neutral-100
neutral-80
neutral-40
neutral-10
neutral-00

Headings

Hero Heading

36px to 66px

Heading 1

42px to 56px

Heading 2

32px to 36px

Heading 3

23px to 32px

Heading 4

20px to 24px

Heading 5

18px to 20px

Heading 6

16px to 18px

Paragraphs (Body Text)

Small: 12.5px to 14px
Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Medium: 14px to 16px
Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Large: 16px to 18px
Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

XLarge: 18px to 20px
Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.


Buttons & Links


Numbered List

  1. Nuutsumuut Lelum
    • Nuutsumuut Lelum
  2. Nuutsumuut Lelum
  3. Nuutsumuut Lelum

Style Variation: No Bullet

  1. Nuutsumuut Lelum
    • Nuutsumuut Lelum
  2. Nuutsumuut Lelum
  3. Nuutsumuut Lelum

Bulleted List

  • Nuutsumuut Lelum
    • Nuutsumuut Lelum
  • Nuutsumuut Lelum
  • Nuutsumuut Lelum

Style Variation: No Padding

  • Nuutsumuut Lelum
    • Nuutsumuut Lelum
  • Nuutsumuut Lelum
  • Nuutsumuut Lelum

Longer List Example

  • At vero eos et accusam et justo duo dolores et ea rebum.
  • Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
    • Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  • At vero eos et accusam et justo duo dolores et ea rebum.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Quotes

Pullquote

“Pull quote style at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.”

Pull quote contributor, Firstname Lastname

Blockquote

“Blockquote style at vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.”

Blockquote contributor, Firstname Lastname

Tables

Default TableColumn 1Column 2
Nuutsumuut LelumNuutsumuut LelumNuutsumuut Lelum
Nuutsumuut Lelum
Nuutsumuut LelumNuutsumuut LelumNuutsumuut Lelum
Nuutsumuut LelumNuutsumuut Lelum
Optional Footer RowOptional Footer RowOptional Footer Row
This is a table caption
Sticky TableColumnColumnColumnColumnColumn
Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Nuutsumuut LelumStet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
Nuutsumuut LelumStet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.
Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.!Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.Stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.

Details

Details Block

Best used for simple collapsible information.

Details Block

Best used for simple information.

Details Block

Best used for simple information.


Accordions

Best used for organized, multi-section content with controlled interaction between sections. This component allows only one section to be expanded at a time, and you can customize the heading level.

Content

Content

Image

Image with a caption.

Video

This is a video with caption text and a poster image.

Gallery

Cover

A cover block displays text over an image.

File

Media & Text

Media & Text Block

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Media & Text Block

Style Variation – No Padding

Removes the padding around the text-content so that it aligns with the rest of the page contents.

Gravity Forms

Example Form

"*" indicates required fields

Section Break

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.
Name*
Email*
Please let us know what's on your mind. Have a question for us? Ask away.

Hero, Interior

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

This is an example of a link.

Section

Cards, Grid

Card 1

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Card 2

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Cards, Side by Side

Heading…

Heading…

Heading…

Cards, Checkerboard

Cards, Checkerboard

Cards, Checkerboard

Call to Action

News: Recent

News: Current Year

News: Previous Years

Payment Standards Lookup

Default Tabs

Default Tabs

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Tab Label…

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Tab Label…

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Side Tabs

Side Tabs

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Tab Label…

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Tab Label…

Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

Slider – Image Only

    Slider – Image + Text

    • Slide 1

      Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

    • Slide 2

      Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.

    • Slide 3

      Mauris vel gravida nisl. Nullam nisl neque, dictum ut sollicitudin eu, imperdiet dignissim ipsum. Suspendisse imperdiet metus eu euismod tempus.