design system

white tree logo
your local home improvements professionals
Get a Prompt Free Estimate
By providing your phone number and checking this box you agree to receive Calls and SMS messages from The Board Store Home Improvements, Inc. I would like to receive updates about The Board Store Home Improvement, Inc's products and services at the phone number provided. Note: Messaging frequency may vary and data rates may apply. Reply Help for assistance or STOP to cancel. See Terms of Service.

Headings

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6

Body Text

Paragraph

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.


Text Link

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lists

Ordered List

  • Unordered list item
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Ordered List

  1. Ordered list item
  2. Lorem ipsum dolor sit amet

Custom Style List

  • Unordered list item
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Elements

Accordion

Toggle 1 Content
Toggle 2 Content
Toggle 3 Content

Accordion Dark

Toggle 1 Content
Toggle 2 Content
Toggle 3 Content

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tab 2 Content
Tab 3 Content

Responsive Table

Optional Column Header Column Header Example Another Column Header
Data 1 Lorem ipsum dolor sit amet Data 2 Suspendisse varius enim Data 3 Duis cursus, mi quis vierra
Data 4 Data 5 Data 6
Data 7 Data 8 Data 9

Slick Example

A sample slick config is listed in main.js, specifically with custom arrows and dots. If you use this setup, the styling will be started for you in /scss/helpers/_sliders.scss. When you use your own divs, you can position the arrows/dots relatively whatever div you need.

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. 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.

Slick Equal Heights

An additional helper class has been added in /scss/helpers/_sliders.scss. .slick-flex class can be added to the slider wrapper to make the slides have equal heights.

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. 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. 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
windows image
windows image
Easy Financing/Low Payments
SEVERAL FINANCING OPTIONS TO CHOOSE FROM
Learn More About Financing
yellow tree image

visit our
showroom

524 Copeland Ave. La Crosse, WI 54603
Get Directions (608)-782-8877
white tree logo Products ScheduleAppointment