Summer of Sacs: 20% off Sacs

The new site is built on the Foundation Grid.

Also check out the Foundation Visibility classes.

Grid - Uncollapsed

small-12
small-12 medium-9
small-12 medium-3
small-12 medium-8
small-12 medium-4
small-12 medium-7
small-12 medium-5
small-6
small-6

Grid - Collapsed

small-12
small-12 medium-9
small-12 medium-3
small-12 medium-8
small-12 medium-4
small-12 medium-7
small-12 medium-5
small-6
small-6

Account

All Dynamic user account should be implemented in app/code/local/Lovesac/Ajax/controllers/AccountController.php And rendered by the appropriate corresponding function. Only cart data is currently supported.

Add To Cart

Creating a button that adds a product to the shopping bag requires creating a form to submit.

<form action="<?php echo substr($addCartUri, 0, strpos($addCartUri, 'form_key')) ?>" method="post" id="product_addtocart_form">
 <input type="hidden" name="product" value="<!--product_id-->" />

 <label for="qty">Quantity:</label>
 <input type="text" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty" />

 <button type="submit" title="Add to Bag" class="btn btnLg btnDefault">Add to Bag</button>
 </form>
  • Form
  • Form method should be set to "post".
  • Form id must be set to "product_addtocart_form" in order for the javascript add-to-cart binding to work.
  • Add to Bag button must be of type "submit" and placed within the <form> tags.

Back to Top

Chat

Use Lovesac.chat.notify("MESSAGE TO OPERATOR HERE"); to send a message to the chat window.

Color Palette

Primary

black 000000
white FFFFFF
cherry ce0037
charcoal 54585a
air ecf3f7
oatmeal c5b9ac
teal 009ca6
heather 9ba2a6
cream ecd898
skyblue a3c7d2

Secondary

washable 6fbbbf
changeable f15645
configurable 8c4b87
expandable 46b071
durable 107c79
comfortable 3b4150

Fancybox Modals

Modal

<a class="fancybox iframe" href="http://www.youtube.com/embed/si16V-mgC8o?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&disablekb=1&modestbranding=1&controls=0&autohide=1&color=white&rel=0">Click Here For a Modal</a>

Font Treatments

Here are all of the headers and font treatments that we should make

Here is an H1

Here is an H2

Here is an H3

Here is an H4

Here is an H5
Here is an H6

Overlay Header

headline-able

<h1>Here is an H1</h1>
<h2>Here is an H2</h2>
<h3>Here is an H3</h3>
<h4>Here is an H4</h4>
<h5>Here is an H5</h5>
<h6>Here is an H6</h6>



<h1 class="overlay">Overlay Header</h1>
<h3 class="tenet">headline-able</h3>
<p class="lsCta"><a href="#">Explore Fabrics</a> &rang;</p>

Regular old paragraph text in here

And here are some SPECIAL, super-fun examples.

<p>Regular old paragraph text in here</p>
<p>And <a href="#">here</a> are some <strong>SPECIAL</strong>, <em>super-fun</em> examples.</p>
  • Unordered List
  • With lots of fun
  • Items!
<ul>
  <li>Unordered List</li>
  <li>With lots of fun</li>
  <li>Items!</li>
</ul>
  1. Unordered List
  2. With lots of fun
  3. Items!
<ol>
  <li>Unordered List</li>
  <li>With lots of fun</li>
  <li>Items!</li>
</ol>

Form Elements

Form elements include checkboxes, radio buttons, inputs and dropdowns.

<input type="checkbox" name="regular_old_checkbox" id="regular_old_checkbox_1">
<label class="checkbox" for="regular_old_checkbox_1">Regular old Checkbox</label>

<input type="checkbox" name="lovesac_checkbox_2" class="lovesacCheckbox">
<label class="checkbox" for="lovesac_checkbox_2">Lovesac Checkbox</label>
<input type="radio" name="regular_old_radio" id="regular_old_radio_1">
<label class="radio" for="regular_old_radio_1">Regular Old Radio</label>

<input type="radio" name="regular_old_radio" id="lovesacRadio_1" class="lovesacRadio">
<label class="radio" for="lovesacRadio_1">Lovesac Radio</label>
<div class="row">
  <div class="columns small-3">
    <button type="submit" title="Add to Cart" class="lovesacButton addToCartButton" >Add To Cart <svg enable-background="new 0 0 50 50" height="50px" id="Layer_1" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 "/></svg></button>
  </div>
