<h3 class="style-guide-heading">Neutral</h3>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-black"> </div>
            $color-black<br>
            #000000
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyDarkest"> </div>
          $color-greyDarkest<br>$color-neutral-900<br>
          #1B1B1C
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyDarker"> </div>
        $color-greyDarker<br>$color-neutral-800<br>
        #333334
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyDark"> </div>
        $color-greyDark<br>$color-neutral-700<br>
        #414142
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyMediumDark"> </div>
        $color-greyMediumDark<br>$color-neutral-600<br>
        #666666
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyMedium"> </div>
        $color-greyMedium<br>$color-neutral-500<br>
        #757575
      </div>
    </div>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-grey"> </div>
        $color-grey<br>$color-neutral-400<br>
        #757575
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyLight"> </div>
        $color-greyLight<br>$color-neutral-300<br>
        #bcbcbd
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyLighter"> </div>
        $color-greyLighter<br>$color-neutral-200<br>
        #ececec
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-greyLightest"> </div>
        $color-greyLightest<br>$color-neutral-100<br>
        #f4f4f4
      </div>
      <div class="style-guide-palette-item">
        <div class="style-guide-palette-swatch bg-color-white"> </div>
          $color-white<br>
          #ffffff     
      </div>
    </div>
    <h3 class="style-guide-heading">Primary</h3>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-primaryLight"> </div>
        $color-primaryLight<br>
        #de8d32
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-primary"> </div>
        $color-primary<br>
        #db6b27
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-primaryDark"> </div>
        $color-primaryDark<br>
        #b6591d
      </div>
      <div class="style-guide-palette-item color-blackr">
        <div class="style-guide-palette-swatch bg-color-primaryDarker"> </div>
        $color-primaryDarker<br>
        #8a420d
      </div>
    </div>
    <h3 class="style-guide-heading">Secondary</h3>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-secondaryLight"> </div>
        $color-secondaryLight<br>
        #dbd7d2
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-secondary"> </div>
        $color-secondary<br>
        #7c8e39
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-secondaryDark"> </div>
        $color-secondaryDark<br>
        #7c8e39
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-secondaryDarker"> </div>
        $color-secondaryDarker<br>
        #566725
      </div>
    </div>
    <h3 class="style-guide-heading">Tertiary</h3>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-tertiaryLight"> </div>
        $color-tertiaryLight<br>
        #C88949
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-tertiary"> </div>
        $color-tertiary<br>
        #9B6A38
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-tertiaryDark"> </div>
        $color-tertiaryDark<br>
        #79532B
      </div>
    </div>
    <h3 class="style-guide-heading">Support</h3>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-error"> </div>
        $color-error<br>
        #cc4749
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-errorLight"> </div>
        $color-errorLight<br>
        #ffdddd
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-warning"> </div>
        $color-warning<br>
        #f1a500
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-warningLight"> </div>
        $color-warningLight<br>
        #fffdea
      </div>
    </div>
    <div class="style-guide-palette-container">
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-success"> </div>
        $color-success<br>
        #6e7f31
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-successLight"> </div>
        $color-successLight<br>
        #e5e8d7
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-info"> </div>
        $color-info<br>
        #757575
      </div>
      <div class="style-guide-palette-item color-black">
        <div class="style-guide-palette-swatch bg-color-infoLight"> </div>
        $color-infoLight<br>
        #ececec
      </div>
    </div>
  

        <div class="column style-guide-container medium-6 ">
  <h1 class="jumbo">Hero Jumbo</h1>
  <h1>Heading H1</h1>
  <h2>Heading H2</h2>
  <h3>Heading H3</h3>
  <h4>Heading H4</h4>
  <h5>Heading H5</h5>
  <h6>Heading H6</h6>

  <hr>

  <h1 class="subheader">SubHeading H1</h1>
  <h2 class="subheader">SubHeading H2</h2>
  <h3 class="subheader">SubHeading H3</h3>
  <h4 class="subheader">SubHeading H4</h4>
  <h5 class="subheader">SubHeading H5</h5>
  <h6 class="subheader">SubHeading H6</h6>
  <hr>

  <p class="large">Paragraph Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
    tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
    aliquam, at varius velit dictum.</p>
  
  <p class="large bold">Paragraph Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
      tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
      aliquam, at varius velit dictum.</p>

  <p>Paragraph Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices
    venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
  </p>

  <p class="bold">Paragraph Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices
    venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
  </p>

  <p class="small">Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
    tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
    aliquam, at varius velit dictum.</p>

  <p class="small bold">Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
    tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
    aliquam, at varius velit dictum.</p>

  <p><span class="emphasized">.emphasized</span> paragraph text </p>

  <p><span class="action-lg">Action Large</span></p>
  <p><span class="action-md">Action Medium</span></p>
  <p><span class="action-sm">Action Small</span></p>

  <hr>

  <blockquote>Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci
    <cite> Author</cite>
  </blockquote>
</div>
        <div class="column style-guide-container medium-6 u-negative">
  <h1 class="jumbo">Hero Jumbo</h1>
  <h1>Heading H1</h1>
  <h2>Heading H2</h2>
  <h3>Heading H3</h3>
  <h4>Heading H4</h4>
  <h5>Heading H5</h5>
  <h6>Heading H6</h6>

  <hr>

  <h1 class="subheader">SubHeading H1</h1>
  <h2 class="subheader">SubHeading H2</h2>
  <h3 class="subheader">SubHeading H3</h3>
  <h4 class="subheader">SubHeading H4</h4>
  <h5 class="subheader">SubHeading H5</h5>
  <h6 class="subheader">SubHeading H6</h6>
  <hr>

  <p class="large">Paragraph Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
    tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
    aliquam, at varius velit dictum.</p>
  
  <p class="large bold">Paragraph Large. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
      tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
      aliquam, at varius velit dictum.</p>

  <p>Paragraph Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices
    venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
  </p>

  <p class="bold">Paragraph Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci vel urna ultrices
    venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus aliquam, at varius velit dictum.
  </p>

  <p class="small">Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
    tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
    aliquam, at varius velit dictum.</p>

  <p class="small bold">Paragraph Small. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
    tempus orci vel urna ultrices venenatis. Mauris imperdiet pulvinar vehicula. Donec convallis enim nec risus
    aliquam, at varius velit dictum.</p>

  <p><span class="emphasized">.emphasized</span> paragraph text </p>

  <p><span class="action-lg">Action Large</span></p>
  <p><span class="action-md">Action Medium</span></p>
  <p><span class="action-sm">Action Small</span></p>

  <hr>

  <blockquote>Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus orci
    <cite> Author</cite>
  </blockquote>
</div>
    

        <div class="row">
    <div class="column medium-6 style-guide-icon-wrapper ">
        <div class="display-flex">
          <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-add"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-arrow-down"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-arrow-left"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-arrow-right"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-arrow-up"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-bolt"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-cart"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-check"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-chevron-down"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-favorite"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-chevron-left"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-chevron-right"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-close"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-education"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-envelope"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-help"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-location"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-lock"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-oversize"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-user"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-right-arrow"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-rotate"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-ruler"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-search"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-send"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
                <i class="icon" aria-hidden="true">
                    <svg>
                        <use xlink:href="#icon-star"></use>
                    </svg>
                </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-thumbs-up"></use>
                </svg>
              </i>
            </div>

             <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-treeocache"></use>
                </svg>
              </i>
            </div>

        </div>
    </div>

    <div class="column medium-6 style-guide-icon-wrapper">
        <div class="display-flex">
            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-facebook"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-instagram"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                   <use xlink:href="#icon-pinterest"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-hb-tiktok"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-youtube"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-treestuff-twitter"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-telephone"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-zoom-in"></use>
                </svg>
              </i>
            </div>

            <div class="style-guide-icon">
              <i class="icon" aria-hidden="true">
                <svg>
                  <use xlink:href="#icon-zoom-out"></use>
                </svg>
              </i>
            </div>
        </div>
    </div>
</div>
  

    <div class="column medium-6 style-guide-container ">
  <h2 class="h4">Default</h2>
  <button class="button button--large">large</button>
  <button class="button">regular</button>
  <button class="button button--small">small</button>
  <br>
  <button class="button button--more">button more</button>
  <button class="button button--back">button back</button>
  <br>
  <h2 class="h4">Primary</h2>
    <button class="button button--primary button--large">large</button>
    <button class="button button--primary">regular</button>
    <button class="button button--primary button--small">small</button>
    <br>
    <button class="button button--primary button--more">button more</button>
    <button class="button button--primary button--back">button back</button>
  <br>
  <h2 class="h4">Secondary</h2>
    <button class="button button--secondary button--large">large</button>
    <button class="button button--secondary">regular</button>
    <button class="button button--secondary button--small">small</button>
    <br>
    <button class="button button--secondary button--more">button more</button>
    <button class="button button--secondary button--back">button back</button>
  <br>
  <h2 class="h4">Tertiary</h2>
    <button class="button button--tertiary button--large">large</button>
    <button class="button button--tertiary">regular</button>
    <button class="button button--tertiary button--small">small</button>
    <br>
    <button class="button button--tertiary button--more">button more</button>
    <button class="button button--tertiary button--back">button back</button>
  <br>
  <br>

  <h2 class="h4">Ghost</h2>
  <button class="button button--ghost button--large">large</button>
    <button class="button button--ghost">regular</button>
    <button class="button button--ghost button--small">small</button>
  <br>

  <button class="button" disabled="">Button Disabled</button><br>
  <br>

  <button class="button button--full">Button--full</button><br>
  <button class="button button--full button--more">Button--full Button--more</button><br>
  <button class="button button--full button--back">Button--full Button--back</button>

  <h4>button--arrow</h4>
  <div class="style-guide-element">
    <button class="button button--arrow button--large"></button>
    <button class="button button--arrow"></button>
    <button class="button button--arrow button--small"></button>
    <button class="button button--arrow button--secondary"></button>
    <button class="button button--arrow button--tertiary"></button>
    <br>
    <button class="button button--close button--large"></button>
    <button class="button button--close"></button>
    <button class="button button--close button--small"></button>
    <button class="button button--close button--secondary"></button>
    <button class="button button--close button--tertiary"></button>
  </div>
</div>

    <div class="column medium-6 style-guide-container u-negative">
  <h2 class="h4">Default</h2>
  <button class="button button--large">large</button>
  <button class="button">regular</button>
  <button class="button button--small">small</button>
  <br>
  <button class="button button--more">button more</button>
  <button class="button button--back">button back</button>
  <br>
  <h2 class="h4">Primary</h2>
    <button class="button button--primary button--large">large</button>
    <button class="button button--primary">regular</button>
    <button class="button button--primary button--small">small</button>
    <br>
    <button class="button button--primary button--more">button more</button>
    <button class="button button--primary button--back">button back</button>
  <br>
  <h2 class="h4">Secondary</h2>
    <button class="button button--secondary button--large">large</button>
    <button class="button button--secondary">regular</button>
    <button class="button button--secondary button--small">small</button>
    <br>
    <button class="button button--secondary button--more">button more</button>
    <button class="button button--secondary button--back">button back</button>
  <br>
  <h2 class="h4">Tertiary</h2>
    <button class="button button--tertiary button--large">large</button>
    <button class="button button--tertiary">regular</button>
    <button class="button button--tertiary button--small">small</button>
    <br>
    <button class="button button--tertiary button--more">button more</button>
    <button class="button button--tertiary button--back">button back</button>
  <br>
  <br>

  <h2 class="h4">Ghost</h2>
  <button class="button button--ghost button--large">large</button>
    <button class="button button--ghost">regular</button>
    <button class="button button--ghost button--small">small</button>
  <br>

  <button class="button" disabled="">Button Disabled</button><br>
  <br>

  <button class="button button--full">Button--full</button><br>
  <button class="button button--full button--more">Button--full Button--more</button><br>
  <button class="button button--full button--back">Button--full Button--back</button>

  <h4>button--arrow</h4>
  <div class="style-guide-element">
    <button class="button button--arrow button--large"></button>
    <button class="button button--arrow"></button>
    <button class="button button--arrow button--small"></button>
    <button class="button button--arrow button--secondary"></button>
    <button class="button button--arrow button--tertiary"></button>
    <br>
    <button class="button button--close button--large"></button>
    <button class="button button--close"></button>
    <button class="button button--close button--small"></button>
    <button class="button button--close button--secondary"></button>
    <button class="button button--close button--tertiary"></button>
  </div>
