Course Overview Page

Course Overview Section Elements

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)
Overview Page Section
.course-list	The container for the overview section elements, including the top header with the title, description, button and progress indicator; and the accordion section elements.
Top Section
.course-list__header	The container for the header elements, which includes the course name, description, button, and progress bar indicator.
.course-list__course-name	The course name text.
.course-list__course-description	The course description container.
.course-list__course-description p	The course description text.
.course-list__course-action	The course action button container.
.course-item__course-action-button	The course action button link.
.course-list__progress-bar-container	The progress bar container.
.course-list__progress-bar	The progress bar that shows current percentage completed (the beige element).
.course-list__progress-bar-text	The text elements inside of the progress bar container, inlcuding the percentage complete text and the word "Progress".
The Chapter Overview Accordion
.course-list__list	The container for the overview accordion buttons.
.course-list__list-chapter-item	The individual accordion buttons.
.course-list__list-chapter-item-header	The outer container for the accordion button header elements, including the chapter name, the number of lessons, the chapter duration, and the downard-pointing carrot symbol on the right.
.course-list__list-chapter-item-accordion-trigger	The parent container for the accordion button header elements, including the chapter name, the number of lessons, the chapter duration, and the downard-pointing carrot symbol on the right.
.course-list__list-chapter-item-chapter-name	The chapter name text.
.course-list__list-chapter-item-chapter-meta	The container for the # of lesson and the chapter duration.
.course-list__list-chapter-item-accordion-icon-container	The container for the accordion button icon on the right of the button element.
.course-list__list-chapter-item-accordion-icon	The accordion button icon on the right of the button element.
.course-list__sublist	The sublist container which contains the chapter lesson items.
.course-list__list-course-item-inner-wrapper	The container for the chapter lesson list item elements, including the image, the lesson name, the lesson descrition, and the lesson duration. This element is styled using a flexbox.
.course-list__list-course-item-thumbnail-container	The container for the thumbnail image.
.course-list__list-course-item-thumbnail	The thumbnail image. This is not an HTML image lement, but the image is instead added using the CSS "background-image" property.
.course-list__list-course-item-info-container	The container for the lesson info text elements, including the lesson name, description, and duration.
.course-list__list-course-item-lesson-name	The lesson name text.
.course-list__list-course-item-lesson-excerpt	The lesson description container.
.course-list__list-course-item-lesson-excerpt p	The lesson description text.
.course-list__list-course-item-lesson-meta	The lesson duration text.
.course-list__list-course-item-status	The checkbox status container on the right of the lesson item.
.course-item__checkbox-svg	The vector imagery for the status checkbox. These will also target similar elements in the flyout menus on the course lesson pages unless specified otherwise.
.course-item__checkbox-svg .course-item__checkbox-svg-outline	The dashed circle outline of unfinished lessons. These will also target similar elements in the flyout menus on the course lesson pages unless specified otherwise.
.course-list__checkbox:checked+.course-list__checkbox-target .course-item__checkbox-svg .course-item__checkbox-svg-outline	The solid circle outline of the completed lessons. These will also target similar elements in the flyout menus on the course lesson pages unless specified otherwise.
.course-item__checkbox-svg .course-item__checkbox-svg-checkmark	The checkbox icon of the completed lessons. These will also target similar elements in the flyout menus on the course lesson pages unless specified otherwise.