</div>

<div class="row">
  <div class="columns small-3">
    <button type="submit" title="Learn More" class="lovesacButton lovesacButtonPrimary" >Learn More</button>
  </div>
</div>

<div class="row">
  <div class="columns small-3">
    <button type="submit" title="Find Your Store" class="lovesacButton lovesacButtonSecondary" >Find Your Store</button>
  </div>
</div>

<div class="row">
  <div class="columns small-3">
    <button type="button" title="Shop Now" class="lovesacButton lovesacButtonAlt" >Shop Now <svg enable-background="new 0 0 50 50" height="50px" id="Layer_1" version="1.1" viewBox="0 0 50 50" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 "/></svg></button>
  </div>
</div>

<div class="row">
  <div class="columns small-3">
    <button type="button" title="Request Swatches" class="lovesacButton">Request Swatches</button>
  </div>
</div>

<div class="row">
  <div class="columns small-3">
    <button type="button" title="Customize" class="lovesacButton customizeButton">Customize</button>
  </div>
</div>

<div class="row">
  <div class="columns small-3">
    <button type="button" title="Watch The Video" class="lovesacButton watchButton"><svg xmlns="http://www.w3.org/2000/svg" width="87" height="79" viewBox="-18.825 -14.078 87 79" overflow="visible"><path fill="#757575" d="M17.83 35.663l21.4-10.7-21.4-10.698M0 0h7.132v7.132H0V0zm14.265 0h7.133v7.132h-7.133V0zM28.53 0h7.133v7.132H28.53V0zm14.266 0h7.132v7.132h-7.132V0zM0 42.796h7.132v7.133H0v-7.135zm14.265 0h7.133v7.133h-7.133v-7.135zm14.265 0h7.133v7.133H28.53v-7.135zm14.266 0h7.132v7.133h-7.132v-7.135z"/></svg>Watch The Video</button>
  </div>
</div>
<div class="row">
    <div class="lovesacQty">

        <div class="column small-2">
            <label for="qty">QTY:</label>
        </div>

        <div class="column small-10">
            <div class="qty-changer sp-minus disabled"><a class="fa" href="#" data-multi="-1">&#xf068;</a></div>
            <div class="qty-changer sp-input">
                <input type="text" id="qty" name="qty" value="1" data-min="1" data-max="12" disabled="disabled" />
            </div>
            <div class="qty-changer sp-plus"><a class="fa" href="#" data-multi="1">&#xf067;</a></div>
        </div>

    </div>
</div>

Category Headers

Sactionals

Built to rearrange: tool-free, worry-free

WATCH VIDEO

<div class="row">
  <div class="column small-12">
    <img data-interchange="[/media/wysiwyg/Categories/category-headers/Mobile-category-Learn-Sactionals_2.jpg, small], [/media/wysiwyg/Categories/category-headers/Desktop-Category-A-Learn-Sactionals_2.jpg, medium]">
  </div>
</div>

<div class="row">
  <div class="column small-12">
      <div class="ls-cat-header">
        <img data-interchange="[/media/wysiwyg/Categories/category-headers/Mobile-category-Learn-Sactionals_2-notext.jpg, small], [/media/wysiwyg/Categories/category-headers/Desktop-Category-A-Learn-Sactionals_2-notext.jpg, medium]">

        <div class="ls-cat-header-title ls-cat-header-text-small-charcoal ls-cat-header-text-medium-charcoal">
          <h2>Sactionals</h2>
          <h3>Built to rearrange: tool-free, worry-free</h3>
          <p><a href="#">WATCH VIDEO</a>&rang;</p>
        </div>
      </div>
  </div>
</div>

Sacs

The world's most comfortable seats

<div class="row">
  <div class="column small-12">
    <img data-interchange="[/media/wysiwyg/Categories/category-headers/Mobile-category-Sacs.jpg, small], [/media/wysiwyg/Categories/category-headers/Desktop-Category-A-Sacs_2.jpg, medium]">
  </div>
</div>