</div>

  

        <div class="column medium-6 style-guide-container">
            <p><a href="#">Text Link Default</a> Inline links in paragraph tags should be pretty obvious.</p>
            <p><a href="#" class="util-link">Util Link</a> Places like the masthead or blog meta data </p>
            <p><span class="util-label">Util Label</span> Places like the cart labels or PDP Buy grid key value pairs</p>
        </div>
        <div class="column medium-6 style-guide-container u-negative">
            <p><a href="#">Text Link Default</a> Inline links in paragraph tags should be pretty obvious.</p>
            <p><a href="#" class="util-link">Util Link</a> – Used in places like the masthead or blog meta data </p>
            <p><span class="util-label">Util Label</span> – Used in places like the cart labels or PDP Buy grid key value pairs</p>
        </div>
    

      <div class="hr--custom-line"> </div>
        <hr class="hr--thick">
        <hr>
        <hr class="hr--thin">
    

        <div class="column style-guide-container medium-6 ">
  <form>
    <div class="form-field">
      <label class="form-label" for="input1">Input Label</label>
      <input class="form-input" id="input1" type="text" placeholder="Placeholder text">
    </div>
    <div class="form-field">
      <label class="form-label" for="input2">Number Label</label>
      <input class="form-input" id="input2" type="number" placeholder="Number input">
    </div>
    <div class="form-field">
      <label class="form-label" for="input3">Textarea Label <small>additional context</small></label>
      <textarea class="form-input" id="input3" placeholder="Placeholder text" rows="3"></textarea>
    </div>

    <div class="form-field form-field--input form-field--inputText" id="FormField_4" data-validation="{"type":"singleline","label":"First Name","required":true,"maxlength":0}" data-type="FirstName">
      <label class="form-label" for="FormField_4_input">First Name</label>
      <input type="text" id="FormField_4_input" data-label="First Name" name="FormField[2][4]" class="form-input" aria-required="true" placeholder="Regular Input" data-field-type="FirstName">
    </div>
    <div class="form-field form-field--input form-field--inputText" id="FormField_5" data-validation="{"type":"singleline","label":"First Name","required":true,"maxlength":0}" data-type="FirstName">
      <label class="form-label" for="FormField_5_input">Last Name</label>
      <input type="text" id="FormField_5_input" data-label="Last Name" disabled="" name="FormField[2][4]" class="form-input" placeholder="Disabled Input" data-field-type="FirstName">
    </div>
    <div class="form-field">
      <label class="form-label" for="input-select">Select label</label>
      <select class="form-select" name="input-select" id="input-select">
        <option value="Please select a value">Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
    </div>
    <div class="form-field" id="FormField_6">
      <fieldset class="form-fieldset">
        <legend class="is-srOnly">Please select one</legend>
        <input type="radio" class="form-radio" name="giftwraptype" id="girftWrapping-radio-same" value="same">
        <label class="form-label" for="girftWrapping-radio-same">Radio Label - Default</label>

        <input type="radio" class="form-radio" name="giftwraptype" id="girftWrapping-radio-all" checked="checked" value="different">
        <label class="form-label" for="girftWrapping-radio-all">Radio Label - Selected</label>

        <input type="radio" class="form-radio" name="giftwraptype" id="girftWrapping-radio-another" disabled="" value="another">
        <label class="form-label" for="girftWrapping-radio-another">Radio Label - Disabled</label>
      </fieldset>
    </div>

    <div class="form-field" id="FormField_7">
      <fieldset class="form-fieldset">
        <legend class="is-srOnly">Please select one</legend>
        <input type="checkbox" class="form-checkbox" name="checkboxTest" id="girftWrapping-checkbox-same" value="same">
        <label class="form-label" for="girftWrapping-checkbox-same">Checkbox Label - Default</label>

        <input type="checkbox" class="form-checkbox" name="checkboxTest" id="girftWrapping-checkbox-all" checked="checked" value="different">
        <label class="form-label" for="girftWrapping-checkbox-all">Checkbox Label - Selected</label>

      <input type="checkbox" class="form-checkbox" name="checkboxTest" id="girftWrapping-checkbox-another" disabled="" value="different">
      <label class="form-label" for="girftWrapping-checkbox-another">Checkbox Label - Disabled</label>

      <div class="checkbox">
        <label class="form-label">
          <input type="checkbox" class="form-checkbox" value="value1" required="" name="inputcheckbox">
          <span>Custom Checkbox</span>
        </label>
      </div>
    </fieldset></div>

    <div class="form-field form-field--success">
      <label class="form-label" for="valid_simple">Valid field</label>
      <input class="form-input" id="valid_simple" type="text" value="Some Valid text">
      <ul class="form-field-successes">
        <li class="form-field-success">
          <span class="form-inlineMessage">
            This is not a valid email address
          </span>
        </li>
      </ul>
    </div>

    <div class="form-field form-field--error">
      <label class="form-label" for="invalid_simple">Invalid field</label>
      <input class="form-input" id="invalid_simple" type="text" value="Some Invalid text">
      <ul class="form-field-errors">
        <li class="form-field-error">
          <span class="form-inlineMessage">
            This is not a valid email address
          </span>
        </li>
      </ul>
    </div>

    <div class="form-field form-field--warning">
      <label class="form-label" for="warning_simple">Warning field</label>
      <input class="form-input" id="warning_simple" type="text" value="Text that generated a Warning">
      <ul class="form-field-warnings">
        <li class="form-field-warning">
          <span class="form-inlineMessage">
            Did you mean…
          </span>
        </li>
      </ul>
    </div>

    <div class="form-field form-field--error">
      <label class="form-label" for="invalid_select">Select label</label>
      <select class="form-select" name="invalid_select" id="invalid_select">
        <option value="Please select a value">Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </select>
      <ul class="form-field-errors">
        <li class="form-field-error">
          <span class="form-inlineMessage">
            You must select a value
          </span>
        </li>
      </ul>
    </div>

    <div class="form-field form-field--error">
      <fieldset class="form-fieldset">
        <legend class="is-srOnly">Please select one</legend>
        <label class="form-label">Checkbox label</label>
        <input class="form-checkbox" type="checkbox" id="invalid_check1">
        <label class="form-label" for="invalid_check1">Checkbox 1 label</label>
        <input class="form-checkbox" type="checkbox" id="invalid_check2">
        <label class="form-label" for="invalid_check2">Checkbox 2 label</label>
      </fieldset>
      <ul class="form-field-errors">
        <li class="form-field-error">
          <label class="form-inlineMessage">
            Please select one or more
          </label>
        </li>
      </ul>
    </div>

    <div class="form-field form-field--error">
      <fieldset class="form-fieldset">
        <legend class="is-srOnly">Please select one</legend>
        <label class="form-label">Radio label</label>
        <input class="form-radio" type="radio" name="invalid_radio_example" id="invalid_radio1">
        <label class="form-label" for="invalid_radio1">Radio 1 label</label>
        <input class="form-radio" type="radio" name="invalid_radio_example" id="invalid_radio2">
        <label class="form-label" for="invalid_radio2">Radio 2 label</label>
      </fieldset>
      <ul class="form-field-errors">
        <li class="form-field-error">
          <label class="form-inlineMessage">
            Please select an option
          </label>
        </li>
      </ul>
    </div>

    <h3 class="h5">Quantity Selectors</h3>
    <div class="form-increment mb-m" data-quantity-change="">
      <button class="button button--icon" data-action="dec">
        <span class="is-srOnly">Decrease Quantity:</span>
        <i class="icon" aria-hidden="true">
          <svg>
            <use href="#icon-keyboard-arrow-down"></use>
          </svg>
        </i>
      </button>
      <label for="increase" class="is-srOnly">Increase Quantity</label>
      <input class="form-input form-input--incrementTotal" id="increase" name="increase" type="number" value="1" data-quantity-min="0" data-quantity-max="0" min="1" pattern="[0-9]*" aria-live="polite">
      <button class="button button--icon" data-action="inc">
        <span class="is-srOnly">Increase Quantity:</span>
        <i class="icon" aria-hidden="true">
          <svg>
            <use href="#icon-keyboard-arrow-up"></use>
          </svg>
        </i>
      </button>
    </div>
    <!-- <div class="form-increment">
      <button class="button button--icon" data-action="dec">
        <span class="is-srOnly">Decrease Quantity:</span>
        <i class="icon" aria-hidden="true">
          <svg>
            <use href="#icon-keyboard-arrow-down"></use>
          </svg>
        </i>
      </button>
      <label for="descrease" class="is-srOnly">Descrease Quantity</label>
      <input class="form-input form-input--incrementTotal" id="descrease" name="descrease" type="number" value="1"
        data-quantity-min="0" data-quantity-max="0" min="1" pattern="[0-9]*" aria-live="polite">
      <button class="button button--icon" data-action="inc">
        <span class="is-srOnly">Decrease Quantity:</span>
        <i class="icon" aria-hidden="true">
          <svg>
            <use href="#icon-keyboard-arrow-up"></use>
          </svg>
        </i>
      </button>
    </div> -->

    <div id="Quantity-Form" class="quantity-input-form">
      <div class="quantity">
        <button class="quantity-button" name="minus" type="button">
          <span class="is-srOnly">Decrease Quantity:</span>
          <svg class="icon">
            <use xlink:href="#icon-minus"></use>
          </svg>
        </button>
        <input class="quantity-input" type="number" name="quantity" value="1" min="1" max="10">
        <button class="quantity-button" name="plus" type="button">
          <span class="is-srOnly">Increase Quantity:</span>
          <svg class="icon">
            <use xlink:href="#icon-plus"></use>
          </svg>
        </button>
      </div>
    </div>
  </form>
