# Page layouts
These layout components are designed to help you easily build smaller-scale layouts without needing to reach for CSS.
More complex full-page scaffolding can be found on the [Scaffolding](../scaffolding/scaffolding.md) page.
```tsx
StackThe Stack component is used to create a vertical stack of elements. It is a flex container that aligns items in a column direction.
```
```tsx
Stack Form LayoutsEvery item stacks with equal spacing and a responsive vertical rhythm.NameEmail
```
```tsx
Stack Card LayoutsStacks are a great way to layout content in a card format. They are responsive and easy to read.Card LayoutA card with a header, body text, and footerAnd they're all stacked verticallywith equal spacing
```
```tsx
ClusterThe Cluster component is used to create a horizontal stack of elements. It is a flex container that aligns items in a row direction.These are all in a clusterThey wrap when they run out of space
```
```tsx
Spaced Out ClusterThe Cluster component has a default space of 12px between items. You can customize this space by passing the gap prop.
```
```tsx
Justified ClusterThe Cluster component has a default horizontal alignment of start. You can customize this alignment by passing the justify prop.
```
```tsx
Aligned ClusterThe Cluster component has a default vertical alignment of top/start. You can customize this alignment by passing the align prop.
items vertically
```
```tsx
TilesThe Tiles component is used to create a horizontal grid of fixed-width items.
It is a flexible container that aligns items horizontally and will start moving items to the next row when there is no more room.Here is a longer bit of repeated copy that will surely cause the tile to wrap.Here is a longer bit of repeated copy that will surely cause the tile to wrap.Here is a longer bit of repeated copy that will surely cause the tile to wrap.Here is a longer bit of repeated copy that will surely cause the tile to wrap.
```
```tsx
CoverThe Cover component is used to create an arbitrary height layout with an option to center content and have content above/below the centered content.Centered ContentThis is a square
```
```tsx
Cover with a headingYou can place content above and below the centered content and align it any way you want, and the centered content will always be centered in the provided parent space.This is the centered contentCover Footer ContentThis is the footer content
```
```tsx
Content BlockThe ContentBlock component is used to horizontally justify and limit content.
```
```tsx
Text CenterThe `andText` prop will center the text as well as the content.
```
```tsx
Max WidthThe Center component can also take a `maxWidth` prop to limit the width of the content.
```
```tsx
GuttersThe Center component can also take a `gutters` prop to add minimum space between the content and the edges of the parent so the content never touches the edge of the parent/screen. This space only applies to the element when required, not by default.
```
```tsx
FrameThe Frame component is used to create an aspect ratio with a layout. It's especially good at handling images and videos and cropping them to fit the aspect ratio (default 16x9).
```
```tsx
1x1
```
```tsx
4x3
```
```tsx
It Works for Content As WellEverything is centered and cropped to fit the aspect ratio.
```
```tsx
Responsive SwitcherThe Responsive Switcher component is used to create a responsive layout that will automatically swap from horizontal to vertical when the content exceeds the threshold.Content on the left/topContent on the right/bottom
```
```tsx
Some Card ContentSome Card ContentSome Card Content
```
```tsx
SidekickThe Sidekick component is used to create a horizontal layout where one half of the content is fixed width, and the other half is fluid. Where there is no longer the specified sideWidth space remaining, the content will wrap to the next line.
```
```tsx
Sidekick ContentThe Sidekick component is used to create a horizontal layout where one half of the content is fixed width, and the other half is fluid. Where there is no longer the specified sideWidth space remaining, the content will wrap to the next line.
```
Container
Containers are for isolating style overrides to a specific layout. Set a container name, and apply associated styles where needed.
Containers are just container queries, and are fairly advanced. Only use them when absolutely necessary.
We will soon provide a set of predfined Containers and styles for common layout pattern adjustments.
You can also create your own containers and portable style overrides with these tools.
Container Example
We've overridden the default styles without having to modify any existing code or styles.
Container Example
These cards are functionally identical except they have different container queries based on their content widths.
Container Example
They're also perfectly portable. If you just need the layout, take everything under the Container.Apply. If you want the wrapper but not the container styles, grab the Container.Apply as well. Or, just re-use the container elsewhere to wrap other content.
Container Example
This last example is exactly the same as the others, except it's not in the container.
```tsx
Looking For More?Check out the [Scaffolding](../scaffolding/scaffolding.md) page to see how to layout full pages with these components
```
