# Split with mockup

> The form beside a product screen built from the components.

URL: https://apogee.avaui.dev/docs/log-in-pages/split-mockup
Last updated: 2026-10-15

The form beside a product screen built from the components.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/log-in/split-mockup

```astro
---
/**
 * Split with mockup: The form beside a product screen built from the components.
 *
 * @page log-in
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Checkbox from '@/components/apogee/Checkbox/Checkbox.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Card from '@/components/apogee/Card/Card.astro'
import Stat from '@/components/apogee/Stat/Stat.astro'
import Table from '@/components/apogee/Table/Table.astro'
import Badge from '@/components/apogee/Badge/Badge.astro'

const stats = [
  { label: 'Active users', value: '4,862', change: '+12%', trend: 'up' as const },
  { label: 'Sessions', value: '18,204', change: '+8%', trend: 'up' as const },
  { label: 'Churn', value: '1.9%', change: '-0.4%', trend: 'down' as const },
]
const rows = [
  ['Oakmere', 'Team', 24, 'Active'],
  ['Fernhill', 'Business', 120, 'Active'],
  ['Brightwell', 'Team', 8, 'Trial'],
  ['Halcyon', 'Enterprise', 410, 'Active'],
]
---

<AuthShell layout="split" panelBackground="primary-faded" heading="Log in" description="Welcome back! Please enter your details.">
  <a slot="brand" href="#" class="flex items-center gap-2 font-semibold">
    <FeaturedIcon theme="solid" color="primary" size="small"><Orbit /></FeaturedIcon>
    Example
  </a>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-5">
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <Input label="Password" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
    </div>
    <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
      <Checkbox label="Remember for 30 days" name="remember" />
      <Link href="#" underline="hover" class="text-sm font-semibold">Forgot password</Link>
    </div>
    <div class="flex flex-col gap-4">
      <Button type="submit" size="large" fullWidth>Sign in</Button>
      <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
        <KeyRound slot="start" aria-hidden="true" />
        Sign in with SSO
      </Button>
    </div>
  </form>

  <p slot="footer" class="text-neutral-faded">
    Don't have an account? <Link href="#" underline="hover" class="font-semibold">Sign up</Link>
  </p>
  <p slot="legal">© Example 2026</p>

  <div slot="panel" class="relative w-full">
    <!-- A product screenshot built from the components; decorative, so hidden from assistive tech. -->
    <div class="absolute top-24 start-20 w-[60rem] overflow-hidden rounded-xl border-[6px] border-neutral bg-page text-neutral shadow-raised" aria-hidden="true" inert>
      <div class="flex items-center justify-between border-b border-neutral px-6 py-4">
        <p class="font-semibold">Dashboard</p>
        <Badge color="positive" variant="faded">Live</Badge>
      </div>
      <div class="flex flex-col gap-6 p-6">
        <div class="grid grid-cols-3 gap-4">
          {stats.map((s) => <Card padding="medium"><Stat {...s} comparison="vs last month" /></Card>)}
        </div>
        <Table size="small" border>
          <thead><tr><th>Customer</th><th>Plan</th><th>Seats</th><th>Status</th></tr></thead>
          <tbody>
            {rows.map((r) => <tr><td>{r[0]}</td><td>{r[1]}</td><td class="tabular-nums">{r[2]}</td><td><Badge size="small" variant="faded" color={r[3] === 'Active' ? 'positive' : 'neutral'}>{r[3]}</Badge></td></tr>)}
          </tbody>
        </Table>
      </div>
    </div>
  </div>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add log-in/split-mockup
```

This copies the page to `src/components/apogee/pages/log-in/` with everything it uses: AuthShell (layout split), Card, Stat, Table, Badge. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the form fields carry visible labels and `autocomplete` hints, so password managers fill them.
-   The product screen is decoration: it is `aria-hidden` and `inert`, so screen readers and the Tab key skip it.
-   The SSO button is a link to your identity provider; swap its `href` for your own.

## Related

[

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

](https://apogee.avaui.dev/docs/sections/auth-shell)[

StatDisplays a labelled metric with an optional trend indicator. For dashboards and summary rows.

](https://apogee.avaui.dev/docs/stat)[

TableA styled, horizontally-scrollable table. Write plain thead/tbody markup — Table only styles it.

](https://apogee.avaui.dev/docs/table)[

BadgeA small status label — for counts, tags, and state indicators.

](https://apogee.avaui.dev/docs/badge)