# 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](../Grid/Grid.md) 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

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `spacing` | `"base" | "extravagant" | "large" | "larger" | "largest" | "minuscule" | "slim" | "small" | "smaller" | "smallest"` | No | `base` | The amount of vertical spacing between the children |
| `type` | `"article" | "aside" | "div" | "footer" | "header" | "main" | "section"` | No | `div` | Change the wrapping element to be one of the available semantic tags. |