Events Listing Page

Events Listing Page 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)
Events Inner & Outer Containers
body[class*="collection-type-events"].view-list	This selector will select the body elements for all event layouts.
.events-list	The parent container for the event list items.
.eventlist-event	The individual event item, which is styled using a flexbox.
Event Thumbnail Elements
.eventlist-column-thumbnail	The parent container for the thumbnail image.
.eventlist-column-thumbnail img	The thumbnail image.
Date Tag on Thumbnail
.eventlist-datetag-inner	The parent container for the date elements that appear in the top right-hand corner of the thumbnail image.
.eventlist-datetag-startdate--month	The start date month.
.eventlist-datetag-startdate--day	The start date day.
.eventlist-datetag-enddate	The end date.
Text Content
.eventlist-column-info	The container for the text elements, including the title, meta data, excerpt, and button.
.eventlist-title	The event title text.
.eventlist-title-link	The event title link.
.eventlist-meta	The outer container for the meta data, including the export options for Google and ICS.
.eventlist-meta-export	The parent container for the export options: Google and ICS.
.eventlist-meta-export-google	The google export link.
.eventlist-meta-export-ical	The ICS export link.
.eventlist-meta-export-divider, .eventlist-meta-export-divider:before	The export links divider container and it's corresponding pseudo-element that adds the divider.
.eventlist-excerpt p	The Google export link.
.eventlist-button	The event button link.