Skip to content

Password Prompt

Purpose: The password gate shown before a password protected page. Template: templates/system/password-prompt.html Settings live in: Theme settings › System page › Password prompt Best for: Any page with password protection turned on.

What it does

Renders HubSpot's stock password form inside an optional card. The heading and the sentence above the field come from a rich text module in the template, and the input plus submit button are HubSpot's own markup, re skinned here. The inner column defaults to 460px Custom, which suits a single field and a button better than the theme's full content width.

Elements and the group that styles each

On the page Field group
Heading and intro sentence Title / Description — both target the rich text block
Password field and submit Form style — the form-1/2/3 look
Gap between form rows Spacing between form fields — per device
Card behind the form Add card → Card
Section background and glows Background

Variants worth demoing

  1. Card on a gradient — Add card on, gradient background behind it
  2. Flat and centred — no card, plain background
  3. Dark gate — Color scheme → Dark with a dark background
  4. Wide column — Inner page container widened past the 460px default
  5. Bordered card — Card › Show border on with a Custom border colour

"I want to…" → do this

Goal Setting
Make the column wider Inner page container › Large screen — 460 by default
Put the form on a card Add card on, then the Card group
Round the card more Card › Round corner — theme scale, or Custom
Add a shadow Card › Shadow — Light / Regular / Dark
Space the form rows Spacing between form fields — desktop / tablet / mobile

Complete field reference

