Agriculture Design System
Design System for the Export Service


A collection of simple layout containers to wrap content.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/content';


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 />
<YourApplicationFooter />


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

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


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.

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