Colors

primary: #0255A6

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

secondary: #2B344F

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

tertiary: #7697CB

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

accent-1: #FC8003

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

accent-2: #FCD203

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

accent-3: #941077

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

accent-4: #0AA6A1

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

accent-5: #5A1010

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

neutral: #B8C6CF

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

notice: #0B76B7

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

alert: #FBBF24

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

error: #F23030

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

success: #22AD5C

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

Typography

Typefaces

  • Primary Font (body) - Inter

Headings

Header 1 text with mark

Header 2 text with mark

Header 3 text with mark

Header 4 text with mark

Header 5 text
Header 6 text

Header 1 text with mark

Header 2 text with mark

Header 3 text with mark

Header 4 text with mark

Header 5 text
Header 6 text

Header 1 text with mark

Header 2 text with mark

Header 3 text with mark

Header 4 text with mark

Header 5 text
Header 6 text

Body Text

Large paragraph body text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere molestias nesciunt, obcaecati officia praesentium temporibus velit? Aliquid atque culpa delectus, dignissimos dolores, ipsa libero neque non saepe soluta veniam veritatis.

I'm a link, you can click me

Text & Headings (Base)

sit ipsum amet adipisicing consectetur

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Illo accusantium amet aut cumque consectetur

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Soluta accusantium doloremque cumque laboriosam

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Animi amet hic soluta dolore

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic hic maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Amet dignissimos amet sit dolor dignissimos

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore dignissimos dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Text & Headings (Strong)

sit ipsum amet adipisicing consectetur

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Illo accusantium amet aut cumque consectetur

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Soluta accusantium doloremque cumque laboriosam

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Animi amet hic soluta dolore

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic hic maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Amet dignissimos amet sit dolor dignissimos

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore dignissimos dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Text & Headings (Caption)

sit ipsum amet adipisicing consectetur

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Illo accusantium amet aut cumque consectetur

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Soluta accusantium doloremque cumque laboriosam

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Animi amet hic soluta dolore

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic hic maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Amet dignissimos amet sit dolor dignissimos

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore dignissimos dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at consequuntur cum delectus, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium amet animi aut cumque dignissimos dolore doloremque consequuntur cum delectus dolorum eveniet impedit iure officia officiis, quaerat quidem quo quod soluta voluptate voluptatibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid at, deserunt et excepturi illo laboriosam nostrum quidem repellat saepe vero voluptas voluptate. Dolorem hic laborum maiores!

Lists

Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons

filled (default)

primary secondary tertiary accent-1 accent-2 accent-3 accent-4 accent-5 neutral _black
_white

hollow

primary secondary tertiary accent-1 accent-2 accent-3 accent-4 accent-5 neutral _black
_white

chip

primary secondary tertiary accent-1 accent-2 accent-3 accent-4 accent-5 neutral _black
_white

naked

primary secondary tertiary accent-1 accent-2 accent-3 accent-4 accent-5 neutral _black
_white

Pagination

Tables

Years President Vice President
2021 - Present Joe Biden Kamala Harris
2017 - 2021 Donald Trump Mike Pence
2009 - 2018 Barack Obama Joe Biden
2001 - 2009 George W. Bush Richard Cheney
1993 - 2001 Bill Clinton Albert Gore

Forms

Gravity Form

Native Form Elements

Cards

Y Card - 1 (Blog Post)

Y Card - 4 (Blog Post - Alt)

Y Card - 2

Y Card - 3

X Card - 1

Z Card - 1

Y Card - 1 - no body

Y Card - 5

Y Card - 6

Y Card-7 (Testimonial)

SVGs

alert

building

cart

catalog

chevron-left

chevron-right

community

error

file

ill

libby

location

magnifying-glass

meeting-rooms

my-account

notice

open

phone

placeholder

printing

purchase-request

quotations

social-facebook

social-google

social-instagram

social-linkedin

social-pinterest

social-tiktok

social-x

social-youtube

success

translate

Carousels

Default Settings

Alt one Alt two Alt three

Navigation bullets

