Layout

AuthLayout

A two-column page for sign in, sign up and password reset, with AuthCard for the form.

<script>
  import { AuthLayout, AuthCard, TextField, Button, Stack } from "@codeatlasdev/ui";
</script>

<AuthLayout logoName="Acme">
  {#snippet panel()}
    <blockquote>Ship the boring parts in a day.</blockquote>
  {/snippet}

  <AuthCard title="Welcome back" subtitle="Sign in to continue">
    <form>
      <Stack gap="3">
        <TextField label="Email" type="email" />
        <Button type="submit" fullWidth>Sign in</Button>
      </Stack>
    </form>
    {#snippet footer()}
      <a href="/sign-up">Create an account</a>
    {/snippet}
  </AuthCard>
</AuthLayout>

AuthLayout renders the page <main id="main">, so a route that uses it must not add another one. The panel snippet fills the side column; below 768px it is hidden and mobileBrand shows a compact brand strip above the form. The full pages live in the sign in, sign up and forgot password templates.

AuthLayout props

Prop	Type	Default	Description
`logoMark`	`string`	`'CA'`	Text inside the logo square.
`logoName`	`string`	`'CodeAtlas UI'`	Product name next to the mark.
`logoHref`	`string`	`'/'`	Where the logo links to.
`mobileBrand`	`boolean`	`true`	Shows the compact brand strip below 768px, where the side panel is hidden.
`brand`	`Snippet`	–	Replaces the default logo.
`panel`	`Snippet`	–	Content of the side column.
`children`	`Snippet`	–	The form column, usually an AuthCard.

AuthCard props

Prop	Type	Default	Description
`title`	`string`	–	Heading of the card.
`subtitle`	`string`	–	Text under the heading.
`footer`	`Snippet`	–	Links under the form, such as sign up.
`children`	`Snippet`	–	The form.