Tusk Brands Overview

Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit phasellus mollis sit aliquam sit nullam. Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit phasellus mollis sit aliquam sit nullam. Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit phasellus mollis sit aliquam sit nullam.

Showcase Card Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Placeholder image
Product Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

brand background card

Slider with Product Cards

  • Placeholder image
    Product Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Placeholder image
    Product Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Placeholder image
    Product Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Placeholder image
    Product Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Placeholder image
    Product Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Placeholder image
    Product Title Goes Here

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Product Cards

Placeholder image
Product Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Placeholder image
Product Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Placeholder image
Product Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is the home page (front-page.php) template. Style your components below for the theme.
Once finished, feel free to move this markup somewhere else in the theme file structure for future reference.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a sample paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample Link

This is a sample paragraph with a link inside of it.

a .btn link

a.btn.primary

a.btn.secondary

a.btn.ghost

Sample Details

Details content goes here.

Sample Details

Details content goes here.

Sample Details

Details content goes here.

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

Section with .bg-gray class

We often alternate <section> elements background colors with .bg-gray

  • .split Unordered List Item 1
  • .split Unordered List Item 2
  • .split Unordered List Item 3
  • .split Unordered List Item 4
Personal Information 50

.slim-content

Use the .slim-content class on a container or <div> to improve readability on wider viewports.

Applies max-width and equal horizontal margins.

Fusce non fermentum mi. Praesent vel lobortis elit. Nulla sodales, risus quis sollicitudin iaculis, felis dolor aliquet purus, eget elementum velit nunc eu dolor. Curabitur elit tellus, dictum non sem sit amet, viverra lobortis velit. Quisque facilisis, neque cursus ullamcorper ornare, dolor metus aliquam lacus, pharetra porttitor massa neque ut ligula. Vivamus laoreet nulla diam, eget adipiscing felis scelerisque sit amet. Mauris egestas, nisi vitae cursus tincidunt, urna ipsum facilisis eros, ut venenatis dui tellus sit amet orci. Nullam a rhoncus diam, eget tristique felis. Nulla egestas adipiscing fermentum. Aenean sagittis libero at eros ornare molestie. Morbi convallis ornare imperdiet. Mauris convallis tristique erat ac eleifend.

.lazy-background section

Use the .lazy-background class on an element to delay loading the background image until the user has scrolled closer to the element.

Place the image URL inside the data-bgimage property on the element and JavaScript will take care of the rest via the IntersectionObserver.

See the setupLazyLoadBackgrounds() function in scripts.js and /scss/base/lazyloader.scss for more