Base Section

[slowbot]

Formatted prose with running text serving as the main content area of a page.

When to use the section component

• When you have a large section of text content with various subheadings and inline styles.
• When you want to designate a new region of the page using an h2 and section element.

When to consider something else

• When you have multiple subheadings under a single topic consider using inline styles within the same section instead of creating a new section.

Usability guidance

• Make titles brief and concise. Avoid run on titles with too many words
• Break up your text into natural paragraphs and sub sections for readability.

Accessibility

• Ensure you use your nested headers properly h2-h6 and avoid using an h1.

Implementation

Field	Value	Name
Header Group: Title	title of the section
Header Group: Lead	brief subtitle or lead in description for the section
Header Group: Body	content for the section
Secondary Body	secondary content for the section

Variants	Values	Name
Layout	Center or 2 (default)
Background	light (default), or dark. Effects: text color, background color, action color

Nested Components

• Callouts

Related USWDS Components

• Prose
• usa-section

Theme

Element	Effects	Global/Component
$theme-font-role-heading	Title	Global
$theme-lead-font-family	Lead	Global
$theme-jcc-section-background	Background color	Global/Custom
$theme-jcc-reverse-background-color	Background color	Global/Custom
$theme-link-reverse-color	Link color	Global
$theme-link-reverse-hover-color	Link color	Global
$theme-link-reverse-active-color	Link color	Global
$theme-jcc-dash-color	Dash	Global/Custom
$theme-jcc-reverse-dash-color	Dash	Global/Custom
$theme-jcc-dash-position	Dash	Global/Custom

Questions:

• ...

Figma:

https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=33%3A25
https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=131%3A0