# Content

Content is a container component that provides it's child elements with
consistent vertical or horizontal spacing and padding.

This is useful for when you want to include internal details like text within a
parent component, such as a [Card](../Card/Card.md), while maintaining
consistent spacing between the elements.

## Design & usage guidelines

Content should be used whenever you have a container with children that requires
consistent spacing between the elements.

## Related components

Use [Flex](../Flex/Flex.md) and [Grid](/components/Grid) to create more complex
layouts.

## Accessibility

Content supports the use of semantic HTML5 region elements like `<main>`,
`<section>`, `<article>` etc. to further enhance accessibility when used
appropriately. Consider using these if the Content represents a meaningful
region or section of your content. The default tag is a `<div>`.

Children of the Content component should be presented in a logical order, and
follow a sensible hierarchy that can be followed by screen readers.


## Component customization

### UNSAFE\_style (mobile)

General information for using `UNSAFE_` props can be found
[here](../customizing-components/customizing-components.md).

**Note**: Use of `UNSAFE_` props is **at your own risk** and should be
considered a **last resort**. Future Content updates may lead to unintended
breakages.

The Content component has two elements that can be targeted to apply custom
styles. These are the container and child wrapper.

```tsx
UNSAFE_style: {
    container: {
      paddingHorizontal: tokens["space-large"],
    },
    childWrapper: {
      backgroundColor: tokens["color-surface--background"],
    },
  },
```


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | Yes | — | The child or children that will be given spacing. |
| `childSpacing` | `Spacing` | No | `base` | The amount of spacing that will be applied between children. |
| `direction` | `"horizontal" | "vertical"` | No | `vertical` |  |
| `spacing` | `Spacing` | No | `base` | The amount of spacing that content will give. |
| `UNSAFE_style` | `ContentUnsafeStyle` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |