# AuthLayoutArt

> Holds the illustration (a default `AuthIllustration` when empty).

Source: https://ui.jcsoftdev.com/docs/components/auth-layout-art

Holds the illustration (a default `AuthIllustration` when empty). It hides under 448px of layout
width and, in `centered`, sits faded behind the panel. A drawn look is at most 12rem tall while
it is stacked above the panel, so the form stays in reach, and 34rem beside it; set
`--auth-art-max-h` on this part to change that.

## Import

```ts
import { AuthLayoutArt } from "@jcsoftdev/ui/auth";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/auth/auth-layout`.

## Usage

```tsx
<AuthLayoutArt layout="split" state="idle" progress={0} activeIndex={0}>
  <>
          <AuthLayout.Brand>EduModules</AuthLayout.Brand>
          <AuthLayout.Art />
          <AuthLayout.Panel>
            <PanelContent />
          </AuthLayout.Panel>
          <AuthLayout.Footer>Soporte: ayuda@edumodules.pe</AuthLayout.Footer>
        </>
</AuthLayoutArt>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `look` | `AuthLook` |  | Look of the default illustration, used when there are no children (default `Slabs`). |
| `caption` | `ReactNode` |  | Text looks only: a supporting line under the headline. |
| `headline` | `ReactNode` |  | Text looks (`Statement`) only: the headline (a string animates word by word). Defaults to the UI string `welcomeBack`. |
| `action` | `ReactNode` |  | Text looks only: content beside the arrow pill, such as a link. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Split](/storybook/?path=/story/auth-authlayout--split)
- [Split Reverse](/storybook/?path=/story/auth-authlayout--split-reverse)
- [Centered](/storybook/?path=/story/auth-authlayout--centered)
- [Typing](/storybook/?path=/story/auth-authlayout--typing)
- [Error State](/storybook/?path=/story/auth-authlayout--error-state)
- [Success](/storybook/?path=/story/auth-authlayout--success)
- [Container Widths](/storybook/?path=/story/auth-authlayout--container-widths)
- [Custom Illustration](/storybook/?path=/story/auth-authlayout--custom-illustration)
- [Brand Follows Art](/storybook/?path=/story/auth-authlayout--brand-follows-art)

## Source

`packages/ui/src/auth/auth-layout/auth-layout.tsx`