Contracting opportunity detail

Contracting opportunity pages contain content for a certain contract. Content is divided into topical to help users digest information in smaller chunks.

Anatomy

Tag and title

See Tag and Title on Project Detail section for specs.

Left column

The left column has a contract summary H2, the contract summary text, an optional list of tags (if that's a helpful way of including some information), a publication date label and text, submittal due label and text and estimated value label and text.

Specs

• Space between lines: 8px

• Contract Summary font: body copy medium

• Publication, submittal, estimated value font-size/line-height: body copy small

Right column

The sidebar on the contracting opportunity detail is the same width as the basic page sidebar.

The right column has a funding source, a contact section and a subscribe to updates button.

Specs

• Space between sections: 16px (mobile), 24px (desktop)

• Gray sections

  • Border: 1px solid gray 10

  • Background color: gray 5

  • Padding: 8px (mobile), 16px (desktop)

  • Spacing between title and text: 8px

  • Heading font-size/line-height/weight: base4/base6/bold (mobile), base5/base7/bold (desktop)

  • Body copy: body copy small

• Subscribe button - see specs in project detail page type

Tabs

The tabs available are “Project information”, “Submittal information” and “Links". All tabs are WYSIWYG text entry.

To view more about how tabs work – see the tabs component.

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.

Inspect contracting pages in public site mockups in Figma