Layers and Modals

Current approach has all layer content in a .layer-content div tied to a trigger element. The trigger element will have an attribute data-layer-id, which cooresponds to the ID of its respective .layer-content element.

The layer type can either explicitly be passed along, or will be chosen based on the properties of the layer content using the Enterprise.layers.trigger() function.

Titles are required for layers and modals.

If a trigger doesn't specify a data-title attribute, layers and modals will attempt to fallback on the textContent property of their initiating .layer-trigger element. This may result in unexpected behavior if the trigger is using the SHC icon font.

If textContent is empty, a non-breaking space will be used as the title to preserve the layout.

Layers

Layers display larger amounts of information (than tooltips) upon click/tap. Its content is informational text and links only.

Use Layers for:

  • info only, 361 characters or more.
  • with link, 360 characters or less
  • Legal text (typically over 360 characters)
  • See Details / Learn More
  • Selection/input w/ single select (requires no CTA button)
  • Example: PLP filter selection (also applies to other possible scenarios w/ single select via a link - not radio, dropdown list which would require a submit button)

    DO NOT use Layers for:

  • info only, 360 characters or less

  • Input cases
  • Data Entry, Sub-tasks (breaking down a complex tasks into sub-tasks and possibly sub-sub-tasks)
  • Selection/input w/ multi-select (requires 2 CTA buttons)
  • Dialogs (elicit a response from a user) - incl: login, warnings/2step verification
  • Alerts/Errors/Confirmations or Notifications
  • Within another layer-based element (insert LINK to "parent page")
  • When you need a CTA, or other UI elements (text box, checkbox, radio, accordion, etc) - use modals

Lorem ipsum dolor sit amet, layer without scrolling trigger consectetur adipisicing elit. Iure cum dicta veritatis vero, layer with scrolling trigger quod nisi numquam asperiores voluptates aspernatur porro scrolling layer without title! Perspiciatis ratione accusamus at veritatis amet, quia.

An icon that launches a scrolling layer: H

A subtitle for this layer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus molestias eius ea debitis, nihil necessitatibus libero voluptatibus repellat, sequi ipsum fugit esse amet at illum praesentium ullam quia fuga!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

A subtitle for this layer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

A subtitle for this layer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus molestias eius ea debitis, nihil necessitatibus libero voluptatibus repellat, sequi ipsum fugit esse amet at illum praesentium ullam quia fuga!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

A subtitle for this layer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus molestias eius ea debitis, nihil necessitatibus libero voluptatibus repellat, sequi ipsum fugit esse amet at illum praesentium ullam quia fuga!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.

<p>Lorem ipsum dolor sit amet, <span data-layer-id="layer-noscroll" class="layer-trigger" tabindex="0">layer without scrolling trigger</span> consectetur adipisicing elit. Iure cum dicta veritatis vero, <span data-layer-id="layer-scroll" class="layer-trigger" tabindex="0">layer with scrolling trigger</span> quod nisi numquam asperiores voluptates aspernatur porro <span data-layer-id="layer-no-title" class="layer-trigger" tabindex="0">scrolling layer without title</span>! Perspiciatis ratione accusamus at veritatis amet, quia.</p>

<p>An icon that launches a scrolling layer: <span data-layer-id="layer-no-title-no-copy" class="layer-trigger font-SHC-Icons" tabindex="0">H</span></p>

<div id="layer-scroll" data-title="Title for this element which happens to be very long and keeps going and going and going whew." class="layer-content">
  <h3>A subtitle for this layer</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus <strong>molestias eius ea debitis</strong>, nihil necessitatibus libero voluptatibus repellat, sequi ipsum fugit esse amet at illum praesentium ullam quia fuga!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
</div>
<div id="layer-noscroll" data-title="A short title for this element." class="layer-content">
  <h3>A subtitle for this layer</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
</div>
<div id="layer-no-title" class="layer-content">
  <h3>A subtitle for this layer</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus <strong>molestias eius ea debitis</strong>, nihil necessitatibus libero voluptatibus repellat, sequi ipsum fugit esse amet at illum praesentium ullam quia fuga!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
