Pattern Library
List Teasers
On this page:
List teasers must include a title and either a date, photo, icon, and/or summary description and sorted by descending date.
Document or Page Lists
Date and Title with Optional Summary
07/18/2023
07/15/2023
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit ex, tempor eget pretium eu, sodales ut arcu.
07/10/2023
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
Date is wrapped with <p> with class date and displayed in mm/dd/yy or mm/dd/yyyy format.
Date will appear above title in mobile view.
Date and Title (Compact)
08/01/2023
07/05/2023
06/22/2023
The compact style is suitable for lists in a sidebar.
List is wrapped with a <div> with class doc-list-compact.
Photo, Title, and Date with Optional Summary
Document or Page Title
July 10, 2023
Document or Page Title
July 1, 2023
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit ex, tempor eget pretium eu, sodales ut arcu.
The photo should be linked like the title but not required.
Date can be displayed in mm/dd/yy or standard date format. The chosen date format must be applied to the entire list.
Photo will appear above title in mobile view.
Sidebar Notifications
With Date
11:30 am | September 1
City offices closed Monday, September 4, 2023, for Labor Day
8 am | August 13
Notification lists require a <div> wrapper with class notification.
Year is not required in date since notifications are meant for recent events.
Background color should reflect the criticality of the notification. For example, a notification that has a significant impact on the public should be red.