Alt one Alt two Alt three

Navigation bullets and arrows

Alt one Alt two Alt three

Multiple items per view

Alt one Alt two Alt three

Navigation arrows on the outside

Alt one Alt two Alt three

Cards as the item type

Accordions

Default

Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.

Single Open

Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.

Toggle Text

Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.

No Toggle Icon

Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.
Accordion Item
Learn More
This is some content for the accordion item one. Amet mattis vulputate enim nulla. Neque viverra justo nec ultrices dui sapien eget mi. Dui sapien eget mi proin sed. Risus ultricies tristique nulla aliquet. Mi bibendum neque egestas congue quisque egestas. Turpis massa sed elementum tempus egestas. Libero justo laoreet sit amet cursus sit amet dictum. At erat pellentesque adipiscing commodo elit at imperdiet. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Sed viverra tellus in hac habitasse platea dictumst.

Spacing

Current Typography Values

  • Font Size:
  • Line Height:
Unit Name Padding Classes Margin Classes Modifier Pixels Visual Aid
0 p-0
py-0
px-0
pt-0
pb-0
pr-0
pl-0
 m-0
my-0
mx-0
mt-0
mb-0
mr-0
ml-0
 0em
2xs p-2xs
py-2xs
px-2xs
pt-2xs
pb-2xs
pr-2xs
pl-2xs
 m-2xs
my-2xs
mx-2xs
mt-2xs
mb-2xs
mr-2xs
ml-2xs
 0.125em
xs p-xs
py-xs
px-xs
pt-xs
pb-xs
pr-xs
pl-xs
 m-xs
my-xs
mx-xs
mt-xs
mb-xs
mr-xs
ml-xs
 0.25em
sm p-sm
py-sm
px-sm
pt-sm
pb-sm
pr-sm
pl-sm
 m-sm
my-sm
mx-sm
mt-sm
mb-sm
mr-sm
ml-sm
 0.5em
md p-md
py-md
px-md
pt-md
pb-md
pr-md
pl-md
 m-md
my-md
mx-md
mt-md
mb-md
mr-md
ml-md
 1em
lg p-lg
py-lg
px-lg
pt-lg
pb-lg
pr-lg
pl-lg
 m-lg
my-lg
mx-lg
mt-lg
mb-lg
mr-lg
ml-lg
 1.5em
xl p-xl
py-xl
px-xl
pt-xl
pb-xl
pr-xl
pl-xl
 m-xl
my-xl
mx-xl
mt-xl
mb-xl
mr-xl
ml-xl
 2em
2xl p-2xl
py-2xl
px-2xl
pt-2xl
pb-2xl
pr-2xl
pl-2xl
 m-2xl
my-2xl
mx-2xl
mt-2xl
mb-2xl
mr-2xl
ml-2xl
 2.5em
3xl p-3xl
py-3xl
px-3xl
pt-3xl
pb-3xl
pr-3xl
pl-3xl
 m-3xl
my-3xl
mx-3xl
mt-3xl
mb-3xl
mr-3xl
ml-3xl
 3em
4xl p-4xl
py-4xl
px-4xl
pt-4xl
pb-4xl
pr-4xl
pl-4xl
 m-4xl
my-4xl
mx-4xl
mt-4xl
mb-4xl
mr-4xl
ml-4xl
 4em
5xl p-5xl
py-5xl
px-5xl
pt-5xl
pb-5xl
pr-5xl
pl-5xl
 m-5xl
my-5xl
mx-5xl
mt-5xl
mb-5xl
mr-5xl
ml-5xl
 5em
6xl p-6xl
py-6xl
px-6xl
pt-6xl
pb-6xl
pr-6xl
pl-6xl
 m-6xl
my-6xl
mx-6xl
mt-6xl
mb-6xl
mr-6xl
ml-6xl
 6em
7xl p-7xl
py-7xl
px-7xl
pt-7xl
pb-7xl
pr-7xl
pl-7xl
 m-7xl
my-7xl
mx-7xl
mt-7xl
mb-7xl
mr-7xl
ml-7xl
 10em