Login

Full-page account login section with social sign-in and email authentication.

---
import Login from "@features/login/Login.astro";
---

<Login />
---
blocks:
  _component: page-sections/features/login
---

Overview

Use Login for account access flows that should take over the page rather than sit inside a smaller content section. The layout is built in Astro with CloudCannon editable regions for copy, background image, and button labels; email/password submission uses a small client script against your auth API.

Properties

heading string | default: Welcome Back

Main heading for the login card.

subtext string | default: Securely access your travel insurance profile

Supporting body copy beneath the heading.

googleButtonText string | default: Google

Label for the Google sign-in button.

facebookButtonText string | default: Facebook

Label for the Facebook sign-in button.

dividerLabel string | default: or email

Text between the social buttons and the email form (e.g. “or email”).

emailLabel string | default: Email Address

Label for the email field.

emailPlaceholder string | default: you@example.com

Placeholder text for the email input.

passwordLabel string | default: Password

Label for the password field.

passwordPlaceholder string | default: ••••••••

Placeholder text for the password input.

forgotPasswordLabel string | default: Forgot Password?

Text for the forgot-password link.

submitButtonText string | default: Log In

Primary submit button label.

signupPrompt string | default: Don't have an account?

Lead-in text before the sign-up link.

signupLinkText string | default: Sign Up

Label for the sign-up link.

backgroundImage object

Full-page background behind the login card.

Properties:

source string

URL or path to the background image.

alt string

Alt text for the background image.

positionVertical enum

Vertical position of the background image.

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal position of the background image.

Accepted values:
  • left
  • center
  • right

priority boolean

Whether to prioritize loading this image (LCP).