Call Get Quote

Styleguide

Mobile Only

Typography

H1 Heading (.h1)

H2 Heading (.h2)

H3 Heading (.h3)

H4 Heading (.h4)

H5 Heading (.h5)

H6 Heading (.h6)

  • Unordered List Item 1
  • Unordered List Item 2
    1. Ordered List Sub Item 1
    2. Ordered List Sub Item 2
    3. Ordered List Sub Item 3
  • Unordered List Item 3
    • Unordered List Sub Item 1
    • Unordered List Sub Item 2
    • Unordered List Sub Item 3
  • Unordered List Item 4
  1. Ordered List Item 1
  2. Ordered List Item 2
    • Unordered List Sub Item 1
    • Unordered List Sub Item 2
    • Unordered List Sub Item 3
  3. Ordered List Item 3
    1. Ordered List Sub Item 1
    2. Ordered List Sub Item 2
    3. Ordered List Sub Item 3
  4. Ordered List Item 4

.leading-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-tighter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-tight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

.leading-loose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

Link Text (.link)
Strong Text (.font-bold)
Italic Text (.italic)
Font Sans (.font-sans)
Font Sans (.font-serif)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

This is an example of a blockquote element. A blockquote can be a testimonial, quote, or callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nibh vel lacus accumsan dapibus. Fusce sit amet malesuada turpis, vel facilisis eros. Donec venenatis vestibulum massa, in bibendum est cursus sed. Nunc vel ultrices turpis. Sed risus enim, convallis vitae nulla elementum, vehicula consequat augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin congue laoreet tellus quis mollis. Morbi eget turpis est. Fusce gravida at tortor ut pulvinar. Sed efficitur sem eget lacus vulputate, at blandit quam aliquam.

Font Sizes

Text xs is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text sm is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text base is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text lg is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 2xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 3xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 4xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text 5xl is exactly this size. The quick onyx goblin jumps over the lazy dwarf

Text links

  • You can configure the color of text links using tailwind.js
This is a text link example. This is what text links look like.

Buttons

  • Basic sitewide button styles
  I am a button   I am disabled

Colors

  • You can add, edit, or remove colors using tailwind.js
Theme1 #96021e
Theme2 #01264c
Theme 3 #ffaa00
White #FFFFFF
Grey Light #eaeaea
Grey #6a7378
Grey Dark #545454
Black #14181c
Error #AA202C
Warning #f7d200
Success #07b736

Search Form

Gravity Forms

  • Shows labels and sub-labels by default
  • Add class "hide-labels" in form settings to hide ALL labels.
  • Add class "hide-sub-labels" to hide ONLY sub-labels.

Example:

Contact Us

  • This field is for validation purposes and should be left unchanged.

Content Container Width

This area is the width of the browser window.

Background images need to be large enough to fill this area on large screens.

This grey area is the width of the ".container" class.

This class controls the width of content on every page.

Right now this container is:

100% width

Page Builder Modules

I am the basic table module
Label 1

Value 1 Duis tristique condimentum rhoncus.

Label 2

Value 2 Integer ac semper est.

Label 3

Value 3 Duis accumsan felis et rhoncus congue.

Label 4

Value 4 Sed eget felis a turpis fermentum euismod.

Label 7

Value 7 Lorem ipsum
Label 5

Value 5 Duis porta luctus iaculis.

Label 6

Value 6 Morbi purus mi.
I am the comparison table module
Cycle Speed N/A N/A N/A N/A
Drive N/A N/A N/A N/A
Max Compression N/A N/A N/A N/A
Plate/Clinch Size N/A N/A N/A N/A
Ink Cup N/A N/A N/A N/A
Ink Cup Size N/A N/A N/A N/A
Weight N/A N/A N/A N/A
Maximum Print Size N/A N/A N/A N/A
Test Spec 1 N/A N/A N/A N/A
Test Spec 2 N/A N/A N/A N/A
I am a content wysiwyg module I have a wysiwyg table inside of my content area.

I am the wysiwyg table
Label 1 Value 1a Value 1b
Label 2 Value 2a Value 2b
Label 3 Value 3a Value 3b
Label 4 Value 4a Value 4b

 

asdfasdfasdf dasdf
asdfasdfas
Content Split 1 Title

Content Split 1 Content

  test
Content Split 1 Title (Alternating)

Content Split 1 Content

  Test
Content Split 2 Title

Content Split 2 Content

  Button Text
Content Split 2 Title (Alternating)

Content Split 2 Content

Content Split 3 Title

Content Split 3 Content

  Button Text
Contact Form Title
Contact Form Subtitle
This is the contact form module content area.
  • This field is for validation purposes and should be left unchanged.

Content Centered 1 Title

Content Centered 1 Subtitle

Content Centered 1 Content

  Button Text

Content Centered 2 Title

Content Centered 2 Subtitle

Content Centered content

Content Featured 1 Title

Content Featured 1 Content

  Button Text
Stay in Touch with Tax Stamping
  • This field is for validation purposes and should be left unchanged.
  Request a Quote
© 2024 ITWIDS