ContentWrapper

Overview

The ContentWrapper component is a responsive layout utility that constrains the maximum width of content across different breakpoints. It provides fine-grained control over content width at each breakpoint (2xs, xs, sm, md, lg, xl, 2xl), allowing you to create responsive layouts that adapt to different screen sizes.

The component is most often used for images, providing responsive width constraints that adapt to different screen sizes. It can also be used to group content together, which is particularly useful in page builders where there are no true empty divs available.

Use the ContentWrapper component when you need to:

• Create responsive layouts with different max-widths at different breakpoints
• Wrap content sections that need consistent width constraints
• Constrain image widths responsively across breakpoints
• Group content together in page builder contexts

The component applies CSS classes based on the max-width values you provide for each breakpoint, enabling responsive design patterns where content width adapts to the viewport size.

Examples

Basic Usage

The ContentWrapper component accepts optional max-width values for each breakpoint. Only maxWidth2xs has a default value of 'fill' (which allows the content to fill available space). All other breakpoints cascade from the previous breakpoint's value if not provided. Each breakpoint accepts values of '96', '120', '356', or 'fill'.

By default, ContentWrapper will fill the available space at all breakpoints (since maxWidth2xs defaults to 'fill' and all other breakpoints cascade from it). You can use it without any props:

To constrain the width at specific breakpoints, provide the max-width values you need. Since values cascade, you only need to specify the breakpoint where you want the constraint to start:

Responsive Max-Width Configurations

You can configure different max-width values for each breakpoint to create responsive layouts that adapt to screen size. The ContentWrapper applies max-width constraints using CSS media queries that activate at each breakpoint's minimum width.

Each breakpoint accepts one of four max-width values:

• '96' - Constrains content to 96px maximum width
• '120' - Constrains content to 120px maximum width
• '356' - Constrains content to 356px maximum width
• 'fill' - No max-width constraint, content fills available space

Here's an example with different max-width values at each breakpoint:

How Breakpoints Work

The component uses a mobile-first approach where values cascade upward. Only maxWidth2xs has a default value of 'fill'. Each subsequent breakpoint will use the value from the previous breakpoint if not explicitly provided. You can override any breakpoint to change the cascade from that point forward.

Custom ClassName Usage

You can apply additional CSS classes using the className prop to customize the appearance or behavior of the ContentWrapper.

Import

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

Props