Project page classes

The project page design has several neat layout elements that are created by CSS. These CSS classes can be added to content elements in WordPress to ship the design. We haven't yet created any new WordPress theme or new Custom Gutenberg blocks so the recommended authoring flow for new project pages is:

• Create the new page in WordPress
• Add all the content
• Add the CSS classes for desired elements as described below
• Add the do-not-crawl tag to the page
• Publish without yet linking to the new page from anywhere
• Review the published post at its unlinked production URL to validate all the design elements came out OK

To create a group

• Put the cursor in one item in WordPress
• Hold down the shift key and click on another element
• Repeat that step to select all desired elements
• Click on the kebab (two overlapping squares) in the overlay menu and select group

Available design elements

Pull quote

This requires 3 elements:

• A group of the following two elements: Add the CSS class cagov-pull-quote to the group
• An element containing the quote content with the CSS class cagov-pull-quote-content
• An element containing the quote attribution including the em dash with the CSS class cagov-pull-quote-attribution

Spotlight section with border

A set of elements can be added to a group and the CSS class project-spotlight applied to the group to give it a border with inside padding

Text in circles

This one is not super flexible yet and will need more engineering work if too much text is desired inside the circle or if want more than 2 or 3 circles.

• Each circle should be a div (not a p) with the CSS class cagov-project-bubble-point
• All circles should be added to a group with the CSS class cagov-project-bubble-points

Summary bullets

• Each bulleted list is a list element with no additional CSS class
• Each list heading is a paragraph element with the CSS class project-page-summary-section-title This allows for the desired styling without automated accessibility violations due to out of order page headers
• Each list and its associated heading are added to a group with no additional CSS class
• Create one group for each column. This group does not have a CSS class
• All list groups are added to a single group with the CSS class project-page-summary-list

Linking to a new DIF project

There is a class available to add the red corner banner to an image:

Adding the class dif-project to the figure element will apply the CSS rules to display that red DIF banner to an image.