# Page layouts

These layout components are designed to help you easily build smaller-scale layouts without needing to reach for CSS. &#x20;
More complex full-page scaffolding can be found on the [Scaffolding](../scaffolding/scaffolding.md) page. &#x20;

```tsx
<Stack>
    <Heading level={1}>Stack</Heading>
    <Text>The Stack component is used to create a vertical stack of elements. It is a flex container that aligns items in a column direction.</Text>
  </Stack>
```

```tsx
<Stack>
    <Heading level={2}>Stack Form Layouts</Heading>
    <Text>Every item stacks with equal spacing and a responsive vertical rhythm.</Text>
    <Stack>
      <FormFieldLabel external>Name</FormFieldLabel>
      <InputText label="Name" />
      <FormFieldLabel external>Email</FormFieldLabel>
      <InputText label="Email" />
    </Stack>
  </Stack>
```

```tsx
<Stack>
    <Heading level={2}>Stack Card Layouts</Heading>
    <Text>Stacks are a great way to layout content in a card format. They are responsive and easy to read.</Text>
    <Cluster>
      <Card elevation="base">
        <Box padding="base">
          <Stack>
            <Heading level={3}>Card Layout</Heading>
            <Text>A card with a header, body text, and footer</Text>
            <Button label="Button" />
            <Text>And they're all stacked vertically</Text>
            <Text>with equal spacing</Text>
          </Stack>
        </Box>
      </Card>
    </Cluster>
  </Stack>
```

```tsx
<Stack>
    <Heading level={1}>Cluster</Heading>
    <Text>The Cluster component is used to create a horizontal stack of elements. It is a flex container that aligns items in a row direction.</Text>
    <Cluster>
      <Chip label="Cluster Chip" />
      <Heading level={5}>These are all in a cluster</Heading>
      <Button label="Clustered items have variable widths" />
      <Text>They wrap when they run out of space</Text>
      </Cluster>
  </Stack>
```

```tsx
<Stack>
    <Heading level={2}>Spaced Out Cluster</Heading>
    <Text>The Cluster component has a default space of 12px between items. You can customize this space by passing the gap prop.</Text>

      <Cluster gap="larger">
        <Chip label="There" />
        <Chip label="is" />
        <Chip label="a" />
        <Chip label="default" />
        <Chip label="space" />
        <Chip label="between" />
        <Chip label="items" />
        <Chip label="that" />
        <Chip label="you" />
        <Chip label="can" />
        <Chip label="customize" />
      </Cluster>
      </Stack>
```

```tsx
<Stack>
  <Typography size="largest" align="end" fontWeight="bold">Justified Cluster</Typography>
  <Text align="end">The Cluster component has a default horizontal alignment of start. You can customize this alignment by passing the justify prop.</Text>
  <Cluster justify="end">
        <Chip label="You" />
        <Chip label="can" />
        <Chip label="justify" />
        <Chip label="the items" />
        <Chip label="in the cluster" />
        <Chip label="horizontally" />
      </Cluster>
</Stack>
```

```tsx
<Stack>
  <Heading level={2}>Aligned Cluster</Heading>
  <Text>The Cluster component has a default vertical alignment of top/start. You can customize this alignment by passing the align prop.</Text>
  <Cluster align="center">
        <Chip label="You can also align" />
          <Text>  
            items vertically
          </Text>
          <div style={{ height: "100px", backgroundColor: "var(--color-surface--background)", width:200 }}>
          &nbsp;
          </div>
      </Cluster>
  </Stack>
```

```tsx
<Stack>
  <Heading level={1}>Tiles</Heading>
    <Text>The 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.</Text>
  <Tiles minSize="15ch" gap="12px">
    <Text>Here is a longer bit of repeated copy that will surely cause the tile to wrap.</Text>
    <Text>Here is a longer bit of repeated copy that will surely cause the tile to wrap.</Text>
    <Text>Here is a longer bit of repeated copy that will surely cause the tile to wrap.</Text>
    <Text>Here is a longer bit of repeated copy that will surely cause the tile to wrap.</Text>
  </Tiles>
  </Stack>
```

```tsx
<Stack>
    <Heading level={1}>Cover</Heading>
    <Text>The Cover component is used to create an arbitrary height layout with an option to center content and have content above/below the centered content.</Text>
    <Cover minHeight="30vh">
      <Cover.Center>
        <Box padding="base" background="surface--background">
        <Stack>
        <Heading level={2}>Centered Content</Heading>
        <Box colorSurface="color-text" colorInverse="color-surface" invert>
            <Text>This is a square</Text>
        </Box>
        </Stack>
      </Box>
      </Cover.Center>
    </Cover>
  </Stack>
```

