Check email
Step 1. A verification link is on its way, with a way to type the code instead.
Last updated
---
/**
* Check email: Step 1. A verification link is on its way, with a way to type the code instead.
*
* @page verification
*/
import { Mail, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
---
<AuthShell heading="Check your email" description="We sent a verification link to mara@example.com." pattern="grid">
<FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><Mail /></FeaturedIcon>
<Button href="#" size="large" fullWidth>Enter code manually</Button>
<Button slot="footer" href="#" variant="ghost" color="neutral">
<ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
Back to log in
</Button>
</AuthShell>
Show codeHide code
---
/**
* Check email: Step 1. A verification link is on its way, with a way to type the code instead.
*
* @page verification
*/
import { Mail, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
---
<AuthShell heading="Check your email" description="We sent a verification link to mara@example.com." pattern="grid">
<FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><Mail /></FeaturedIcon>
<Button href="#" size="large" fullWidth>Enter code manually</Button>
<Button slot="footer" href="#" variant="ghost" color="neutral">
<ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
Back to log in
</Button>
</AuthShell>Add
npx @ava-ui/apogee add verification/check-emailThis copies the page to src/components/apogee/pages/verification/ with everything it uses: AuthShell, Button, FeaturedIcon. Render it from one of your routes, or use Copy code above.
Accessibility
- The page heading is the
h1; the “Back to log in” arrow flips under right-to-left text. - The address in the description tells the user where to look; swap in the real one from your session.