# AuthLayoutBrand

> Logo or wordmark pinned to the top corner on the art's side: left in `split` and `centered`, right in `split-reverse` once the art sits beside the panel, so it never lands on the …

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

Logo or wordmark pinned to the top corner on the art's side: left in `split` and `centered`,
right in `split-reverse` once the art sits beside the panel, so it never lands on the card.

## Import

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

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

## Usage

```tsx
<AuthLayoutBrand 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>
        </>
</AuthLayoutBrand>
```

## Props

This component declares no props of its own.

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`