---
title: Layout
---
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import * as jsdoc from '@site/prebuild/jsdoc/components.layout.mjs'
import {
BaseLayoutExample,
BaseLayoutLeftExample,
BaseLayoutProseExample,
BaseLayoutRightExample,
BaseLayoutWideExample,
LayoutExample,
NoTitleLayoutExample,
} from './_examples.js'
<DocusaurusDoc>
The __Layout__ component family provides the following components:
- [BaseLayout](#baselayout)
- [BaseLayoutLeft](#baselayoutleft)
- [BaseLayoutProse](#baselayoutprose)
- [BaseLayoutRight](#baselayoutright)
- [BaseLayoutWide](#baselayoutwide)
- [Layout](#layout)
- [NoTitleLayout](#notitlelayout)
## BaseLayout
<ComponentDocs docs={jsdoc.jsdocBaseLayout} example={BaseLayoutExample} />
## BaseLayoutLeft
<ComponentDocs docs={jsdoc.jsdocBaseLayoutLeft} example={BaseLayoutLeftExample} />
## BaseLayoutProse
<ComponentDocs docs={jsdoc.jsdocBaseLayoutProse} example={BaseLayoutProseExample} />
## BaseLayoutRight
<ComponentDocs docs={jsdoc.jsdocBaseLayoutRight} example={BaseLayoutRightExample} />
## BaseLayoutWide
<ComponentDocs docs={jsdoc.jsdocBaseLayoutWide} example={BaseLayoutWideExample} />
## Layout
<ComponentDocs docs={jsdoc.jsdocLayout} example={LayoutExample} />
## NoTitleLayout
<ComponentDocs docs={jsdoc.jsdocNoTitleLayout} example={NoTitleLayoutExample} />
</DocusaurusDoc>
