Spark Design System
STYLE-GUIDE
Page Sections
Guidance on healthy relationships between content
Deprecation Alert
This content is now served by a component in Epiphany! 🎉
Please refer to the guides at epiphany.cars.com.
This page remains for legacy context only and is no longer supported.
The following information may be out of date or incorrect!
The sds-page-section system is to be used for creating divisions of content on a page.
Types
- sds-page-section: Default page section that is centered on the page, and maxes out at
1170px. Can contain header, content (required), and footer areas. - sds-page-section--full: Introduces a full-bleed, banded area that contains a centered content area. Background color defaults to
#f2f2f2.
Should be used to call out special modules to set apart from the other content on the page. Not to be used for alternating sections on the page or as background for cards.
- sds-page-section--hero: Used for hero images, this can be seen in primary hero header template for the hero imagery.
- sds-page-section--header: As used in the Secondary hero template (found in the secondary hero header template, this section usually precedes a hero image, and introduces the page via an
h1and other introductory text.
Examples
See the full-page example for exact pixel spacing values. Below shows the visual hierarchy of how each section is nested within the others.
Also see examples applied to content column templates.