</div>
    

    <div class="alertBox">
      <div class="alertBox-column alertBox-icon">
        <icon glyph="ic-warning" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z">
            </path>
          </svg>
        </icon>
      </div>
      <p class="alertBox-column alertBox-message">
        <span>Alert Default</span>
      </p>
    </div>

    <div class="alertBox alertBox--success">
      <div class="alertBox-column alertBox-icon">
        <icon glyph="ic-success" class="icon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M7.984,15.016 L16.984,6.016 L15.578,4.563 L7.984,12.157 L4.421,8.594 L3.015,10 L7.984,15.016 Z M10,0.016 C12.75,0.016 15.1016667,0.992666667 17.055,2.946 C19.0083333,4.89933333 19.985,7.251 19.985,10.001 C19.985,12.751 19.0083333,15.1026667 17.055,17.056 C15.1016667,19.0093333 12.75,19.986 10,19.986 C7.25,19.986 4.89833333,19.0093333 2.945,17.056 C0.991666667,15.1026667 0.015,12.751 0.015,10.001 C0.015,7.251 0.991666667,4.89933333 2.945,2.946 C4.89833333,0.992666667 7.25,0.016 10,0.016 Z"></path>
          </svg>
        </icon>
      </div>
      <p class="alertBox-column alertBox-message">
        <span>Alert Success</span>
      </p>
    </div>

    <div class="alertBox alertBox--info">
      <div class="alertBox-column alertBox-icon">
        <icon glyph="ic-warning" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z">
            </path>
          </svg>
        </icon>
      </div>
      <p class="alertBox-column alertBox-message">
        <span>Alert Info</span>
      </p>
    </div>

    <div class="alertBox alertBox--error">
      <div class="alertBox-column alertBox-icon">
        <icon glyph="ic-error" class="icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20">
              <path d="M10.984,10.984 L10.984,4.984 L9.015,4.984 L9.015,10.984 L10.984,10.984 Z M10.984,15.016 L10.984,13 L9.015,13 L9.015,15.016 L10.984,15.016 Z M10,0.016 C12.75,0.016 15.1016667,0.992666667 17.055,2.946 C19.0083333,4.89933333 19.985,7.251 19.985,10.001 C19.985,12.751 19.0083333,15.1026667 17.055,17.056 C15.1016667,19.0093333 12.75,19.986 10,19.986 C7.25,19.986 4.89833333,19.0093333 2.945,17.056 C0.991666667,15.1026667 0.015,12.751 0.015,10.001 C0.015,7.251 0.991666667,4.89933333 2.945,2.946 C4.89833333,0.992666667 7.25,0.016 10,0.016 Z"></path>
            </svg>
          </icon>
      </div>
      <p class="alertBox-column alertBox-message">
        <span>Alert Error</span>
      </p>
    </div>

    <div class="alertBox alertBox--warning">
      <div class="alertBox-column alertBox-icon">
        <icon glyph="ic-warning" class="icon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20">
            <path d="M12.6673684,12.6484211 L12.6673684,8.40526316 L10.5947368,8.40526316 L10.5947368,12.6484211 L12.6673684,12.6484211 Z M12.6673684,16.8421053 L12.6673684,14.72 L10.5947368,14.72 L10.5947368,16.8421053 L12.6673684,16.8421053 Z M0.0357894737,20 L11.6315789,0.0168421053 L23.2273684,20 L0.0368421053,20 Z"></path>
          </svg>
        </icon>
      </div>
      <p class="alertBox-column alertBox-message">
        <span>Alert Warning</span>
      </p>
    </div>

  

      <section class="theme-light">
        <div class="style-guide-column container">
            <span>This is .container</span>
        </div>
      </section>
      <section class="">
        <div class="style-guide-column container-xs">
          <span>This is .container-xs - 420px</span>
        </div>
      </section>
      <section class="">
        <div class="style-guide-column container-sm">
          <span>This is .container-sm - 720px</span>
        </div>
      </section>
      <section class="">
        <div class="style-guide-column container-md">
          <span>This is .container-md  - 1280px</span>
        </div>
      </section>
      <section class="">
        <div class="style-guide-column container-lg">
          <span>This is .container-lg - 1440px</span>
        </div>
      </section>
      <section class="">
        <div class="style-guide-column container-xl">
          <span>This is .container-xl - 1680px</span>
        </div>
      </section>