Content Modules

Cards

Fashion Card

Hayley Paige

$1,200-$1,999

 
  <div class="photo-card fashion">
      <div class="panel-image">
          <a href="http://www.theknot.com">
            <img alt="" src="http://media.theknot.com/ImageStage/Objects/0031/0161901/main_image.jpg"/>
          </a>
      </div>
      <div class="panel-heading">
        <span>
          <h2>Hayley Paige</h2>
          <h3>$1,200-$1,999</h3>
        </span>
          <a class="btn btn-alternate favorite"><span class="icon icon-general-heart"></span></a>
      </div>
  </div>

Storefront Card

Abel's on the Lake

(105)

Driftwood, TX

Capacity: More than 400 | $$$

 
<div class="photo-card storefront icon-card">
    <span>
        <a href="http://www.theknot.com">
            <div class="panel-image">
                <span class="icon icon-vendor-car"></span>
            </div>
            <div class="panel-heading">
                <h2>Abel's on the Lake</h2>

                <span class="star-rating star-rating-sm">
                    <span class="rating icon icon-general-star-filled"></span>
                    <span class="rating icon icon-general-star-filled"></span>
                    <span class="rating icon icon-general-star-filled"></span>
                    <span class="rating icon icon-general-star"></span>
                    <span class="rating icon icon-general-star"></span>
                </span>

                <span class="review-numbers">(105)</span>
                <span class="icon icon-image-bow icon-image-bow-sm"></span>

                <h3 class="secondary-info">Driftwood, TX</h3>
                <h3 class="secondary-info">Capacity: More than 400 | $$$</h3>
            </div>
        </a>
    </span>
</div>

Storefront Card with Photo

NOTE: Use the class .no-border-lg at .storefront level to remove border and box-shadow from storefront photo card on desktop

Stonehouse Villa

(105)

Driftwood, TX

Capacity: More than 400 | $$$

 
<div class="photo-card storefront">
    <a href="http://www.theknot.com">
        <div class="panel-image">
              <img alt="" src="http://media.front.xoedge.com/images/1fda789d-498e-4e47-bf37-d4338e27aeb3"/>
            </a>
        </div>
        <div class="panel-heading">
          <span>
            <h2>Stonehouse Villa</h2>

            <span class="star-rating star-rating-sm">
              <span class="rating icon icon-general-star-filled"></span>
              <span class="rating icon icon-general-star-filled"></span>
              <span class="rating icon icon-general-star-filled"></span>
              <span class="rating icon icon-general-star"></span>
              <span class="rating icon icon-general-star"></span>
            </span>

            <span class="review-numbers">(105)</span>
            <span class="icon icon-image-bow icon-image-bow-sm"></span>

            <h3 class="secondary-info">Driftwood, TX</h3>
            <h3 class="secondary-info">Capacity: More than 400 | $$$</h3>
          </span>
        </div>
    </a>
</div>

Real Weddings Card

NOTE: Use the class .no-border-lg at .real-weddings level to remove border and box-shadow from photo card on desktop

Hayley Paige

<div class="photo-card real-weddings">
        <div class="panel-image">
            <a href="http://www.theknot.com">
              <img src="http://www.xoedge.com/ImageStage/Objects/0001/0086090/large_image.jpg?w=779&amp;scale=both">
            </a>
        </div>
        <div class="panel-heading">
            <h2>Hayley Paige</h2>
            <a class="btn btn-alternate favorite"><span class="icon icon-general-heart"></span></a>
        </div>
    </div>

2x2 Card

The Dress: The One?

<div class="photo-card grid">
        <div class="panel-image">
          <a href="http://www.theknot.com">
            <img src="http://www.xoedge.com/ImageStage/Objects/0003/0148142/larger_image.jpg">
            <img src="http://www.xoedge.com/ImageStage/Objects/0003/0148144/larger_image.jpg">
            <img src="http://www.xoedge.com/ImageStage/Objects/0003/0148145/larger_image.jpg">
            <img src="http://www.xoedge.com/ImageStage/Objects/0003/0148146/larger_image.jpg">
          </a>
        </div>
        <div class="panel-heading">
            <h2>The Dress: The One?</h2>
        </div>
</div>

Mem Com Photo Card

EDIT 
<div class="photo-card memcom">
    <div class="panel-image">
        <a href="http://www.theknot.com">
          <img alt="" src="http://media.theknot.com/ImageStage/Objects/0031/0085081/main_image.jpg"/>
        </a>
    </div>
    <div class="panel-heading">
        <a class="btn"><span class="icon icon-general-edit"></span></a>
        <span class="content label">EDIT</span>
    </div>
</div>

Collapsible

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 

<div class="panel-group" id="accordion">
    <div class="panel">
        <div class="panel-heading">
            <a data-toggle="collapse" href="#session1" class="collapsed">
                <h2 class="panel-title">
                    Dress Details
                </h2>
                <span class="icon icon-general-caret-down"></span>
                <span class="icon icon-general-caret-up"></span>
            </a>
        </div>

        <div id="session1" class="panel-collapse collapse">
            <p class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
                moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
                proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            <a data-toggle="collapse" href="#session2" class="collapsed">
                <h2 class="panel-title">
                    Other Details
                </h2>
                <span class="icon icon-general-caret-down"></span>
                <span class="icon icon-general-caret-up"></span>
            </a>
        </div>

        <div id="session2" class="panel-collapse collapse">
            <p class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
                moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
                Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
                shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
                proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
                aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </p>
        </div>
    </div>