Every field in Theme settings › System page › Password prompt (exhaustive). Generated from the theme fields.json, do not hand edit. (required) marks required fields. Conditional fields note what reveals them.

  • Color scheme (required) — color_scheme · [choice] · choices: light / dark · default: light Light or Dark for this page
  • Background «background» (group)
  • Background type (required) — type · [choice] · choices: none / color / gradient · default: none
  • Color (required) — color · [color] · default: {"color":"#000046","opacity":100} (shown when type = color)
  • Gradient (required) — gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when type = gradient)
  • Add radial glow — add_radial_glow · [boolean] · default: False Enable a radial gradient glow overlay on top of the section background.
  • Glow color (required) — glow_color · [color] · default: {"color":"#1CB5E0","opacity":100} (shown when add_radial_glow = true)
  • Glow position (required) — glow_position · [choice] · choices: top center / top left / top right / left center / center center / right center / bottom center / bottom left / bottom right · default: top center (shown when add_radial_glow = true)
  • Glow size (required) — glow_size · [number] · default: 800 (shown when add_radial_glow = true)
  • Glow opacity (required) — glow_opacity · [number] · default: 20 (shown when add_radial_glow = true)
  • Add second glow — add_second_glow · [boolean] · default: False (shown when add_radial_glow = true) Enable a second radial glow for a layered depth effect.
  • Second glow color (required) — glow_2_color · [color] · default: {"color":"#C084FC","opacity":100} (shown when add_second_glow = true)
  • Second glow position (required) — glow_2_position · [choice] · choices: top center / top left / top right / left center / center center / right center / bottom center / bottom left / bottom right · default: bottom right (shown when add_second_glow = true)
  • Second glow size (required) — glow_2_size · [number] · default: 600 (shown when add_second_glow = true)
  • Second glow opacity (required) — glow_2_opacity · [number] · default: 18 (shown when add_second_glow = true)
  • Page container «page_container» (group)
  • Choose container (required) — customize_container · [choice] · choices: default / full-width / custom · default: default Theme default, full width, or your own
  • Large screen (required) — large_screen · [number] · default: 1240 (shown when customize_container = custom) Applies when Custom
  • Medium screen (required) — medium_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
  • Small screen (required) — small_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
  • Container alignment (required) — container_alignment · [choice] · choices: center / left / right · default: center (shown when customize_container = custom) Applies when Custom
  • Inner page container «inner_container» (group)
  • Choose container (required) — customize_container · [choice] · choices: default / full-width / custom · default: custom Theme default, full width, or your own
  • Large screen (required) — large_screen · [number] · default: 460 (shown when customize_container = custom) Applies when Custom
  • Medium screen (required) — medium_screen · [number] · default: 460 (shown when customize_container = custom) Applies when Custom
  • Small screen (required) — small_screen · [number] · default: 460 (shown when customize_container = custom) Applies when Custom
  • Content alignment (required) — content_alignment · [choice] · choices: center / left / right · default: center
  • Spacing «spacing» (group)
  • Desktop (required) — desktop · [spacing] · default: {"padding":{"top":{"value":120,"units":"px"},"bottom":{"value":120,… · hides: margin
  • Tablet (required) — tablet · [spacing] · default: {"padding":{"top":{"value":80,"units":"px"},"bottom":{"value":80,"u… · hides: margin
  • Mobile (required) — mobile · [spacing] · default: {"padding":{"top":{"value":60,"units":"px"},"bottom":{"value":60,"u… · hides: margin
  • Title «title» (group)
  • Font — font · [font] · default: {"variant":"700"} · hides: bold, color, italic, size, underline Family and weight only
  • Font size desktop — font_size_desktop · [number] · default: 36
  • Font size tablet — font_size_tablet · [number] · default: 28
  • Font size mobile — font_size_mobile · [number] · default: 24
  • Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Color — color · [color] · default: {"color":"#12151B","opacity":100} (shown when color_type = color) Shown when Color type is Color
  • Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when color_type = gradient) Shown when Color type is Gradient
  • Font Style (required) — font_style · [choice] · choices: none / uppercase / lowercase / capitalize · default: none
  • Letter spacing — letter_spacing · [number] · default: -0.5
  • Line height — line_height · [number] · default: 1.2
  • Spacing below element desktop — spacing_below_desktop · [number] · default: 18
  • Spacing below element tablet — spacing_below_tablet · [number] · default: 16
  • Spacing below element mobile — spacing_below_mobile · [number] · default: 14
  • Description «description» (group)
  • Font — font · [font] · default: {"variant":"400"} · hides: bold, color, italic, size, underline Family and weight only
  • Font size desktop — font_size_desktop · [number] · default: 18
  • Font size tablet — font_size_tablet · [number] · default: 16
  • Font size mobile — font_size_mobile · [number] · default: 16
  • Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Color — color · [color] · default: {"color":"#3A4250","opacity":100} (shown when color_type = color) Shown when Color type is Color
  • Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when color_type = gradient) Shown when Color type is Gradient
  • Letter spacing — letter_spacing · [number] · default: 0
  • Line height — line_height · [number] · default: 1.7
  • Spacing below element desktop — spacing_below_desktop · [number] · default: 34
  • Spacing below element tablet — spacing_below_tablet · [number] · default: 28
  • Spacing below element mobile — spacing_below_mobile · [number] · default: 24
  • Spacing between form fields «between_spacing» (group)
  • Desktop (required) — desktop · [number] · default: 14 Desktop gap between the input and the button
  • Tablet (required) — tablet · [number] · default: 14 Tablet gap between the input and the button
  • Mobile (required) — mobile · [number] · default: 14 Mobile gap between the input and the button
  • Form style «input_field» (group)
  • Style (required) — style · [choice] · choices: form-1 / form-2 / form-3 · default: form-1
  • Make button full width — make_button_full_width · [boolean] · default: False
  • Add card — add_card · [boolean] · default: False
  • Card «card» (group — inline) (shown when add_card = true)
  • Background type (required) — background_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
  • Background color — background_color · [color] · default: {"color":"#FBFCFE","opacity":100} (shown when background_type = color) Shown when Background type is Color
  • Background gradient (required) — background_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when background_type = gradient)
  • Round corner (required) — round_corner · [choice] · choices: round-0 / round-s / round-m / round-l / round-xl / round-xxl / custom · default: round-xl Theme scale, or Custom for your own value
  • Custom round corner (required) — custom_round_corner · [number] · default: 16 (shown when round_corner = custom) Shown when Round corner is Custom
  • Show border — show_border · [boolean] · default: False
  • Border width — border_width · [number] · default: 1 (shown when show_border = true)
  • Border color (required) — border_color · [choice] · choices: default / custom · default: default (shown when show_border = true) Default follows the color scheme
  • Custom border color — custom_border_color · [color] · default: {"color":"#E3E7EE","opacity":100} (shown when show_border = true AND border_color = custom) Shown when Border color is Custom
  • Shadow (required) — shadow · [choice] · choices: none / light-shadow / regular-shadow / dark-shadow · default: none Presets from Theme Settings, Elements, Shadows
  • Card spacing desktop (required) — spacing_in_card_desktop · [spacing] · default: {"padding":{"top":{"value":44,"units":"px"},"bottom":{"value":44,"u… · hides: margin
  • Card spacing tablet (required) — spacing_in_card_tablet · [spacing] · default: {"padding":{"top":{"value":36,"units":"px"},"bottom":{"value":36,"u… · hides: margin
  • Card spacing mobile (required) — spacing_in_card_mobile · [spacing] · default: {"padding":{"top":{"value":28,"units":"px"},"bottom":{"value":28,"u… · hides: margin

Total fields: 71 · Template: templates/system/password-prompt.html

Notes

Where the content comes from

System pages have no page editor. HubSpot renders the body from its own stock module, and the theme only styles what that module emits. That is why this group holds typography, colour, spacing and layout but no text fields: there is nowhere in the UI to type page copy, so the wording comes from HubSpot (or, for the error pages, from the theme's translation files).

Colour scheme

Color scheme is the first field and drives scheme-light / scheme-dark on the section. Every element whose Color type is left on Default follows it, so the page flips between palettes with one control. Set the palettes themselves in Theme settings › Light / Dark color scheme.

Containers

Page container sets the outer width, Inner page container the content column. Both offer Theme's default (inherit Theme settings › Container spacing), Full width, or Custom with per breakpoint widths.

Total fields: 71