import { Badge } from 'terra-arrange/package.json?dev-site-package';

import ArrangeAlignAllContainers from './example/ArrangeAlignAllContainers?dev-site-example';
import ArrangeAlignFill from './example/ArrangeAlignFill?dev-site-example';
import ArrangeAlignFitEnd from './example/ArrangeAlignFitEnd?dev-site-example';
import ArrangeAlignFitStart from './example/ArrangeAlignFitStart?dev-site-example';

import ArrangePropsTable from 'terra-arrange/lib/Arrange?dev-site-props-table';

<Badge />

# Terra Arrange

The arrange component provides content containers with a fit (start and/or end region) and fill (middle region).

* Terra arrange supports altering multiple CSS attributes without loss of function or information.
* Terra arrange supports resizing to 400%.
* Terra arrange supports reflow when the viewport is resized to 320x256 px without loss of information or function.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-arrange`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |



<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import Arrange from 'terra-arrange';
```

## Accessibility
For further guidance, please view the full [Accessibility Guide](./accessibility-guide).

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<ArrangeAlignFitStart title="Align Individual Containers - FitStart" />
<ArrangeAlignFill title="Align Individual Containers - Fill" />
<ArrangeAlignFitEnd title="Align Individual Containers - FitEnd" />
<ArrangeAlignAllContainers title="Align All Containers" />

## Arrange Props
<ArrangePropsTable />