<div class="row">
  <div class="column small-12">
    <div class="ls-cat-header">
      <img data-interchange="[/media/wysiwyg/Categories/category-headers/Mobile-category-Sacs-notext.jpg, small], [/media/wysiwyg/Categories/category-headers/Desktop-Category-A-Sacs_2-notext.jpg, medium]">

      <div class="ls-cat-header-title ls-cat-header-title-right ls-cat-header-text-small-charcoal ls-cat-header-text-medium-charcoal">
        <h2>Sacs</h2>
        <h3>The world's most comfortable seats</h3>
      </div>
    </div>
  </div>
</div>

You-Tables &
You-Drinks

Transform Sides into drink holders & Seats into tables

<div class="row">
  <div class="column small-12">
    <img data-interchange="[/media/wysiwyg/Categories/category-headers/Mobile-category-You-Products.jpg, small], [/media/wysiwyg/Categories/category-headers/Desktop-Category-B-You-Products_2.jpg, medium]">
  </div>
</div>

<div class="row">
  <div class="column small-12">
    <div class="ls-cat-header">
      <img data-interchange="[/media/wysiwyg/Categories/category-headers/Mobile-category-You-Products-notext.jpg, small], [/media/wysiwyg/Categories/category-headers/Desktop-Category-B-You-Products_2-notext.jpg, medium]">

      <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
        <h2>You-Tables &amp;<br class="show-for-small-only" /> You-Drinks</h2>
        <h3>Transform Sides into drink holders &amp; Seats into tables</h3>
      </div>

    </div>
  </div>
</div>

Sactionals

The world's most adaptable couch

Sacs

The world's most comfortable seats

Sactionals

Built to rearrange: tool-free, worry-free

WATCH VIDEO

Sacs

Amazingly comfortable, durable, washable & changeable

WATCH VIDEO

Outdoor Sactionals

Everything you love about Sactionals. Outdoors.


Accessories

A world of specially designed add-ons

Footsacs & Blankets

Perfect for hours of snuggling & keeping toes toasty

Clearance

Going, going, gone! Grab this stuff while it lasts

Holiday Sacs

Your favorites are back!

Kid Chairs

Soft & safe with changeable machine-washable covers

Kid Sactionals

Small couches for big imaginations

Outdoor Throw Pillows

Jazzy & weather-resistant for Outdoor Sactionals

Petsacs

The snuggliest, comfiest pet beds ever

Pieces & Covers

Add new pieces, change covers for a new look

Poufs

Top with a snack tray or use as an extra seat

Sac Covers

Choose from 300+ covers for every season & style

Sac Inserts

Sizes and shapes for everybody & every space

Sac Accessories

innovative & exclusively designed for Sacs

Sactionals Accessories

Smart sidekicks take lounging to the next level

Squattomans

Put your feet up or use as an extra seat

Throw Pillows

Add some flair to your Sactionals & Sacs

You-Tables &
You-Drinks

Transform Sides into drink holders & Seats into tables

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sactionals-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sactionals-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sactionals.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sactionals.jpg, medium]">

            <div class="ls-cat-header-title ls-cat-header-title-right ls-cat-header-text-small-white ls-cat-header-text-medium-charcoal">
                <h2>Sactionals</h2>
                <h3>The world's most adaptable couch</h3>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sacs-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sacs-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sacs.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sacs.jpg, medium]">

            <div class="ls-cat-header-title ls-cat-header-title-right ls-cat-header-text-small-charcoal ls-cat-header-text-medium-charcoal">
                <h2>Sacs</h2>
                <h3>The world's most comfortable seats</h3>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Learn-Sactionals-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Learn-Sactionals-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Learn-Sactionals.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Learn-Sactionals.jpg, medium]">

            <div class="ls-cat-header-title ls-cat-header-text-small-charcoal ls-cat-header-text-medium-charcoal">
                <h2>Sactionals</h2>
                <h3>Built to rearrange: tool-free, worry-free</h3>
                <p><a href="#">WATCH VIDEO</a>&rang;</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Learn-Sacs-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Learn-Sacs-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Learn-Sacs.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Learn-Sacs.jpg, medium]">

            <div class="ls-cat-header-title ls-cat-header-text-small-charcoal ls-cat-header-text-medium-charcoal">
                <h2>Sacs</h2>
                <h3>Amazingly comfortable, durable, washable &amp; changeable</h3>
                <p><a href="#">WATCH VIDEO</a>&rang;</p>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Outdoor-Sactionals-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Outdoor-Sactionals-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Outdoor-Sactionals.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Outdoor-Sactionals.jpg, medium]">

            <div class="ls-cat-header-title ls-cat-header-title-right ls-cat-header-text-small-white ls-cat-header-text-medium-white">
                <h2>Outdoor Sactionals</h2>
                <h3>Everything you love about Sactionals. Outdoors.</h3>
            </div>
        </div>
    </div>
