Illustrative Mathematics® Learn Math for life

A flexible layout component for creating page sections with configurable backgrounds, spacing, padding, and anchor tags

done

Overview

The PageSection component is a versatile layout utility that creates semantic page sections with extensive customization options. It provides control over section width, background colors, spacing between children, section padding, and supports anchor tags for navigation. The component is designed to be the primary container for organizing content into distinct sections on a page.

Use the PageSection component when you need to:

Create distinct sections on a page with different background colors
Control spacing and padding responsively or with fixed values
Add anchor tags for in-page navigation
Organize content into contained or full (maximum layout width) sections
Apply consistent theming based on background colors

The component supports both one-color and two-color backgrounds, with automatic foreground theming applied based on the selected background color to ensure proper text contrast and visual hierarchy.

Examples

Basic Usage

The most basic usage of PageSection requires specifying the width prop. The component supports 'contained' (constrained width) or 'full' (maximum layout width) options. Both width options have max-width constraints defined by design tokens:

'contained': Max-width constrained by max-width-page-section-contained (1078px) for optimal readability
'full': Max-width constrained by max-width-layout (1440px), the maximum layout width

Understanding Width Constraints

The key difference between 'contained' and 'full' width is the maximum width constraint. 'contained' uses a narrower max-width (max-width-page-section-contained: 1078px) optimized for text-heavy content and readability, while 'full' uses the maximum layout width (max-width-layout: 1440px) for wider content areas that benefit from the maximum available layout width.

For the best visual comparison of width differences, use the fullscreen preview mode. The difference is most apparent when viewing on larger screens.

Contained Width Section

Max-width constrained by max-width-page-section-contained (1078px), making it ideal for text-heavy content and improved readability. Notice how the content has a narrower maximum width.

Full Width Section

Max-width constrained by max-width-layout (1440px), the maximum layout width. Useful for wider content areas that benefit from the maximum available layout width. Notice how the content extends to a wider maximum width.

Background Types

The PageSection component supports two background types: 'one-color' and 'two-colors'. When using 'one-color', specify backgroundColorOneColor. When using 'two-colors', specify both backgroundColorTwoColorsTopColor and backgroundColorTwoColorsBottomColor to create a two-tone background with a hard edge between the two colors.

The two-colors background type is best suited for PageSections with a single child element (such as a Card) that has its own background color. This creates the visual effect of the child element floating between the previous and next sections, with the two-color background providing visual separation.

One Color Background

Single Color Section

This section uses a single background color (neutral-0).

Two Color Background

Two Color Section

This section uses a two-color background with a hard edge between neutral-100 (top) and teal-300 (bottom). The Card child element appears to float above the section background.

Spacing Options

The PageSection component allows you to control the gap between child elements using either responsive or fixed spacing values. Set gapBetweenChildrenRadio to 'responsive' or 'fixed', then specify the corresponding spacing value.

Fixed Spacing

First child element

Second child element

Third child element

Responsive Spacing

First child element

Second child element

Third child element

Padding Options

The PageSection component supports both responsive and fixed padding options for top and bottom padding only. Set sectionPaddingRadio to 'responsive' or 'fixed', then specify the corresponding padding value. Left and right padding are controlled by the built-in layout container styles and cannot be customized via props.

Responsive Padding

This section uses responsive padding that adapts to different screen sizes.

Fixed Padding

This section uses fixed padding (spacing-12) that remains consistent across all screen sizes.

Anchor Tags

The anchorTag prop allows you to add an ID to the section element, enabling in-page navigation and deep linking.

Section with Anchor Tag

This section has an anchor tag of "example-section". You can link to it using #example-section.

Additional Bottom Padding

The hasAdditionalBottomPadding prop adds extra bottom padding to the section, which is useful for creating visual separation between sections or accommodating specific design requirements.

The padding is set on an additional outside container due to wanting the background color, when in two-color mode, to evenly split the main content area (children area) rather than be offset by the additional bottom padding. It's still considered padding by naming because it's inside of the PageSection section.

Section with Additional Bottom Padding

This section has additional bottom padding enabled, creating extra space below the content.

Props

Prop

Type

Import

import { PageSection } from '@im/integral/components/styled';

PageSection