```tsx
<Cover minHeight="40vh">
      <Stack>
        <Heading level={2}>Cover with a heading</Heading>
        <Text>You 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.</Text>
      </Stack>
      <Cover.Center>
        <Box background="color-surface--background">
          <Text>This is the centered content</Text>
        </Box>
      </Cover.Center>
        <Box background="color-surface--background">
        <Stack>
          <Heading level={2}>Cover Footer Content</Heading>
          <Text>This is the footer content</Text>
        </Stack>
      </Box>
    </Cover>
```

```tsx
<ContentBlock maxWidth="100%">
      <Stack>
        <Heading level={1}>Content Block</Heading>
        <Text>The ContentBlock component is used to horizontally justify and limit content.</Text>
      </Stack>
      </ContentBlock>
```

```tsx
<ContentBlock maxWidth="300px" justify="center" andText>
      <Stack>
      <Heading level={1}>Text Center</Heading>
      <Text>The `andText` prop will center the text as well as the content.</Text>
      </Stack>
      </ContentBlock>
```

```tsx
<ContentBlock maxWidth="200px">
      <Stack>
        <Heading level={2}>Max Width</Heading>
        <Text>The Center component can also take a `maxWidth` prop to limit the width of the content.</Text>
      </Stack>  
    </ContentBlock>
```

```tsx
<ContentBlock gutters="largest">
      <Stack>
        <Heading level={2}>Gutters</Heading>
        <Text>The 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.</Text>
      </Stack>
    </ContentBlock>
```

```tsx
<Stack>
  <Heading level={1}>Frame</Heading>
  <Text>The 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).</Text>
  <Frame>
    <img src="/img_collage.jpg" alt="Placeholder" />
  </Frame>
 
  </Stack>
```

```tsx
<Stack>
      <Heading level={2}>1x1</Heading>
        <Frame aspectX={1} aspectY={1}>
          <img src="/img_collage.jpg" alt="Placeholder" />
        </Frame>
    </Stack>
```

```tsx
<Stack>
      <Heading level={2}>4x3</Heading>
        <Frame aspectX={4} aspectY={3}>
          <img src="/img_collage.jpg" alt="Placeholder" />
        </Frame>
    </Stack>
```

```tsx
<Frame>
    <Cover>
      <Heading level={2}>It Works for Content As Well</Heading>
      <Text>Everything is centered and cropped to fit the aspect ratio.</Text>
    </Cover>
  </Frame>
```

```tsx
<Stack>
    <Heading level={1}>Responsive Switcher</Heading>
    <Text>The Responsive Switcher component is used to create a responsive layout that will automatically swap from horizontal to vertical when the content exceeds the threshold.</Text>
    <ResponsiveSwitcher threshold="60ch" gap="12px" limit={2}>
      <Box padding="base" background="surface--background">
          <Heading level={3}>Content on the left/top</Heading>
      </Box>
      <Box padding="base" background="surface--background">
        <Heading level={3}>Content on the right/bottom</Heading>
      </Box>
    </ResponsiveSwitcher>
  </Stack>
```

```tsx
<ResponsiveSwitcher threshold="50ch" limit={3}>
      <Card elevation="base">
          <Box padding="base">
          <Heading level={3}>Some Card Content</Heading>
        </Box>
      </Card>
       <Card elevation="base">
        <Box padding="base">
          <Heading level={3}>Some Card Content</Heading>
        </Box>
      </Card>
      <Card elevation="base">
        <Box padding="base">
          <Heading level={3}>Some Card Content</Heading>
        </Box>
      </Card>
      </ResponsiveSwitcher>
```

```tsx
<Stack>
  <Heading level={1}>Sidekick</Heading>
  <Text>The 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.</Text>
  <SideKick sideWidth="120px" contentMinWidth="60%">
      <InputText placeholder="Sidekick Input" />
      <Button label="Sidekick Button" />
    </SideKick>
  </Stack>
```

```tsx
<SideKick sideWidth="60%" contentMinWidth="200px">
      <Cover>
        <Cover.Center>
        <Stack>
        <Heading level={2}>Sidekick Content</Heading>
        <Text>The 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.</Text>
        </Stack>
        </Cover.Center>
        </Cover>
      <Frame aspectX={9} aspectY={16}>
         <img src="/img_collage.jpg" alt="Placeholder" />
      </Frame>
    </SideKick>
```

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
<Stack>
  <Heading level={1}>Looking For More?</Heading>
  <Text>Check out the [Scaffolding](../scaffolding/scaffolding.md) page to see how to layout full pages with these components</Text>
  </Stack>
```
