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.

In eget ligula id ex semper consectetur. Proin pulvinar placerat varius. Nunc vel elementum risus. Praesent efficitur maximus ultricies. Quisque lobortis dui ultricies orci aliquet scelerisque. Vivamus sit amet nisi laoreet erat finibus commodo. Duis vitae sapien tincidunt nulla sollicitudin sollicitudin vel fringilla eros. Nullam viverra eros at nisl volutpat, quis rhoncus neque auctor.

This is an example of a blockquote element. A blockquote is generally larger text with some sort of design element to signify that this is a quote or special statement.
Proin turpis tellus, vehicula nec ornare sed, accumsan in lacus. Phasellus aliquet, metus non pulvinar porta, nisl lacus sagittis nulla, a pharetra arcu lectus eu nunc. Curabitur imperdiet viverra ultrices. Curabitur augue odio, dignissim non felis sed, faucibus suscipit nisi. Curabitur ullamcorper, enim sed auctor accumsan, ipsum mauris egestas risus, sed tincidunt purus lorem et tortor.

Link Text (.link)
Strong Text (.font-bold)
Italic Text (.italic)

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


  • 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
Global Button Style 1

Colors

  • You can add, edit, or remove colors using tailwind.js
Theme1 / Red #d72500
Theme2 / Blue #137073
Orange #e86e12
Olive #798365
Olive Light #d8ddc9
White #FFFFFF
Grey Light #DAE1E7
Grey #B8C2CC
Grey Dark #8795A1
Black #14181c
Red (Errors) #d72500
Yellow (Warnings) #f7d200
Green (Confirmations) #07b736

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

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

The area in red is the browser width. Background images must be large enough to fill the red area.

This grey area is the container width. All written content and inline images are fit into this grey area.

Big Game Gear For Big Game Hunters.

Right check, Doc. Hello, hello, anybody home? Think, McFly, think. I gotta have time to get them re-typed. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired. You wouldn’t want that to happen would you? Would you? Hey kid, what you do, jump ship?

:hover

Click to copy, press space to pin

See What The EHG Tribe Is Up To.

Instagram has returned invalid data.
Meet the Tribe Visit #EHGTribe
You Don't Quit, Neither Does Our Gear.

Manufactured To Be As Demanding As Nature.

You know Marty, I’m gonna be very sad to see you go. You’ve really mad a difference in my life, you’ve given me something to shoot for. Just knowing, that I’m gonna be around to see 1985, that I’m gonna succeed in this. That I’m gonna have a chance to travel through time. It’s going to be really hard waiting 30 years before I could talk to you about everything that’s happened in the past few days. Einstein has just become the world’s first time traveler. I sent him into the future. One minute into the future to be exact. And at exactly 1:21 a.m. we should catch up with him and the time machine. That’s him.

:hover

Click to copy, press space to pin

Manufactured To Be As Demanding As Nature.

You know Marty, I’m gonna be very sad to see you go. You’ve really mad a difference in my life, you’ve given me something to shoot for. Just knowing, that I’m gonna be around to see 1985, that I’m gonna succeed in this. That I’m gonna have a chance to travel through time. It’s going to be really hard waiting 30 years before I could talk to you about everything that’s happened in the past few days. Einstein has just become the world’s first time traveler. I sent him into the future. One minute into the future to be exact. And at exactly 1:21 a.m. we should catch up with him and the time machine. That’s him.

:hover

Click to copy, press space to pin

You Don't Quit, Neither Does Our Gear.
Big Game Hunting Gear
Big Game Hunting Gear

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

Shop Big Game Hunting Gear
The EHG Tribe
The EHG Tribe

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

The EHG Tribe
Turkey Hunting Gear
Turkey Hunting Gear

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

Shop Turkey Hunting Gear
Fishing Gear
Fishing Gear

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

Shop Fishing Gear
Big Game Hunting Gear
Big Game Hunting Gear

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

Shop Big Game Hunting Gear
The EHG Tribe
The EHG Tribe

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

The EHG Tribe
Turkey Hunting Gear
Turkey Hunting Gear

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

Shop Turkey Hunting Gear
Fishing Gear
Fishing Gear

Think, McFly, think. I gotta have time to get them retyped. Do you realize what would happen if I hand in my reports in your handwriting. I’ll get fired.

Shop Fishing Gear

Video Call To Action Module

I Am the Product Call to Action Title

I am the Subtitle

https://sites/prd.paramountoutdoors.matchbox.host/files.youtube.com/watch?v=HpX1mDEw1gk