Skip to main content

Customize the login page layout

Layout controls let you tailor the visual structure of the login experience, including card style, announcement placement, and sign-in flow order, without changing your brand assets. Use these settings to match your design system, highlight important notices, and streamline the authentication flow for your users.

Before you begin​

Before you begin, you need the following:

  • A Site Administrator role with permission to modify customization settings.
  • Your brand assets. See Brand your login pages.

Configure the login card appearance​

Control the visual style of the login card that contains the sign-in form.

  1. Click > Customization > Theme. The Theme page appears.
  2. Select the Custom Theme tab.
  3. Expand the Login Layout and Flow section.
  4. Configure the card style:
    • Card Top Border: Set to Show to display a colored accent border at the top of the card, or Hide to remove it.
    • Card Corner Style: Choose Default, Rounded, or Soft to control how rounded the card corners appear.
  5. Configure the card heading:
    • Card Heading Visible: Set to Show to display a heading inside the login card.
    • Card Heading Alignment: Choose Center or Left.
tip

When you enable the card heading, you can customize the heading text on the Custom Messages tab using the "Card Heading" and "Card Subheading" strings.

Position the message of the day​

The message of the day (MOTD) displays announcements such as maintenance windows, policy changes, or welcome messages on login pages. Choose a position that fits your communication needs.

  1. In the Login Layout and Flow section, set the MOTD Position:
    • Right: Displays the message in a panel beside the login card. Best for persistent announcements that users can read while signing in.
    • Above: Displays the message above the login card. Best for urgent notices that users must see before they interact with the form.
    • Below: Displays the message below the login card. Best for supplemental information.
    • Hidden: Removes the MOTD from the login page entirely.
  2. Set the MOTD Corner Style to Default, Rounded, or Soft to match your card style.
  3. Optional: Set the MOTD Background Color to make the announcement panel stand out.

Control the login flow order​

Determine which authentication method users see first when they reach the login page.

  1. In the Login Layout and Flow section, set the Login Flow Order:
    • Credentials First: Users see the username (and optionally password) prompt first. Choose this when most users authenticate with passwords or when your organization is transitioning to passwordless.
    • Passwordless First: Users see passkey and FIDO options first. Choose this when most users have registered passkeys or hardware tokens and you want to encourage passwordless adoption.

Simplify options with collapsed secondary login​

When your login page offers multiple authentication methods, you can collapse less-common options behind a toggle to reduce visual clutter.

  1. In the Login Layout and Flow section, set Secondary Login Display:
    • Visible: All login options appear on the page at once.
    • Collapsed: Secondary options are hidden behind an expandable toggle. Users who need them can expand the section.
tip

Use Collapsed when your organization supports both passwordless and traditional login, but one method is used by the majority. This keeps the page clean while still offering alternatives.

Show or hide the language selector​

Control whether users can switch languages on the login page.

  1. In the Login Layout and Flow section, set Language Selector Visible:
    • Show: Users can change the login page language.
    • Hide: The language selector does not appear. Use this for single-language organizations.

If you need to restrict which languages are available rather than hiding the selector entirely, see Configure multilingual login pages.

Preview and save​

  1. Review the live preview panel to confirm your layout changes.
  2. Click Save.

Reset layout to defaults​

If you need to revert layout changes:

  1. In the Custom Theme tab, click Reset Login Layout.
  2. Confirm the reset.

This clears all layout, footer, flow, font, and language-selector settings and reverts them to platform defaults.

Next steps​