# Content Block
> Provides a container that constrains the maximum width of the content it wraps.

## Import

```js
import { ContentBlock } from '@gemini-suite/vera-react';
```

## Background

Goal of the **Content Block** layout is to create a centered 'block' of content within any container, capping its width to preserve a reasonable measure and adding equal spacing on either side.
Whenever you wish some content to be horizontally centered and want to make sure that the content area doesn’t span the entire width of a container until in smaller viewports, the **Content Block** is your friend.

## Examples

### Default configuration

To contain any piece of content, wrap it in the `ContentBlock` component.

```jsx resizable=true
<ContentBlock>
  <FakeText words="40,50" />
</ContentBlock>
```

### Maximum width

Use the `max` property to adjust the maximum width of the `ContentBlock`.
By default, the `max-width` of the content is set to roughly 60 characters (`60ch`). This is to ensure a range of characters per line comfortable for reading.

```jsx resizable=true
<Flex flow="column">
  <ContentBlock max="measureNarrow">
    <FakeText words="20,30" />
  </ContentBlock>
  <ContentBlock max="measureMedium">
    <FakeText words="40,50" />
  </ContentBlock>
  <ContentBlock max="measureWide">
    <FakeText words="50,60" />
  </ContentBlock>
</Flex>
```

Example below shows multiple nested `ContentBlock` with different `max` configurations. Check the API reference for a list of available named widths.

```jsx resizable=true
<Flex flow="column">
  <ContentBlock max="containerNarrow">
    <ExampleBox display="block">
      <Flex flow="column" gap="spacingS">
        <Box>Narrow container</Box>
        <ContentBlock max="measureNarrow">
          <FakeText words="15,25" />
        </ContentBlock>
      </Flex>
    </ExampleBox>
  </ContentBlock>
  <ContentBlock max="containerMedium">
    <ExampleBox display="block">
      <Flex flow="column" gap="spacingS">
        <Box>Medium container</Box>
        <ContentBlock>
          <FakeText words="30,40" />
        </ContentBlock>
      </Flex>
    </ExampleBox>
  </ContentBlock>
</Flex>
```

### Centering the children

In some cases, the `ContentBlock` can include naturally small elements like buttons. You can use the `centerContent` prop to center any children regardless their width.

```jsx resizable=true
<ContentBlock centerContent>
  <FakeText words="20,30" css={{ mb: '$spacingM' }} />
  <Button>Press me</Button>
</ContentBlock>
```

---

## API Reference

| Name            | Type                                                                                                               | Default           | Description                                                                                                                                                                                                                                                                                  | Required |
| --------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`            | `keyof JSX.IntrinsicElements \| React.ComponentType<any>`                                                          | `div`             | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`           | `StitchesCss`                                                                                                      |                   | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |
| `max`           | `"measureNarrow" \| "measureMedium" \| "measureWide" \| "containerNarrow" \| "containerNormal" \| "containerWide"` | `"measureMedium"` | Maximum width of the content block.                                                                                                                                                                                                                                                          |          |
| `center`        | `boolean`                                                                                                          | `true`            | When `true`, the content block will be centered.                                                                                                                                                                                                                                             |          |
| `centerContent` | `boolean`                                                                                                          | `false`           | When `true`, children of the content block will be centered regardless of their width.                                                                                                                                                                                                       |          |
| `gutters`       | `SpacingToken`                                                                                                     | `"spacingM"`      | Spacing on either side of the content.                                                                                                                                                                                                                                                       |          |