Under every example: the exact HubSpot settings that produce it — Field › Sub-field · Choice, named as they appear on the module’s Content / Styles tabs. Section (dashed) is the section template the module sits in (Add section › AIRLOCK 1 · Section — …) — set on the section, not the module. See Section backgrounds.
vertical + elevated — light (title-only)
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Lite
Proactive Threat Mitigation
Reduced Attack Surface
Simplified Management
Integration with EDR, SIEM, Identity, and IT workflows
Continuously adapt to software changes
Support for offline and air-gapped environments
vertical + elevated — dark (translucent ground)
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Dark
Proactive Threat Mitigation
Reduced Attack Surface
Simplified Management
horizontal + elevated + arrow (link rows) — light · 2-col
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)ShowIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultCards › Whole-card link (optional)set on every cardSectionSolid White
horizontal + elevated + arrow — dark · 2-col
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)ShowIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultCards › Whole-card link (optional)set on every cardSectionGradient Dark
vertical + flat (plain text blocks) — light · 2-col
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultCards › Icon (optional)left empty on every cardSectionSolid White
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
vertical + flat — dark · 2-col
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultCards › Icon (optional)left empty on every cardSectionGradient Dark
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
vertical + translucent — dark · 2x2
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)TranslucentCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Dark
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
horizontal + flat + divider (icon rows) — light
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionSolid White
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
horizontal + flat + divider — dark
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Dark
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
composed: contained panel + iconrow — dark (value-prop treatment)
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerRounded panelCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionSolid Dark
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
composed: contained panel + iconrow — light
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerRounded panelCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Lite
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
composed: contained panel + translucent cards · 2x2 — dark (compact 20px gap)
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns2Grid › ContainerRounded panelCards › Card surface (auto = from style preset)TranslucentCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Dark
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
gap option: xl (60px) on elevated
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultGrid › Grid gapXL (60px)SectionGradient Lite
Proactive Threat Mitigation
Reduced Attack Surface
Simplified Management
composed: horizontal + elevated + divider — light
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionSolid White
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
composed: horizontal + translucent + arrow · 2-col — dark
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)TranslucentCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)ShowIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultCards › Whole-card link (optional)set on every cardSectionGradient Dark
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
Simplified Management
Streamline security workflows with centralized policies and automated updates.
Protection for IT and OT
Secure both modern and legacy systems across IT and OT environments.
composed: vertical + outline · 2-col — light
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)OutlineCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultSectionGradient Lite
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
text options: title h4 + copy lg (on plain)
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns2Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultTypography › Title appearanceH4 (30px)Typography › Body copy sizeLarge (20px)Cards › Icon (optional)left empty on every cardSectionSolid White
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
consistency check: divider on vs off — type stays identical
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultCards › Icon divider ruleShow (top row) vs Hide (bottom row) — the only differenceSectionSolid White
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
consistency check: title-h3 + copy-md override on icon rows
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultTypography › Title appearanceH3 (40px)Typography › Body copy sizeMedium (18px)SectionSolid White
Proactive Threat Mitigation
Prevent ransomware and malware before they execute, reducing the need for reactive incident response.
Reduced Attack Surface
Limit potential entry points for attackers by allowing only trusted software to run.
consistency check: title-h2 on horizontal + elevated + arrow
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)ShowIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentIconsdefaultTypography › Title appearanceH2 (50px)Cards › Whole-card link (optional)set on every cardSectionSolid White
icons: alternating (periwinkle / navy) on elevated cards
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAlternating (periwinkle / navy)Icons › Tile contentIconsdefaultSectionSolid White
icons: uniform navy on icon rows
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorNavyIcons › Tile contentIconsdefaultSectionSolid White
icons: translucent (frosted tile + pear glyph, the translucent-card treatment) on elevated cards — dark
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorTranslucent (soft white tile + pear glyph, dark sections)Icons › Tile contentIconsdefaultSectionGradient Dark
icons: HIDDEN on icon rows (columns collapse, divider neutralized)
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentHide all iconsSectionSolid White
numbered tiles: raised cards, light background, tiles alternate periwinkle and navy
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAlternating (periwinkle / navy)Icons › Tile contentNumbers (01, 02…) in the icon tileSectionGradient Lite
numbered tiles: raised cards, dark background
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns3defaultGrid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAlternating (periwinkle / navy)Icons › Tile contentNumbers (01, 02…) in the icon tileSectionGradient Dark
numbered rows: side-by-side layout with divider (a numbered process list), light background
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentNumbers (01, 02…) in the icon tileSectionSolid White
numbered rows: side-by-side layout with divider, dark background
Grid › Card layout (auto = from style preset)Horizontal (icon | content row)Grid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)No containerCards › Icon divider ruleShowCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Icon colorAuto (current look per composition)defaultIcons › Tile contentNumbers (01, 02…) in the icon tileSectionGradient Dark
tile colour choices side by side, on raised cards, light background
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Tile contentIconsdefaultIcons › Icon colorone choice per column — named above eachSectionSolid White
Auto (current look per composition)
First card
Second card
Alternating (periwinkle / navy)
Periwinkle
Navy
Translucent (soft white tile + pear glyph, dark sections)
tile colour choices side by side, dark background (translucent is the frosted tile with the pear glyph)
Grid › Card layout (auto = from style preset)Vertical (stacked card)defaultGrid › Columns1Grid › ContainerNonedefaultCards › Card surface (auto = from style preset)Elevated (card + shadow)defaultCards › Icon divider ruleHidedefaultCards › Trailing arrow (horizontal rows only)HidedefaultIcons › Tile contentIconsdefaultIcons › Icon colorone choice per column — named above eachSectionGradient Dark
Auto (current look per composition)
First card
Second card
Alternating (periwinkle / navy)
Periwinkle
Navy
Translucent (soft white tile + pear glyph, dark sections)