The Travel alerts page shows a list of travel and weather alerts sorted by highest impact to lowest. The real-time travel data search and on-page filters narrow down the results.
Anatomy
Top of page advertisement
The travel alerts page can have an advertisement at the top between the breadcrumbs and the H1 title. The space is the same as the existing site ad space - leaderboard size (728x90).
Left-align the ads.
Use the existing specs and accessibility accommodations for ads.
On mobile sizes, the ad is small Mobile Banner sized.
Filtering section
The Travel alerts page has no map and starts the user on a list of results sorted by highest alert level.
Some tags include: traffic alert, road closure, construction, weather
Alert level
Some tags include: high, medium, low
Travel direction
Alert cards
The list cards on the page display all of the travel alerts.
The cards have tags for the alert type, the alert level, the title, the nearest milepost marker(s) and city, the description content, the transportation types effected, and a button to open the modal (not pictured above).
The milepost marker locations are linked to the map version of the real-time travel data.
Specs
List spacing: 16px
Tags
Margin-top: 8px
Margin-bottom: 16px
Space between: 8px
Font: base0 (mobile), base2 (desktop)
Padding: 4px 8px
Icon size: 16px 16px
The first tag has an adjusted border-radius of: 4 4 0 0.