</div>

Color Selection

<form action="">
    <div class="row">
        <ul class="color-selection" data-toggle="checked">
          <li class="color-swatch white">
              <input type="checkbox" class="hide" id="swatch-white" value="white">
              <label class="checkbox" for="swatch-white"></label>
          </li>
          <li class="color-swatch ivory">
              <input type="checkbox" class="hide" id="swatch-ivory" value="ivory">
              <label class="checkbox" for="swatch-ivory"></label>
          </li>
          <li class="color-swatch gray">
              <input type="checkbox" class="hide" id="swatch-gray" value="gray">
              <label class="checkbox" for="swatch-gray"></label>
          </li>
          <li class="color-swatch silver">
              <input type="checkbox" class="hide" id="swatch-silver" value="silver">
              <label class="checkbox" for="swatch-silver"></label>
          </li>
          <li class="color-swatch black">
              <input type="checkbox" class="hide" id="swatch-black" value="black">
              <label class="checkbox" for="swatch-black"></label>
          </li>
          <li class="color-swatch brown">
              <input type="checkbox" class="hide" id="swatch-brown" value="brown">
              <label class="checkbox" for="swatch-brown"></label>
          </li>
          <li class="color-swatch yellow">
              <input type="checkbox" class="hide" id="swatch-yellow" value="yellow">
              <label class="checkbox" for="swatch-yellow"></label>
          </li>
          <li class="color-swatch gold">
              <input type="checkbox" class="hide" id="swatch-gold" value="gold">
              <label class="checkbox" for="swatch-gold"></label>
          </li>
          <li class="color-swatch orange">
              <input type="checkbox" class="hide" id="swatch-orange" value="orange">
              <label class="checkbox" for="swatch-orange"></label>
          </li>
          <li class="color-swatch red">
              <input type="checkbox" class="hide" id="swatch-red" value="red">
              <label class="checkbox" for="swatch-red"></label>
          </li>
          <li class="color-swatch pink">
              <input type="checkbox" class="hide" id="swatch-pink" value="pink">
              <label class="checkbox" for="swatch-pink"></label>
          </li>
          <li class="color-swatch purple">
              <input type="checkbox" class="hide" id="swatch-purple" value="purple">
              <label class="checkbox" for="swatch-purple"></label>
          </li>
          <li class="color-swatch blue">
              <input type="checkbox" class="hide" id="swatch-blue" value="blue">
              <label class="checkbox" for="swatch-blue"></label>
          </li>
          <li class="color-swatch green">
              <input type="checkbox" class="hide" id="swatch-green" value="green">
              <label class="checkbox" for="swatch-green"></label>
          </li>
        </ul>
    </div>
</form>

Large Hero Header

Image Title
Photo by Photographer Credit

Hero Title

Hero text. Taxidermy Blue Bottle Echo Park health goth slow-carb. You probably haven't heard of them squid Bushwick, literally put a bird on it health goth master cleanse Neutra pug cronut fixie brunch PBR.

<div class="large-hero-header">
  <div class="large-hero-header-inner col-lg-7 col-xs-12 no-padding">
    <a href="http://example.com">
      <img alt="Image Title" class="large-hero-header-image" src="http://placehold.it/729x486">
    </a>
    <div class="credit">Photo by <span class="content value">Photographer Credit</span></div>
  </div>
  <div class="col-lg-5 col-xs-12">
    <div class="large-hero-header-text">
      <div class="center-wrapper">
        <div class="centered-content">
          <h1 class="topic-heading js-page-name">Hero Title</h1>
          <p>Hero text. Taxidermy Blue Bottle Echo Park health goth slow-carb. You probably haven't heard of them squid Bushwick, literally put a bird on it health goth master cleanse Neutra pug cronut fixie brunch PBR.</p>
        </div>
      </div>
      <div id="tiers">
        <div class="content-links">
          <ul class="list-unstyled link-list xs-lg-divider">
            <li class="tier">
              <a href="http://example.com">
                <h2 style="display: inline">Tier Title</h2>
                <span class="icon icon-general-caret-right"></span>
              </a>
            </li>
            <li class="tier">
              <a href="http://example.com">
                <h2 style="display: inline">Tier Title</h2>
                <span class="icon icon-general-caret-right"></span>
              </a>
            </li>
            <li class="tier">
              <a href="http://example.com">
                <h2 style="display: inline">Tier Title</h2>
                <span class="icon icon-general-caret-right"></span>
              </a>
            </li>
            <li class="tier">
              <a href="http://example.com">
                <h2 style="display: inline">Tier Title</h2>
                <span class="icon icon-general-caret-right"></span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Full Bleed Container

Full Bleed Container

Assumes that the .full_bleed_container div will be placed outside of the .container div
Implementation Example >>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<div class="full_bleed_container">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>