# ContentBlock

The ContentBlock component horizontally justifes content within its boundaries
which can be constrained by a maximum width. It provides a simple way to create
constrained and justified layouts with optional gutter controls.

## Design & usage guidelines

Use ContentBlock when you need to:

* Create a constrained and justified layout with a controlled maximum width
* Justify content horizontally within a container
* Maintain consistent spacing from container edges
* Justify both content and text alignment together

### Related components

* For vertical centering, use [Cover](../Cover/Cover.md) with `Cover.Center`
* For stacking elements vertically use [Stack](../Stack/Stack.md)
* For horizontal spreading use [Cluster](../Cluster/Cluster.md)
* For horizontal spreading with a fixed width use [Tiles](../Tiles/Tiles.md)
* For container queries for maximum control use a
  [Container](../Container/Container.md)

## Content guidelines

The ContentBlock component can contain any valid React content, including:

* Text and typography components
* Interactive elements like buttons and forms
* Layout components like Stack or Cluster
* Media elements like images or videos

## Accessibility

The ContentBlock component is a layout utility that doesn't affect the
accessibility of its content. However, when using `andText`, ensure that
centered text maintains readability and doesn't impair comprehension for users
with reading difficulties.

## Examples

### Basic centering

```tsx
import React from "react";
import { ContentBlock } from "@jobber/components/ContentBlock";
import { Stack } from "@jobber/components/Stack";
import { Heading } from "@jobber/components/Heading";
import { Text } from "@jobber/components/Text";
import type { ContentBlockProps } from "../types";

export function ContentBlockBasicCenteringExample(
  props: Partial<ContentBlockProps>,
) {
  return (
    <ContentBlock justify="center" {...props}>
      <Stack>
        <Heading level={1}>Centered content</Heading>
        <Text>This content is horizontally centered</Text>
      </Stack>
    </ContentBlock>
  );
}
```

### Centered text with maximum width

```tsx
import React from "react";
import { ContentBlock } from "@jobber/components/ContentBlock";
import { Stack } from "@jobber/components/Stack";
import { Heading } from "@jobber/components/Heading";
import { Text } from "@jobber/components/Text";
import type { ContentBlockProps } from "../types";

export function ContentBlockCenteredTextMaxWidthExample(
  props: Partial<ContentBlockProps>,
) {
  return (
    <ContentBlock maxWidth="200px" justify="center" {...props}>
      <Stack>
        <Heading level={2}>Narrow content</Heading>
        <Text>This content and text are centered within a 200px container</Text>
      </Stack>
    </ContentBlock>
  );
}
```

### With gutters

```tsx
import React from "react";
import { ContentBlock } from "@jobber/components/ContentBlock";
import { Stack } from "@jobber/components/Stack";
import { Heading } from "@jobber/components/Heading";
import { Text } from "@jobber/components/Text";
import type { ContentBlockProps } from "../types";

export function ContentBlockWithGuttersExample(
  props: Partial<ContentBlockProps>,
) {
  return (
    <ContentBlock gutters="largest" {...props}>
      <Stack>
        <Heading level={2}>Spaced content</Heading>
        <Text>This content maintains minimum spacing from container edges</Text>
      </Stack>
    </ContentBlock>
  );
}
```


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `andText` | `boolean` | No | — | Whether to also center the text. |
| `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
| `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
| `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
| `gutters` | `GapSpacing` | No | — | The amount of space between the content and the edges of the container. |
| `id` | `string` | No | — | Standard HTML id attribute. |
| `justify` | `"center" | "left" | "right"` | No | `left` | The justification of the content. |
| `maxWidth` | `number | (string & {}) | "xs" | "sm" | "md" | "lg" | "xl"` | No | `Breakpoints.smaller` | The maximum width of the centered content. |
| `role` | `AriaRole` | No | — | Standard HTML role attribute. |
| `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
| `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |