Video Listing Page
COMPONENT SELECTOR GUIDE
Video Listing Page Grid Elements (Not Including Side or Top Navigation)
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) |
|---|---|---|
| .lessons-list | The outer wrapper for the video page elements, including the navigation and the video grid layout. |
|
| .lessons-list .list-grid | The parent container for the video grid items. |
|
| .lessons-list .grid-item | The children of the video grid container. |
Image Placement: Above
Image Placement: Below
|
| .lessons-list .grid-image | An ancestor element of the actual image element. This particular element has a margin-bottom applied. |
Image Placement: Above
Image Placement: Below
|
| .lessons-list .grid-image img | The image element of the grid item. |
|
| .lessons-list .grid-main-meta | The container for the text elements, including the meta data, the title, and the description. |
Image Placement: Above
Image Placement: Below
|
| .lessons-list .lessons-grid-meta-container | The container for the meta data, including the date and the categories. |
|
| .lessons-list .grid-categories | The grid categories container. |
|
| .lessons-list .lesson-category a | The individual category text links. |
|
| .lessons-list .lesson-title | The lesson title text. |
|
| .lessons-list .lesson-title a | The lesson title text link. |
|
| .lessons-list .grid-desc p | The lesson description text. |
|
HTML Structure Explanation
Each lesson grid container with it’s descendant elements highlighted.
Each lesson grid container with it’s descendant elements highlighted.
Video Listing Page Side Navigation
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) |
|---|---|---|
| .lessons-list .nested-category-tree-wrapper | The main wrapper for the side navigation items. |
|
| .lessons-list .nested-category-tree-wrapper ul | The unordered list parent wrapper for the category items. |
|
| .lessons-list .category-item | The list item child elements of the unordered list described above. |
|
| .lessons-list .category-link | The category link text that's inside of the list items. |
|
| .lessons-list .category-link.active | The category link that is currently active. |
|
HTML Structure Explanation
The main side navigation wrapper that has a class name of “nested-category-tree-wrapper” and it’s descendant elements.
The main side navigation wrapper that has a class name of “nested-category-tree-wrapper” and it’s descendant elements.
Video Listing Page Top Navigation
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) |
|---|---|---|
| .lessons-list .nested-category-children | The main wrapper unordered list for the top navigation items. This has a margin-right style applied to it. | |
| .lessons-list .nested-category-breadcrumb-list-item | The list item category items. |
|
| .lessons-list .nested-category-breadcrumb-link | The category link text that's inside of the list items. |
|
| .lessons-list .nested-category-breadcrumb-link.active | The category link that is currently active. |
|
| .lessons-list .breadcrumb-separator | The category link separator/delimiter. |
|
HTML Structure Explanation
The main top navigation wrapper that has a class name of “nested-category-children” and it’s descendant elements.
The main top navigation wrapper that has a class name of “nested-category-children” and it’s descendant elements.