title: "Content" navTitle: "Content" summaryParagraph: Content limits the width its content to the maximum allowed width for any given screen size, and centres it within the viewport. tags: ["Content", "Structure"] demoStoryId: Content-react--default

import WhenToUseAndWhenNotToUse from "docs-components/WhenToUseAndWhenNotToUse" import WhenToUse from "docs-components/WhenToUse" import WhenNotToUse from "docs-components/WhenNotToUse" import DoAndDontContainer from "docs-components/DoAndDontContainer" import Do from "docs-components/Do" import Dont from "docs-components/Dont"

To keep in mind

• Content will match the width and alignment of the TitleBlockZen content
• Content should be used as a wrapper for most page content below the title block
• Content should always be wrapped in a Container to ensure it is spaced correctly
• Container will stretch to the edge of the viewport, and so it can be used as a container for full-width elements (backgrounds)

• Use Content as a wrapper for most page content below the title block

• When you’re implementing the "skirt" below the title block — there’s a specific Skirt component for that