</div>

<hr />

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Accessories-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Accessories-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Accessories.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Accessories.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-charcoal">
                <h2>Accessories</h2>
                <h3>A world of specially designed add-ons</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Blankets-Footsacs-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Blankets-Footsacs-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Blankets-Footsacs.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Blankets-Footsacs.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Footsacs &amp; Blankets</h2>
                <h3>Perfect for hours of snuggling &amp; keeping toes toasty</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Clearance-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Clearance-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Clearance.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Clearance.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Clearance</h2>
                <h3>Going, going, gone! Grab this stuff while it lasts</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Holiday-Sacs-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Holiday-Sacs-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Holiday-Sacs.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Holiday-Sacs.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Holiday Sacs</h2>
                <h3>Your favorites are back!</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Kids-Chairs-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Kids-Chairs-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Kids-Chairs.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Kids-Chairs.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Kid Chairs</h2>
                <h3>Soft &amp; safe with changeable machine-washable covers</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Kids-Sactionals-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Kids-Sactionals-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Kids-Sactionals.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Kids-Sactionals.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Kid Sactionals</h2>
                <h3>Small couches for big imaginations</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Outdoor-Throw-Pillows-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Outdoor-Throw-Pillows-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Outdoor-Throw-Pillows.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Outdoor-Throw-Pillows.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Outdoor Throw Pillows</h2>
                <h3>Jazzy &amp; weather-resistant for Outdoor Sactionals</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Petsac-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Petsac-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Petsac.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Petsac.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Petsacs</h2>
                <h3>The snuggliest, comfiest pet beds ever</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Pieces-Covers-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Pieces-Covers-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Pieces-Covers.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Pieces-Covers.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-small-charcoal ls-cat-header-text-medium-charcoal">
                <h2>Pieces &amp; Covers</h2>
                <h3>Add new pieces, change covers for a new look</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Poufs-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Poufs-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Poufs.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Poufs.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Poufs</h2>
                <h3>Top with a snack tray or use as an extra seat</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sac-Covers-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sac-Covers-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sac-Covers.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sac-Covers.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-charcoal">
                <h2>Sac Covers</h2>
                <h3><span class="ls-cat-header-text-medium-white">Choose from 300+</span> covers for every season &amp; style</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sac-Insert-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sac-Insert-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sac-Insert.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sac-Insert.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-charcoal">
                <h2>Sac Inserts</h2>
                <h3>Sizes and shapes for everybody &amp; every space</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sacs-Accessories-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sacs-Accessories-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sacs-Accessories.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sacs-Accessories.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-charcoal">
                <h2>Sac Accessories</h2>
                <h3>innovative &amp; exclusively designed for Sacs</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sactionals-Accessories-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sactionals-Accessories-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Sactionals-Accessories.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Sactionals-Accessories.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-charcoal">
                <h2>Sactionals Accessories</h2>
                <h3>Smart sidekicks take lounging to the next level</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Squattoman-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Squattoman-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Squattoman.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Squattoman.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Squattomans</h2>
                <h3>Put your feet up or use as an extra seat</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Throw-Pillows-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Throw-Pillows-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/Throw-Pillows.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/Throw-Pillows.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>Throw Pillows</h2>
                <h3>Add some flair to your Sactionals &amp; Sacs</h3>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/You-Products-text.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/You-Products-text.jpg, medium]">
    </div>
</div>

<div class="row">
    <div class="column small-12">
        <div class="ls-cat-header">
            <img data-interchange="[/media/wysiwyg/Categories/category-banners/small/You-Products.jpg, small], [/media/wysiwyg/Categories/category-banners/medium/You-Products.jpg, medium]">

            <div class="ls-cat-header-title-alt ls-cat-header-title-alt-right ls-cat-header-text-medium-white">
                <h2>You-Tables &amp;<br class="show-for-small-only" /> You-Drinks</h2>
                <h3>Transform Sides into drink holders &amp; Seats into tables</h3>
            </div>

        </div>
    </div>