</div>
<div id="layer-no-title-no-copy" class="layer-content">
  <h3>A subtitle for this layer</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus <strong>molestias eius ea debitis</strong>, nihil necessitatibus libero voluptatibus repellat, sequi ipsum fugit esse amet at illum praesentium ullam quia fuga!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam fugit! Explicabo ipsum dolor sit amet, consectetur adipisicing elit. Tempora, aut ducimus sed, perferendis laboriosam numquam natus iste expedita eum. Cupiditate saepe, tenetur eaque, voluptatem dolore sed eos eius quam perferendis!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eveniet quia vero, sint autem officia illum quas dolore alias, modi eos ut optio natus iure dignissimos iusto ipsam.</p>
</div>

Modals

Modal (windows/layers) create a "mode" where parent window can't be used; or indicate a new mode / state. They require users to act explicitly in order to exit the mode and return to the parent window, or proceed to another. The background is intentionally dimmed ("lightbox") to give focus/call attention and clearly communicate the availability of the parent window. We limit the application of lightbox pattern solely to modal windows.

Use Modals for:

  • When you need a CTA button or other UI elements
  • Inputs (Data Entry/Selection)
  • Signup
  • Selection/input w/ multi-select (requires 2 CTA buttons) (eg. product options selection (mWeb), Filters (if multiple)).
  • contact, feedback, other persistent forms
  • Sub-tasks (breaking down a complex tasks into sub-tasks and possibly sub-sub-tasks)
  • Dialog (elicit a response from a user)
  • login
  • critical dialogs (i.e. warning about data entry loss - ex: leaving checkout; or when a customer is about to permanently delete a list and must confirm or cancel).
  • Notifications
  • Minicart
  • Detail
  • media galleries / players
  • details / learn more / read more - only if multi-step, or if include UI elements
  • help elements/tips (only if multi-step, or if include UI elements)

    DO NOT use Modals for:

  • Detail / More (info only)

  • Glossary information (definitions)
  • Hints/tips/help i.e. ā€œ?ā€ or ā€œiā€ icons
  • Drop Down Navigation Menus
  • Selection/input w/ single select (requires no CTA button, use Layer)
  • Price breakdowns/call-outs
  • Alerts/Errors/Confirmations
  • Within another layer-based element (insert LINK to "parent page")

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum dicta veritatis vero, quod nisi numquam asperiores modal trigger voluptates aspernatur porro! Perspiciatis modal with scroll trigger ratione accusamus at veritatis amet, quia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda officiis illo ab ipsam aut quod, vitae saepe commodi, soluta atque tempore officia corporis nostrum dicta, repudiandae iure ullam consectetur esse!

A subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt andae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit aniserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Legal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modiatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eusimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandaeem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ofo ab ipsam aut quod, vitae saepe commodi, soluta atque tempore officia corporis nostrum dicta, repudiandae iure ullam consectetur esse!

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cum dicta veritatis vero, quod nisi numquam asperiores <span data-layer-id="modal1"  class="layer-trigger" tabindex="0">modal trigger</span> voluptates aspernatur porro! Perspiciatis <span data-layer-id="modal2" class="layer-trigger" tabindex="0">modal with scroll trigger</span> ratione accusamus at veritatis amet, quia.</p>
<div id="modal1" data-title="Title text for this element" data-buttons-active="true" data-buttons-submit="yep" data-buttons-cancel="nope" class="layer-content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <form class="clearfix">
    <label for="this-field" class="input-text">
      <span class="field-name">Email Address <abbr title="required">- required</abbr></span>
      <input type="text" name="this-field" id="this-field" />
    </label>
  </form>
  <p class="secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda officiis illo ab ipsam aut quod, vitae saepe commodi, soluta atque tempore officia corporis nostrum dicta, repudiandae iure ullam consectetur esse!</p>
</div>
<div id="modal2" data-title="Title text for this element" data-buttons-active="true" data-buttons-submit="yep" data-buttons-cancel="nope" class="layer-content">
  <h3>A subtitle</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt andae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit aniserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <h4>Legal</h4>
  <p class="secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modiatem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p class="secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandae perferendis vel modi voluptatem. Eusimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p class="secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab impedit animi obcaecati deserunt accusamus repudiandaeem. Eum possimus facilis aperiam repellendus deleniti sint voluptatem alias dicta nulla.</p>
  <p class="secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ofo ab ipsam aut quod, vitae saepe commodi, soluta atque tempore officia corporis nostrum dicta, repudiandae iure ullam consectetur esse!</p>
</div>