Content

import { ... } from '@ag.ds-next/react/content';

PageContent

The PageContent component should be used to wrap your application’s page content. Typically this component will sit in-between your application’s header and footer component.

<YourApplicationHeader />
<PageContent as="main">
	<YourApplicationPageContent />
</PageContent>
<YourApplicationFooter />

SectionContent

The SectionContent component should be used to wrap sections of your application’s page content.

<SectionContent>
	<H2>Section 1</H2>
</SectionContent>
<SectionContent background="shade">
	<H2>Section 2</H2>
</SectionContent>
<SectionContent>
	<H2>Section 3</H2>
</SectionContent>

Content

The Content component can be used when you wrap content in a consistent container with a maximum width, but don’t want any associated vertical padding.

<Content>
	<Box paddingY={2}>
		<H2>Example title</H2>
	</Box>
</Content>