The Project Landing page allows all types of users to visit and find projects in an area or along a road. Users filter on project attributes and can view projects on a map.
Anatomy
Title and summary
A basic page has a title and a summary at the top.
Get out of jail free
(see in screenshot above)
The Projects Landing page has a Get out of jail free that links to Local programs and Studies – giving the user easy access between these three related sections.
Specs
Margin-top: 24px
Margin-bottom: 32px
Width: 100% of container
Filter section
The Projects landing page has Filtering for all of the projects. For specifics about how filtering works, visit the filtering component.
Once the user has made any filter selection, the page will display a list of their results.
Projects are sorted by “most recent” by default. Other sorting methods to include: alphabetical (A-Z), alphabetical (Z-A).
Project card
The list of projects contain cards summarizing the project details in order to provide enough information to choose the right one.
Title of the project – succinct and contains location keywords the user might expect. Comes from the H1 header on the detail page.
Location details – more specific information about the intersections and area this project is taking place in.
Timeline details – pulled from the Timeline field that displays on the project detail page.
Tags – tags for type, status and county
Summary – this could be the project overview from the project detail page or the start of it. Displays approximately 280 characters. It’s important that this isn’t too long so the page doesn’t become overwhelming.
Road (with ability to search and filter down the set)
County (with ability to search and filter down the set and use location to fill in county)
Mode
Status
Funding
Special collections
Responsive
The page scales down to single column on small browser widths. See the specs above for scaling specifics and inspect the pages in Figma to get details.
