Promotional Pop-Up Elements
COMPONENT SELECTOR GUIDE
Global Promotional Pop-Up Elements (Elements That Are the Same Regardless of the Layout)
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slice-gallery-item | The image gallery image container. |
|
| .sqs-popup-overlay .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .form-item | The form input items. |
|
| .sqs-popup-overlay .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .field-error | The form input error field. |
|
| .sqs-popup-overlay button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay button[type="submit"] .submit-form-label | The newsletter form submit button. |
|
| .sqs-popup-overlay .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
See the below layout-specific sections for the appropriate HTML structure.
Overlay Center Card 01
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-newsletter | The outer containe for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard01 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Center Card 01 pop-up.
The HTML structure of the Overlay Center Card 01 pop-up.
The HTML for the button action.
Overlay Center Card 02
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-gallery-item | The image gallery media container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-newsletter | The outer container for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard02 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Center Card 02 pop-up.
The HTML structure of the Overlay Center Card 02 pop-up.
The HTML for the button action.
Overlay Center Card 03
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-gallery-item | The image gallery media container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-newsletter | The outer container for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard03 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Center Card 03 pop-up.
The HTML structure of the Overlay Center Card 03 pop-up.
The HTML for the button action.
Overlay Center Card 04
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-gallery-item | The image gallery image container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-newsletter | The outer containe for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard04 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Center Card 04 pop-up.
The HTML structure of the Overlay Center Card 04 pop-up.
The HTML for the button action.
Overlay Center Card 05
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-gallery-item | The image gallery image container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-newsletter | The outer containe for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycentercard05 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Center Card 05 pop-up.
The HTML structure of the Overlay Center Card 05 pop-up.
The HTML for the button action.
Overlay Corner Card 01
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlaycornercard01 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Center Card 05 pop-up.
The HTML structure of the Overlay Center Card 05 pop-up.
The HTML for the button action.
Overlay Full Bottom 01
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .group-copy | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .group-text | The text content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullbottom01 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Full Bottom 01 pop-up.
The HTML structure of the Overlay Full Bottom 01 pop-up.
The HTML for the button action.
Overlay Full Center 01
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slide-layer | The pop-up outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slide-layer-content | The pop-up content container. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-gallery-item | The image gallery media container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-newsletter | The outer container for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter01 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Full Center 01 pop-up.
The HTML structure of the Overlay Full Center 01 pop-up.
The HTML for the button action.
Overlay Full Center 02
Relevant CSS Selectors
| CSS Selector(s) | HTML Element | Picture of Element (the blue area highlights the element; the green area highlights the element's padding; the orange area highlights the element's margin) |
|---|---|---|
| Outer Containers | ||
| .sqs-popup-overlay | The outer pop-up container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 | The inner pop-up container. This element will have an additional class name corresponding to the pop-up layout currently being applied. |
|
| Close Button Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-popup-overlay-close | The close button container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-popup-overlay-close:before | The close button container's "x" icon. |
|
| Gallery Image Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slide-layer.layer-back | The gallery outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-gallery-content | The image gallery container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-gallery-item | The image gallery media container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-gallery-item img | The image gallery image elements. |
|
| Content Elements | ||
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slide-layer.layer-back | The text content outer container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slide-layer-content | The pop-up content container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-group | The text and actions content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slash-page-header | The pop-up header. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-body-content p | The pop-up body content. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .actions | The action container, whether it's buttons or a newsletter sign up form. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-newsletter | The outer container for the newsletter form elements. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .newsletter-form | The newsletter form element. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .input-wrapper | The wrapper for the email input and the submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .form-item | The form input items. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .field-error | The form input error field. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .form-item input | The form input element of type text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 button[type="submit"] | The newsletter form submit button. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .submit-form-label | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .form-disclaimer-text | The form disclaimer text container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .form-submission-text | The form post-submit text. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .form-submission-html | The form post-submit HTML if you've added any |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-buttons | The action button(s) container. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-buttons ul | Thhe buttons list. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-buttons ul li | The list item elements that contain the button links. |
|
| .sqs-popup-overlay .sqs-slide.yui3-overlayfullcenter02 .sqs-slice-buttons ul li a | The button links. |
|
HTML Structure Explanation
The HTML structure of the Overlay Full Center 02 pop-up.
The HTML structure of the Overlay Full Center 02 pop-up.
The HTML for the button action.