</div>

Image Carousel

<ul class="lightSliderFullwithNavigation">
    <li><img src="http://dummyimage.com/1280x650/ff0000/fff.jpg" /></li>
    <li><img src="http://dummyimage.com/1280x650/00ff00/fff.jpg" /></li>
    <li><img src="http://dummyimage.com/1280x650/0000ff/fff.jpg" /></li>
    <li><img src="http://dummyimage.com/1280x650/dddddd/fff.jpg" /></li>
</ul>

Image Dimensions

Desktop Images

12 Columns Wide

width height
4 Nelsons 1920 750
3 Nelsons 1920 562
2 Nelsons 1920 480
1 Nelson 1920 281

6 Columns

3 Columns

Mobile Images

12 Columns Wide

6 Columns

Responsive Dimensions

<h3>Desktop Images</h3>

<h4>12 Columns Wide</h4>


<table>
  <th>
    <td></td>
    <td>width</td>
    <td>height</td>
  </th>
  <tr>
    <td>4 Nelsons</td>
    <td>1920</td>
    <td>750</td>
  </tr>
  <tr>
    <td>3 Nelsons</td>
    <td>1920</td>
    <td>562</td>
  </tr>
  <tr>
    <td>2 Nelsons</td>
    <td>1920</td>
    <td>480</td>
  </tr>
  <tr>
    <td>1 Nelson</td>
    <td>1920</td>
    <td>281</td>
  </tr>
</table>


<div class="row">
  <div class="column small-12">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1920%20Wide%20x%20750&w=1920&h=750" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row">
  <div class="column small-12">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1920%20Wide%20x%20562&w=1920&h=562" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row">
  <div class="column small-12">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1920%20Wide%20x%20480&w=1920&h=480" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row">
  <div class="column small-12">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1920%20Wide%20x%20281&w=1920&h=281" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<h4>6 Columns</h4>

<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=750" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=750" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=562" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=562" style="border: 1px solid black;" alt=""/>
  </div>
</div>


<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=480" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=480" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=281" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=960%20Wide&w=960&h=281" style="border: 1px solid black;" alt=""/>
  </div>
</div>


<h4>3 Columns</h3>

<div class="row collapse">
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=750" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=750" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=750" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=750" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row collapse">
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=562" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=562" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=562" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=562" style="border: 1px solid black;" alt=""/>
  </div>
</div>


<div class="row collapse">
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=480" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=480" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=480" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=480" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row collapse">
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=281" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=281" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=281" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=480%20Wide&w=480&h=281" style="border: 1px solid black;" alt=""/>
  </div>
</div>



<h3>Mobile Images</h3>

<h4>12 Columns Wide</h4>

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640x750&w=640&h=750" style="border: 1px solid black;" alt=""/>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640x640&w=640&h=640" style="border: 1px solid black;" alt=""/>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640x320&w=640&h=320" style="border: 1px solid black;" alt=""/>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640x21&w=640&h=210" style="border: 1px solid black;" alt=""/>


<h4>6 Columns</h4>

<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=750" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=750" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=640" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=640" style="border: 1px solid black;" alt=""/>
  </div>
</div>


<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=320" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=320" style="border: 1px solid black;" alt=""/>
  </div>
</div>

<div class="row collapse">
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=210" style="border: 1px solid black;" alt=""/>
  </div>
  <div class="column small-6">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=640%20Wide&w=640&h=210" style="border: 1px solid black;" alt=""/>
  </div>
</div>


<h3>Responsive Dimensions</h3>

