Search results¶

Purpose: The theme's search results system page. Template: templates/system/search-result.html Settings live in: Theme settings › System page › Search results Best for: The page HubSpot serves when a visitor submits the header search.

What it does¶

Reads the visitor's query from the URL and renders the matching pages as a list: a heading carrying the searched term, a count line, then one row per result with a linked title, an optional category, a preview description and an optional thumbnail. Previous / next pagination sits below. This is a template, not a module: there is no page editor, so every setting below comes from Theme settings, and the wording comes from the theme's translation files (transl_search_title, transl_search_count, transl_search_noresult, transl_search_prev, transl_search_next, transl_search_navaria).

The live rows are injected by HubSpot's search JS at runtime. The template renders sample rows in the editor and preview so the layout is visible while you style it.

Elements and the group that styles each¶

Variants worth demoing¶

1. Plain list — titles and descriptions only, no thumbnails or categories
2. With thumbnails — Results list › Featured image › Add image on, image ratio set
3. Categorised — Results list › Category › Add category on
4. Dark — Color scheme set to Dark, every element following it
5. Narrow column — Inner page container › Choose container set to Custom

"I want to…" → do this¶

Complete field reference¶

Every field in Theme settings › System page › Search results (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 search results page
• Background «background» (group)
• Background type (required) — type · [choice] · choices: none / color / gradient · default: none
• Color (required) — color · [color] · default: {"color":"#1830A9","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":"#029CF5","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":"#029CF5","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
• Desktop (required) — large_screen · [number] · default: 1240 (shown when customize_container = custom) Applies when Custom
• Tablet (required) — medium_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
• Mobile (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: default Theme default, full width, or your own
• Desktop (required) — large_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Tablet (required) — medium_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Mobile (required) — small_screen · [number] · default: 760 (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
• 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
• Search results title «search_results_title» (group)
• Show title (required) — show_title · [boolean] · default: True Show the search results heading.
• Show result title as (required) — show_result_title_as · [choice] · choices: h1 / h2 / h3 / h4 / h5 / h6 · default: h1 (shown when show_title = true) Heading level of the results title. It sets both the typography and the document outline, so pick the level that fits the page structure.
• Spacing below element (required) — spacing_below_element · [choice] · choices: default / 0 / s / m / l / xl / 2xl / 3xl / 4xl · default: xl (shown when show_title = true) Space below the results title.
• Text transform (required) — text_transform · [choice] · choices: none / capitalize / lowercase / uppercase · default: none (shown when show_title = true) Forces the letter case of the results title.
• Color (required) — color · [choice] · choices: default / custom · default: default Default follows the colour scheme
• Custom color (required) — custom_color · [color] · default: {"color":"#12151B","opacity":100} (shown when color = custom) Your own colour for results heading.
• Search results count message «search_results_count_message» (group)
• Color (required) — color · [choice] · choices: default / custom · default: default Default follows the colour scheme
• Custom color (required) — custom_color · [color] · default: {"color":"#5A6472","opacity":100} (shown when color = custom) Your own colour for results count message.
• Font size [desktop] (required) — font_size_desktop · [number] · default: 16 Text size of the count message on desktop, in pixels.
• Font size [mobile] (required) — font_size_mobile · [number] · default: 14 Text size of the count message on mobile, in pixels.
• Spacing below element (required) — spacing_below_element · [choice] · choices: default / 0 / s / m / l / xl / 2xl / 3xl / 4xl · default: l Space between the count message and the list of results.
• Text transform (required) — text_transform · [choice] · choices: none / uppercase / lowercase / capitalize · default: none Forces the letter case of the count message.
• Results list «results_list» (group)
• Spacing between each results «spacing_between_each_results» (group)
  • Desktop (required) — desktop · [number] · default: 32
  • Tablet (required) — tablet · [number] · default: 28
  • Mobile (required) — mobile · [number] · default: 24
• Title «title» (group)
  • Show title as (required) — show_title_as · [choice] · choices: h1 / h2 / h3 / h4 / h5 / h6 · default: h4 Heading level of each result title. It sets both the typography and the document outline, so pick the level that fits below the page title.
  • Spacing below element (required) — spacing_below_element · [choice] · choices: default / 0 / s / m / l / xl / 2xl / 3xl / 4xl · default: m Space between a result title and the text under it.
  • Text transform (required) — text_transform · [choice] · choices: none / uppercase / capitalize / lowercase · default: none Forces the letter case of the result titles.
  • Title color (required) — title_color · [choice] · choices: default / custom · default: default Default follows the colour scheme
  • Custom title color (required) — custom_title_color · [color] · default: {"color":"#12151B","opacity":100} (shown when title_color = custom) Your own colour for result title.
  • Title hover color (required) — title_hover_color · [choice] · choices: default / custom · default: default Default follows the colour scheme
  • Custom title hover color (required) — custom_title_hover_color · [color] · default: {"color":"#029CF5","opacity":100} (shown when title_hover_color = custom) Your own colour for result title hover.
• Description «description» (group)
  • Show description as (required) — show_description_as · [choice] · choices: default / typo-1 / typo-2 · default: default Default uses the body text style. Typo 1 and Typo 2 are the alternate body styles set under Theme settings > Typography.
  • Color (required) — color · [choice] · choices: default / custom · default: default Default follows the colour scheme
  • Custom color (required) — custom_color · [color] · default: {"color":"#5A6472","opacity":100} (shown when color = custom) Your own colour for result description.
• Highlight word «highlight_word» (group)
  • Font (required) — font · [font] · default: {"variant":"600"} · hides: bold, italic, size, underline
• Featured image «featured_image» (group)
  • Display an image preview for each result — add_image · [boolean]
  • Image content width (required) — image_content_width · [choice] · choices: 1fr 1fr / 2fr 3fr / 3fr 7fr / 7fr 3fr / 3fr 2fr · default: 3fr 7fr (shown when add_image = true)
  • Gap between image and content [desktop] (required) — gap_between_image_and_content_desktop · [choice] · choices: gap-0 / gap-xs / gap-s / gap-m / gap-l / gap-xl / gap-2xl / gap-3xl / gap-4xl · default: gap-4xl (shown when add_image = true)
  • Gap between image and content [tablet] (required) — gap_between_image_and_content_tablet · [choice] · choices: gap-0 / gap-xs / gap-s / gap-m / gap-l / gap-xl / gap-2xl / gap-3xl / gap-4xl · default: gap-3xl (shown when add_image = true)
  • Gap between image and content [mobile] (required) — gap_between_image_and_content_mobile · [choice] · choices: gap-0 / gap-xs / gap-s / gap-m / gap-l / gap-xl / gap-2xl / gap-3xl / gap-4xl · default: gap-2xl (shown when add_image = true)
  • Responsive breakpoint stacking (required) — responsive_breakpoint_stacking · [choice] · choices: mini_tablet / max_tablet · default: mini_tablet (shown when add_image = true)
  • Image ratio (required) — image_ratio · [choice] · choices: 16/9 / 4/3 / 1/1 / 3/4 / 2/3 / 3/2 / custom_height · default: 4/3 (shown when add_image = true)
  • Custom height [desktop] (required) — custom_height_desktop · [number] · default: 200 (shown when add_image = true AND image_ratio = custom_height)
  • Custom height [tablet] (required) — custom_height_tablet · [number] · default: 180 (shown when add_image = true AND image_ratio = custom_height)
  • Custom height [mobile] (required) — custom_height_mobile · [number] · default: 160 (shown when add_image = true AND image_ratio = custom_height)
  • Vertical alignment of image and content (required) — vertical_alignment_of_image_and_content · [choice] · choices: middle / top / bottom · default: middle (shown when add_image = true)
  • Round corner (required) — round_corner · [choice] · choices: var(--round-0) / var(--round-s) / var(--round-m) / var(--round-l) / var(--round-xl) / var(--round-xxl) / custom · default: var(--round-xl) (shown when add_image = true)
  • Custom round corner (required) — custom_round_corner · [number] · default: 0 (shown when add_image = true AND round_corner = custom)
  • Image shadow (required) — image_shadow · [choice] · choices: none / var(--light-shadow) / var(--regular-shadow) / var(--dark-shadow) · default: none (shown when add_image = true)
• Category «category» (group)
  • Display the category for each result — add_category · [boolean]
  • Font size [desktop] (required) — font_size_desktop · [number] · default: 16 (shown when add_category = true)
  • Font size [tablet] (required) — font_size_tablet · [number] · default: 16 (shown when add_category = true) Size (in pixels) of the category label on tablet.
  • Font size [mobile] (required) — font_size_mobile · [number] · default: 16 (shown when add_category = true)
  • Make font bold (required) — make_font_bold · [boolean] · default: False (shown when add_category = true) Bold this text
  • Spacing below element (required) — spacing_below_element · [choice] · choices: default / 0 / s / m / l / xl / 2xl / 3xl / 4xl · default: m (shown when add_category = true) Space between the category label and the text under it.
  • Text transform (required) — text_transform · [choice] · choices: none / capitalize / uppercase / lowercase · default: none (shown when add_category = true)
  • Color (required) — color · [choice] · choices: default / custom · default: default Default follows the colour scheme
  • Custom color (required) — custom_color · [color] · default: {"color":"#1830A9","opacity":100} (shown when color = custom) Your own colour for result category.
• Results pagination «results_pagination» (group)
• Top spacing [desktop] (required) — top_spacing_desktop · [number] · default: 32
• Top spacing [tablet] (required) — top_spacing_tablet · [number] · default: 28
• Top spacing [mobile] (required) — top_spacing_mobile · [number] · default: 24
• Button style (required) — button_style · [choice] · choices: btn-1 / btn-2 / btn-3 / btn-4 / btn-5 / btn-6 / btn-8 / btn-7 · default: btn-1
• Add icon in button — add_icon_in_button · [boolean]
• Icon style (required) — icon_style · [choice] · choices: chevron / big_arrow / long_arrow · default: big_arrow (shown when add_icon_in_button = true)
• Icon stroke width (required) — icon_stroke_width · [number] · default: 3 (shown when add_icon_in_button = true)
• Spacing between icon and text in button (required) — spacing_between_icon_and_text_in_button · [choice] · choices: gap-xs / gap-s / gap-m / gap-l / gap-xl / gap-2xl / gap-3xl / gap-4xl · default: gap-m (shown when add_icon_in_button = true)

Total fields: 84 · Template: templates/system/search-result.html

Notes¶

Where the content comes from¶

System pages have no page editor. HubSpot's search JS injects the live rows at runtime, and the theme only styles what it 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 every visible string comes from the theme's translation files.

Colour scheme¶

Color scheme is the first field and drives scheme-light / scheme-dark on the section. Six elements follow it: the results heading and each result title take --f-heading, the count message and description take --f-muted, a title on hover takes --f-link-hover, and the category takes --f-accent. Each keeps a Color control set to Default; switch one to Custom to override just that element. Set the palettes themselves in Theme settings › Light / Dark color scheme.

Containers¶

Page container sets the outer width, Inner page container the results column. Both offer Theme's default, Full width, or Custom with per breakpoint widths. Unlike the other system pages, the inner container has its own Container alignment; the other six position their inner box from a page level content alignment field, which this page does not have.

Known limits¶

• The highlighted search term takes its colour from theme.colors.tertiary through an inherited_value, not from the colour scheme, so it stays the same blue in both schemes.
• Pagination uses the theme button presets, which carry literal palette colours rather than scheme tokens. btn-1 on a dark page is low contrast. Reviewed and left as is, see Deliberate divergences in MDS/FUTURE-IMPLEMENTATIONS.md.

History¶

Moved here from Website header › Search functionality on 2026-08-31, which is why any portal configured before that date starts from defaults. The move also fixed the page's dark mode: its colours had read --wh-* tokens that are only defined under .header and .search-panel, so they had always fallen through to literal light scheme values.