About the Docs

A quick orientation to how this documentation is organized, what conventions it uses, and how to get the most out of it. Read this once if you are new to the blox theme; you will not need to come back.

← Back to Welcome Jump to conventions ↓

Who these docs are for

These docs are written for HubSpot editors who are dropping blox modules onto pages and want a reference for every setting. You do not need to write HTML, CSS, or HubL to use the theme; every field documented here is editable in the page editor.

If you are a developer customizing the theme at the code level, the docs still help as a field-by-field reference but you will want to read the underlying fields.json files in the theme repo for the source of truth on field IDs, defaults, and visibility rules.

Page structure

Every module doc page follows the same four-section pattern, mirroring what you see in the HubSpot module editor:

→ Start Here - the most-used controls that define the section's basic shape (layout, columns, toggles, heading alignment).
/// Content - the actual editable content (text, images, repeaters for list-style data).
Custom ID & Classes (code) - editor-set CSS ID and class hooks for advanced styling.
Style Settings - colors, borders, radii, badge tier, section dividers, background, size, spacing. Often broken into sub-groups like Card Style, Image Style, Row Settings.

Pages always document fields in the order they appear in the HubSpot editor. If you are looking for a field, walking the page top to bottom matches walking the editor top to bottom.

Conventions

Each field entry looks like this:

Field Label

Type chip Default: value Shown when: another field has a specific value

A plain-language description of what the field does and when to use it.

raw_value Option label

The chips at the top tell you:

Type - what kind of input the field accepts (toggle, select, color, text, image, etc.).
Default - the value that ships with the module before an editor changes anything.
Shown when - a conditional visibility rule. Only present if the field is hidden until some other setting changes.

For select fields, the options list shows the raw value (the value stored in HubSpot) on the left and the human-readable label that appears in the editor on the right.

Field types

The most common field types you will see documented:

Toggle - on/off switch. Shows the field below it when on.
Select - dropdown with a fixed set of options.
Color - color picker with optional opacity slider.
Text - single-line text input for short copy like a heading or button label.
Rich text - WYSIWYG editor for paragraphs, lists, and inline formatting.
Image - file picker that pulls from HubSpot's File Manager.
Link - URL field with internal/external/email/file modes.
Number / Slider - numeric input, often for px or % values.
Choice (radio) - select rendered as visual chips instead of a dropdown.
Group - a container that nests related fields together. Style sub-groups are rendered as sub-headings in the docs.
Repeater - a list of identical sub-field groups. Editors can add and remove items dynamically.

Conditional visibility

Many fields only appear in the editor when another field has a specific value. The docs flag this with a "Shown when:" chip on the field meta line.

For example, a "Sticky Background Color" field that only appears when "Menu Mode" is set to "Sticky" will show:

Shown when: Menu Mode is Sticky

If you do not see a field in the editor that the docs describe, check the visibility chip - you probably need to flip a controlling field first.

Repeaters

Repeaters are list fields where editors can add, remove, and reorder identical item groups (think: testimonial cards, FAQ items, pricing tiers, team members).

In the docs, the repeater itself is documented as a parent field (h3), and each of its sub-fields is nested as h4 inside the parent article. So a "Team Members" repeater with photo, name, and role sub-fields shows up as one h3 entry containing three h4 sub-entries.

Defaults for repeaters describe the starter items the module ships with (for example, "3 team member cards"). Editors can add more or delete them.

Feedback & updates

These docs are maintained alongside the theme. If you find a setting that is missing, a default that has changed, or a description that does not match what the editor shows you, let us know.

If a new module is added to the theme, a corresponding doc page is added here in the same release.