<img data-interchange="[https://placeholdit.imgix.net/~text?txtsize=33&txt=SMALL640%20Wide&w=640&h=770, small],
                       [https://placeholdit.imgix.net/~text?txtsize=33&txt=MEDIUM800%20Wide&w=800&h=800, medium],
                       [https://placeholdit.imgix.net/~text?txtsize=33&txt=LARGE1024%20Wide&w=1024&h=520, large],
                       [https://placeholdit.imgix.net/~text?txtsize=33&txt=XLARGE1920%20Wide&w=1920&h=750, xlarge]" />

Promo Blocks

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals

STACK MORE, SAVE MORE

Up to 30% off Sactionals + 36 Months Interest-Free Financing*

Shop Sactionals
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-cherry">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-cherry-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-charcoal">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-charcoal-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-air">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-air-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-oatmeal">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-oatmeal-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-teal">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-teal-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-heather">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-heather-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-cream">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-cream-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-skyblue">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-skyblue-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-grey">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-grey-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-stormCloud">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-stormCloud-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-lightStormCloud">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-lightStormCloud-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-darkGrey">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-darkGrey-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-lightGrey">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-lightGrey-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-lighterGrey">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-lighterGrey-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-washable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-washable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-changeable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-changeable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-configurable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-configurable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-expandable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-expandable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-durable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-durable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-comfortable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-comfortable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-storeable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-storeable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>
<div class="row collapse">
  <div class="column small-12 medium-6 text-center home-promo promo-moveable">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
  <div class="column small-12 medium-6 text-center home-promo promo-moveable-alt">
    <p>STACK MORE, SAVE MORE</p>
    <h3>Up to 30% off Sactionals + 36 Months Interest-Free Financing*</h3>
    <a href="/sactionals.html" class="call-to-action">Shop Sactionals</a>
  </div>
</div>

Rewards

Search

Social

<a href="http://www.facebook.com/LoveSac" title="Facebook" target="_blank" class="fa-stack fa-lg social ls-facebook">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</a>
<a href="https://twitter.com/lovesac" title="Twitter" target="_blank" class="fa-stack fa-lg social ls-twitter">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</a>
<a href="https://plus.google.com/116348953303385778583" title="Google +" target="_blank" class="fa-stack fa-lg social ls-google-plus">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-google-plus fa-stack-1x fa-inverse"></i>
</a>
<a href="http://pinterest.com/lovesac/" title="Pinterest" target="_blank" class="fa-stack fa-lg social ls-pinterest">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-pinterest fa-stack-1x fa-inverse"></i>
</a>
<a href="http://www.youtube.com/user/LoveSacHQ" title="Youtube" target="_blank" class="fa-stack fa-lg social ls-youtube">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</a>
<a href="http://couchlife.lovesac.com/"  title="Couch Life" target="_blank" class="fa-stack fa-lg social ls-tumblr">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-tumblr fa-stack-1x fa-inverse"></i>
</a>
<a href="http://www.lovesac.com" class="fa-stack fa-lg social ls-pied-piper-alt">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-pied-piper-alt fa-stack-1x fa-inverse"></i>
</a>

Swatches Menu

Form elements include checkboxes, radio buttons, inputs and dropdowns.

  • Request Swatches
<div class="ls-swatch-container">
    <div class="ls-swatch-count badgeRound badgeMarketing">
        <span></span>
    </div>

    <a href="#" class="open-menu fa opener">&#xf08a;</a>

    <a class="ls-open down opener"></a>

    <ul>
        <li class="order-swatches"><a href="#"><img src="https://cdn.lovesac.com/skin/frontend/lovesac/ls-default/img/swatches/MAIL_ICON.jpg" alt="Request Swatches"/></a></li>
    </ul>
</div>

Tabbed Menus

First Option Contents

Second Option Contents

<ul class="tabs" data-tabs id="faq-tabs">
    <li class="tabs-title is-active"><a href="#first" aria-selected="true">First Option</a></li>
    <li class="tabs-title"><a href="#second">Second</a></li>
</ul>

<div class="tabs-content" data-tabs-content="faq-tabs">

    <div class="tabs-panel is-active" id="first">
      <h1>First Option Contents</h1>
    </div>

    <div class="tabs-panel" id="second">
      <h1>Second Option Contents</h1>
    </div>
</div>

Tenet Separators

SVG Separators, now all in one color, available in: changeable, comfortable, configurable, durable, expandable, washable

Content Here


Content Here


Content Here


Content Here


Content Here


Content Here


Content Here

<p>Content Here</p>
<hr class="tenet tenet-changeable" />
<p>Content Here</p>
<hr class="tenet tenet-comfortable" />
<p>Content Here</p>
<hr class="tenet tenet-configurable" />
<p>Content Here</p>
<hr class="tenet tenet-durable" />
<p>Content Here</p>
<hr class="tenet tenet-expandable" />
<p>Content Here</p>
<hr class="tenet tenet-washable" />
<p>Content Here</p>

Track