# Log in pages

> Whole log in pages built on the AuthShell section, from a centred form to split layouts with a panel.

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

Whole log in pages built on the AuthShell section, from a centred form to split layouts with a panel.

Last updated October 15, 2026

Each example is a complete page. The frame comes from the [AuthShell](https://apogee.avaui.dev/docs/sections/auth-shell) section; the form inside is plain composition, because it posts to your own auth backend. Add one with everything it uses, then render it from a route:

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

```astro
---
// src/pages/login.astro
import Layout from '../layouts/Layout.astro'
import LogIn from '../components/apogee/pages/log-in/SplitQuote.astro'
---

<Layout title="Log in">
  <LogIn />
</Layout>
```

`npx @ava-ui/apogee list` shows every page.

[

![](https://apogee.avaui.dev/thumbs/log-in-pages__simple.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__simple.dark.webp)

SimpleA centred form with a sign up / log in switch, remember me, and an SSO button.

](https://apogee.avaui.dev/docs/log-in-pages/simple)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__sso-first.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__sso-first.dark.webp)

SSO firstSingle sign-on leads; email is the fallback under an "or" divider.

](https://apogee.avaui.dev/docs/log-in-pages/sso-first)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__minimal.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__minimal.dark.webp)

MinimalEmail, password and two buttons, with the account links under the form.

](https://apogee.avaui.dev/docs/log-in-pages/minimal)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__header-navigation.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__header-navigation.dark.webp)

Header navigationA top bar carries the logo and the sign up link; the form sits below it.

](https://apogee.avaui.dev/docs/log-in-pages/header-navigation)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__card-separated.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__card-separated.dark.webp)

Card separatedThe heading sits on a grey page and the form in its own raised card.

](https://apogee.avaui.dev/docs/log-in-pages/card-separated)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__card-combined.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__card-combined.dark.webp)

Card combinedOne card holds the logo, the heading and the form.

](https://apogee.avaui.dev/docs/log-in-pages/card-combined)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-carousel.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-carousel.dark.webp)

Split with carouselThe form beside a dark panel that walks through what is new.

](https://apogee.avaui.dev/docs/log-in-pages/split-carousel)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-mockup.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-mockup.dark.webp)

Split with mockupThe form beside a product screen built from the components.

](https://apogee.avaui.dev/docs/log-in-pages/split-mockup)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-mockup-quote.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-mockup-quote.dark.webp)

Split with mockup and quoteA rated customer quote above the product screen.

](https://apogee.avaui.dev/docs/log-in-pages/split-mockup-quote)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-image.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-image.dark.webp)

Split with imageThe form beside a full-height photo.

](https://apogee.avaui.dev/docs/log-in-pages/split-image)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-quote.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-quote.dark.webp)

Split with quoteThe panel leads with a customer quote, portrait and rating.

](https://apogee.avaui.dev/docs/log-in-pages/split-quote)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-photo-quote.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-photo-quote.dark.webp)

Split with photo and quoteReviews rotate over a photo, on a dark scrim.

](https://apogee.avaui.dev/docs/log-in-pages/split-photo-quote)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-photo-quote-glass.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-photo-quote-glass.dark.webp)

Split with photo and glass cardReviews rotate in a frosted card over a photo.

](https://apogee.avaui.dev/docs/log-in-pages/split-photo-quote-glass)[

![](https://apogee.avaui.dev/thumbs/log-in-pages__split-photo-quote-card.light.webp)![](https://apogee.avaui.dev/thumbs/log-in-pages__split-photo-quote-card.dark.webp)

Split with photo and cardReviews rotate in a solid card over a photo.

](https://apogee.avaui.dev/docs/log-in-pages/split-photo-quote-card)

## 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)