DWG · 05.01 · BLOCK

Login

A sign-in view composed from Card, Input, and Button — email and password fields, a forgot-password link, primary and social sign-in, and a sign-up prompt.

Login form

05.01·A
PREVIEWPX · 1:1

Log in

DWG · AUTH-01

Enter your credentials to access the sheet.

Forgot password?

No account? Sign up

<Card className="w-full max-w-sm">
  <Card.Header>
    <Card.Title>Log in</Card.Title>
    <Annotation className="ml-auto">DWG · AUTH-01</Annotation>
  </Card.Header>
  <Card.Body className="flex flex-col gap-5">
    <p className="text-[13px] leading-relaxed text-ink-bright/70">
      Enter your credentials to access the sheet.
    </p>
    <Input label="Email" type="email" placeholder="you@studio.com" annotation={false} />
    <div className="flex flex-col gap-1.5">
      <Input label="Password" type="password" annotation={false} />
      <Annotation as="a" href="#" className="self-end underline-offset-2 hover:text-ink-bright hover:underline">
        Forgot password?
      </Annotation>
    </div>
    <div className="flex flex-col gap-3">
      <Button className="w-full">Log in</Button>
      <Button variant="secondary" className="w-full">Log in with Google</Button>
    </div>
    <Annotation as="p" className="text-center">
      No account? <a href="#" className="underline-offset-2 hover:text-ink-bright hover:underline">Sign up</a>
    </Annotation>
  </Card.Body>
</Card>