import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';

import WellImg from './article-well.jpg';

<Meta title="Components/Page layout/Intro" parameters={{ ...parameters }} />

# Layout

Layout components setup our default page structure.

Generally, our page layout includes a central text well and a few preset block breakpoints, wider and narrower than the well.

Here's how it works:

<img
  className="feature"
  src={WellImg}
  width="100%"
  style={{ margin: '3rem 0' }}
/>

The [`Article`](?path=/docs/layout-article--default) component sets up the set dimensions of the well and the block breakpoints.

The [`Block`](?path=/docs/layout-block--default) component is a wrapper for individual parts of a page that can be as wide as any of those breakpoints.

The docs in this section explain how to use our layout components to build the basic structure of your page and also how to break out of our default layout if you need to do something different.
