Homepage background elements
About this component
To break up the page and insert school spirit, we chose to use various background elements. These elements aren’t part of the core content, but make the page more visually interesting and help to divide and contain the page’s topics.
Guidelines
Every other content section has a navy background. The “next steps” section is the only part of the page with a teal background. The rest of the page’s background is white. Any background color can have an icon element (the PCC diamond and Poppie the Panther pawprints).
Styling
The color backgrounds stretch the full width of the screen. Icon elements are dispersed around the page as part of the background. Content sections that have a navy or teal background use white headings and text.
Each section slides up into view as you scroll down the page.
How to use for Homepage background treatments
Editable in the HTML (see “development info”).
Example of Homepage background treatments
Navy sections
Teal section
PCC diamond
Pawprints
