Project detail
Project pages contain content for a specific project. Content is divided into topical tabs to help users digest information in smaller chunks.
Anatomy
Tag and title
Each project page has a tag indicating the type of page this is. There are a few pages that use a similar template, so the tag reinforces the category of the page you’re on. This could be “project”, “major project”, “contracting opportunity”, or others.
Specs
Font: same as H6
Padding: 8px 4px
Margin between breadcrumb and tag: 24px
Margin between tag and title: 16px
Margin between title and body: 16px
Optional alert
The project page can have an alert at the top for any blockages, news, or community requests that are needed for the project.
The cards have a title, description, and can have links.
Specs
Padding: 16px
Space between lines: 4px
Title font: H4
Description and link font: body copy medium
See alert cards for more styling
Left column
The left column has a project overview H2, the project overview text, timeline label and text, project status label and text, funding label and text, a what to expect H2, what to expect text, and space for two links directing to sections of real-time travel data.
Specs
Space between lines: 8px
Project overview and what to expect font: body copy medium
Timeline, project status, Funding font-size/line-height: body copy small
The links are child page links
Right column
The right column in the project detail template takes up more space than the standard right column. It takes up 5 out of 12 columns.
The right column has a thumbnail link of the map, a image caption, space for details about the location and map, and a button to subscribe to updates.
The clickable card of the map and “view full image” at the bottom of the thumbnail are hoverable and open an overlay of the full map image.
Specs
Clickable card
Border-radius: 4px
Font: H4
Padding: auto 8px (mobile), auto 16px (desktop)
Border: 1px solid gray 20 (default), 1px solid dark accent (hover)
Background color: primary (default), dark accent (hover)
Image caption
Margin between clickable card and image caption: 8px
More Image caption specs
Space between sections: 16px (mobile), 24px (desktop)
Details about location and map font: body copy small
Subscribe button
Border default: 1px solid [primary 100]
Padding: 8px 16px
Space between icon and text: 8px
Font-size/line-height: base2/base4
Icon: Google Material Design email
Use same styling as secondary button for states
Tabs
The tabs available are “History and background”, “Timeline”, “Funding”, “Related links" and "Contact"
To view more about how tabs work – see the Tabs component.
History & background
This is a simple text tab that the editors can format with a WYSIWYG to enter the content.
Timeline
The timeline shows the history and future of the project in chronological order, with oldest at the top. The timeline shows single points in time and bands of time. Each segment of the timeline has a date/time range and a description of that time.
Funding
This is a simple text tab that the editors can format with a WYSIWYG to enter the content. They also have the option to add automatically formatted/populated funding table by adding in a project ID. Funding information is pulled from CPDM database.
Maps & drawings
This is a WYSIWYG tab with an option to add additional media items for more detailed context.
Related links
The related links is a WYSIWYG tab where editors can share links to related information.
Contact
This is a simple text tab that the editors can format with a WYSIWYG to enter the content.
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.
Other Specs
Safety feature in History & background
Border: 1px solid gray 10
Background color: gray 5
Padding: 24px 32px
Use the same little tag as seen on the top of the page. Use light accent as background color and dark accent as text color.
Title: H3
Text: body copy small
Inspect project pages in public site mockups in Figma
Last updated