Auto Layout Section Elements
COMPONENT SELECTOR GUIDE
“Banner Slideshow” 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 Container | ||
| .user-items-list-section | The outer container for the auto layout page sections. This selector can be used to select all auto layout sections no matter what the layout is. |
|
| Main Title | ||
| .user-items-list-section .list-section-title | The list section title container. |
|
| .user-items-list-section .list-section-title p | The list section title text element. |
|
| Slideshow Containers | ||
| .user-items-list-section .user-items-list-banner-slideshow | The list section container using the "Banner Slideshow" layout. |
|
| .user-items-list-banner-slideshow .slideshow-wrapper | The slideshow outer wrapper. |
|
| .user-items-list-banner-slideshow .slideshow-gutter | The slideshow gutter, which adds horizontal padding to the slideshow. |
|
| .user-items-list-banner-slideshow .slideshow-holder | The container for the slideshow. |
|
| .user-items-list-banner-slideshow .slides | The parent container for the slides. |
|
| Individual List Item Elements | ||
| .user-items-list-banner-slideshow .list-item | The individual slideshow items. |
|
| .user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] | The list items with the "Card" backgrouond enabled. |
|
| .user-items-list-banner-slideshow .slide-media-container | The media container. |
|
| .user-items-list-banner-slideshow .slide-media-container img | The image elements. |
|
| .user-items-list-banner-slideshow .slide-content.list-item-card-background | The text container, and the element that is used to style the background color if enabled. |
|
| .user-items-list-banner-slideshow .list-item-content__title | The list item title. |
|
| .user-items-list-banner-slideshow .list-item-content__description | The list item description container. |
|
| .user-items-list-banner-slideshow .list-item-content__description p | The list item description paragraph. |
|
| .user-items-list-banner-slideshow .list-item-content__button-container | The list item button container. |
|
| .user-items-list-banner-slideshow .list-item-content__button | The list item button element. |
|
| Desktop Arrows | ||
| .user-items-list-banner-slideshow .desktop-arrows | The desktop arrow containers. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--left | The left desktop arrow container. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--right | The right desktop arrow container. |
|
| .user-items-list-banner-slideshow .desktop-arrows .user-items-list-banner-slideshow__arrow-button | The desktop arrow buttons. |
|
| .user-items-list-banner-slideshow .desktop-arrows .user-items-list-banner-slideshow__arrow-button--left | The left desktop arrow button. |
|
| .user-items-list-banner-slideshow .desktop-arrows .user-items-list-banner-slideshow__arrow-button--right | The right desktop arrow button. |
|
| .user-items-list-banner-slideshow .desktop-arrows .user-items-list-banner-slideshow__arrow-icon-background | The desktop arrow background, which are used to style the background color of the icons. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--left .user-items-list-banner-slideshow__arrow-icon-background | The left desktop arrow background, which is used to style the background color of the icons. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--right .user-items-list-banner-slideshow__arrow-icon-background | The right desktop arrow background, which is used to style the background color of the icons. |
|
| .user-items-list-banner-slideshow .desktop-arrows .user-items-list-banner-slideshow__arrow-icon | The desktop arrow SVG icons. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--left .user-items-list-banner-slideshow__arrow-icon | The left desktop arrow SVG icon. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--right .user-items-list-banner-slideshow__arrow-icon | The right desktop arrow SVG icon. |
|
| .user-items-list-banner-slideshow .desktop-arrows .user-items-list-banner-slideshow__arrow-icon-path | The desktop arrow SVG path elements, which are used to set the stroke color of the arrow. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--left .user-items-list-banner-slideshow__arrow-icon-path | The left desktop arrow SVG path elements, which are used to set the stroke color of the arrow. |
|
| .user-items-list-banner-slideshow .desktop-arrows .arrow-container--right .user-items-list-banner-slideshow__arrow-icon-path | The right desktop arrow SVG path elements, which are used to set the stroke color of the arrow. |
|
| Mobile Arrows | ||
| .user-items-list-banner-slideshow .mobile-arrows | The mobile arrows container. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button | The mobile arrow buttons. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--left | The left mobile arrow button. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--right | The right mobile arrow button. |
|
| .user-items-list-banner-slideshow .mobile-arrow-icon-background-area | The mobile arrow background areas, which are used to style the background color of the icons. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--left .mobile-arrow-icon-background-area | The left mobile arrow background area, which is used to style the background color of the icons. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--right .mobile-arrow-icon-background-area | The right mobile arrow background area, which is used to style the background color of the icons. |
|
| .user-items-list-banner-slideshow .mobile-arrow-icon | The mobile arrow SVG icons. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--left .mobile-arrow-icon | The left mobile arrow SVG icon. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--right .mobile-arrow-icon | The right mobile arrow SVG icon. |
|
| .user-items-list-banner-slideshow .mobile-arrows .mobile-arrow-icon-path | The mobile arrow icon SVG path elements, which are used to style the stroke color of the arrows. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--left .mobile-arrow-icon-path | The left mobile arrow icon SVG path elements, which are used to style the stroke color of the arrows. |
|
| .user-items-list-banner-slideshow .mobile-arrow-button--right .mobile-arrow-icon-path | The right mobile arrow icon SVG path elements, which are used to style the stroke color of the arrows. |
|
| Main Button | ||
| .user-items-list-section .list-section-button-container | The list section button container. |
|
| .user-items-list-section .list-section-button | The list section button link element. |
|
HTML Structure Explanation
The HTML structure of the “Banner Slideshow” Auto Layout Section elements.
Banner Slideshow Elements
The HTML structure of the “Banner Slideshow” Auto Layout Section elements.
Banner Slideshow Desktop Arrows
The desktop arrow HTML elements.
The desktop arrow HTML elements.
Banner Slideshow Mobile Arrows
The mobile arrow HTML elements.
The mobile arrow HTML elements.
“Carousel” 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 Container | ||
| .user-items-list-section | The outer container for the auto layout page sections. This selector can be used to select all auto layout sections no matter what the layout is. |
|
| Main Title | ||
| .user-items-list-section .list-section-title | The list section title container. |
|
| .user-items-list-section .list-section-title p | The list section title text element. |
|
| Slideshow Containers | ||
| .user-items-list-section .user-items-list-carousel | The list section container using the "Carousel" layout. |
|
| .user-items-list-carousel .user-items-list-carousel__gutter | The carousel gutter. |
|
| .user-items-list-carousel .user-items-list-carousel__slideshow-holder | The container for the carousel. |
|
| .user-items-list-carousel .user-items-list-carousel__slides-revealer | The container for the carousel that is used to specify if the adjeacent items are shown or not. |
|
| .user-items-list-carousel .user-items-list-carousel__slides | The parent container for the carousel items |
|
| Individual List Item Elements | ||
| .user-items-list-carousel .list-item | The individual carousel items. |
|
| .user-items-list-carousel .list-item[data-is-card-enabled="true"] | The list items with the "Card" backgrouond enabled. |
|
| .user-items-list-carousel .user-items-list-carousel__media-container | The outer media container. |
|
| .user-items-list-carousel .user-items-list-carousel__media-inner | The inner media container. |
|
| .user-items-list-carousel .user-items-list-carousel__media-container img | The image elements. |
|
| .user-items-list-carousel .list-item-content | The title, description, and button container. |
|
| .user-items-list-carousel .list-item-content__text-wrapper | The text container. |
|
| .user-items-list-carousel .list-item-content__title | The list item title. |
|
| .user-items-list-carousel .list-item-content__description | The list item description container. |
|
| .user-items-list-carousel .list-item-content__description p | The list item description paragraph. |
|
| .user-items-list-carousel .list-item-content__button-container | The list item button container. |
|
| .user-items-list-carousel .list-item-content__button | The list item button element. |
|
| Desktop Arrows | ||
| .user-items-list-carousel .desktop-arrows | The desktop arrows container. |
|
| .user-items-list-carousel .desktop-arrows .arrows-bottom | The desktop arrows parent container. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button | The desktop arrow buttons. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--left | The left desktop arrow button. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--right | The right desktop arrow button. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-icon-background-area | The desktop arrow background areas, which are used to style the background color of the icons. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--left .user-items-list-carousel__arrow-icon-background-area | The left desktop arrow background area, which is used to style the background color of the icons. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-background-area | The right desktop arrow background area, which is used to style the background color of the icons. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-icon | The desktop arrow SVG icons. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--left .user-items-list-carousel__arrow-icon | The left desktop arrow SVG icon. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon | The right desktop arrow SVG icon. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-icon-path | The desktop arrow SVG path elements, which are used to set the stroke color of the arrow. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--lef .user-items-list-carousel__arrow-icon-path | The left desktop arrow SVG path elements, which are used to set the stroke color of the arrow. |
|
| .user-items-list-carousel .desktop-arrows .user-items-list-carousel__arrow-button--right .user-items-list-carousel__arrow-icon-path | The right desktop arrow SVG path elements, which are used to set the stroke color of the arrow. |
|
| Mobile Arrows | ||
| .user-items-list-carousel .mobile-arrows | The mobile arrows container. |
|
| .user-items-list-carousel .mobile-arrow-button | The mobile arrow buttons. |
|
| .user-items-list-carousel .mobile-arrow-button--left | The left mobile arrow button. |
|
| .user-items-list-carousel .mobile-arrow-button--right | The right mobile arrow button. |
|
| .user-items-list-carousel .mobile-arrow-icon-background-area | The mobile arrow background areas, which are used to style the background color of the icons. |
|
| .user-items-list-carousel .mobile-arrow-button--left .mobile-arrow-icon-background-area | The left mobile arrow background area, which is used to style the background color of the icons. |
|
| .user-items-list-carousel .mobile-arrow-button--right .mobile-arrow-icon-background-area | The right mobile arrow background area, which is used to style the background color of the icons. |
|
| .user-items-list-carousel .mobile-arrow-icon | The mobile arrow SVG icons. |
|
| .user-items-list-carousel .mobile-arrow-button--left .mobile-arrow-icon | The left mobile arrow SVG icon. |
|
| .user-items-list-carousel .mobile-arrow-button--right .mobile-arrow-icon | The right mobile arrow SVG icon. |
|
| .user-items-list-carousel .mobile-arrows .mobile-arrow-icon-path | The mobile arrow icon SVG path elements, which are used to style the stroke color of the arrows. |
|
| .user-items-list-carousel .mobile-arrow-button--left .mobile-arrow-icon-path | The left mobile arrow icon SVG path elements, which are used to style the stroke color of the arrows. |
|
| .user-items-list-carousel .mobile-arrow-button--right .mobile-arrow-icon-path | The right mobile arrow icon SVG path elements, which are used to style the stroke color of the arrows. |
|
| Main Button | ||
| .user-items-list-section .list-section-button-container | The list section button container. |
|
| .user-items-list-section .list-section-button | The list section button link element. |
|
HTML Structure Explanation
Carousel Auto Layout Section Elements
The HTML structure of the “Carousel” Auto Layout Section elements.
The HTML structure of the “Carousel” Auto Layout Section elements.
Carousel Desktop & Mobile Arrows
The desktop and mobile arrow HTML elements.
“Simple List” 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 Container | ||
| .user-items-list-section | The outer container for the auto layout page sections. This selector can be used to select all auto layout sections no matter what the layout is. |
|
| Main Title | ||
| .user-items-list-section .list-section-title | The list section title container. |
|
| .user-items-list-section .list-section-title p | The list section title text element. |
|
| Slideshow Containers | ||
| .user-items-list-section .user-items-list-simple | The list section container using the "Simple List" layout. |
|
| Individual List Item Elements | ||
| .user-items-list-simple .list-item | The individual carousel items. |
|
| .user-items-list-simple .list-item[data-is-card-enabled="true"] | The list items with the "Card" backgrouond enabled. |
|
| .user-items-list-simple .user-items-list-carousel__media-container | The outer media container. |
|
| .user-items-list-simple .user-items-list-carousel__media-inner | The inner media container. |
|
| .user-items-list-simple .user-items-list-carousel__media-container img | The image elements. |
|
| .user-items-list-simple .list-item-content | The title, description, and button container. |
|
| .user-items-list-simple .list-item-content__text-wrapper | The text container. |
|
| .user-items-list-simple .list-item-content__title | The list item title. |
|
| .user-items-list-simple .list-item-content__description | The list item description container. |
|
| .user-items-list-simple .list-item-content__description p | The list item description paragraph. |
|
| .user-items-list-simple .list-item-content__button-container | The list item button container. |
|
| .user-items-list-simple .list-item-content__button | The list item button element. |
|
| Main Button | ||
| .user-items-list-section .list-section-button-container | The list section button container. |
|
| .user-items-list-section .list-section-button | The list section button link element. |
|
HTML Structure Explanation
Simple List Auto Layout Section Elements
The HTML structure of the “Simple List” Auto Layout Section elements.
The HTML structure of the “Simple List” Auto Layout Section elements.
Unique Auto Layout Sections Using the “data-section-id” attribute
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) |
|---|---|---|
| .page-section[data-section-id="SECTION_ID_GOES_HERE"] | A page section with the specified data-section-id attribute. |
|
HTML Structure Explanation
Each page section has a “data-section-id” attribute attached to it. This gives each page section a unique way of being identified with CSS.
Each page section has a “data-section-id” attribute attached to it. This gives each page section a unique way of being identified with CSS.