Bullet List Columns

Spacing: Use these inputs to configure the top and bottom spacing of your section. This can be useful to increase or decrease the height of a section, reduce spacing between sections which share the same background color, or scale this spacing based on screen size when using certain types of backgrounds.

• Top Padding (Desktop): None, Extra, Small, Small, Medium, Large, Extra Large, Custom
• Top Padding (Laptop): Same as Desktop, None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Top Padding (Tablet): None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Top Padding (Mobile): Same as Tablet, None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Desktop): None, Extra, Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Laptop): Same as Desktop, None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Tablet): None, Extra Small, Small, Medium, Large, Extra Large, Custom
• Bottom Padding (Mobile): Same as Tablet, None, Extra Small, Small, Medium, Large, Extra Large, Custom

Text Color Override: These inputs override the color of any text which appears directly on your background. Use these to make all text use a light color when using a darker background to ensure the text is legible. NOTE: Elements other than text may be affected as well and some text may not necessarily be white.

• White Text on All Screens: Boolean (check to enable)
• White Text on Desktop: Boolean (check to enable)
• White Text on Laptop: Boolean (check to enable)
• White Text on Tablet: Boolean (check to enable)
• White Text on Mobile: Boolean (check to enable)
  

Layout Controls: This group contains inputs which are unique to this section for controlling the overall layout or style. Depending on the section, some inputs outside of this section may change based on the configuration here.

• Header: Content Alignment: Single Choice: Left, Center 
• Header: Content Alignment (Mobile): Single Choice: Left, Center 
• Columns: Container Width: Single Choice: Width of Grid (Default), Width of Window
• Columns: Container Width: Single Choice: Width of Grid (Default), Width of Window
• Columns: Number of Columns (Desktop): Single Choice: 1, 2, 3, 4, 5, 6
• Columns: Number of Columns (Laptop): Single Choice: 1, 2, 3, 4
• Columns: Number of Columns (Tablet): Single Choice: 1, 2, 3, 4
• Columns: Number of Columns (Mobile): Single Choice: 1, 2, 3, 4
• Column Header: Content Alignment: Single Choice: Left, Center 
• Column Header: Content Alignment (Mobile): Single Choice: Left, Center 
• Columns: Make Column Headers the Same Height: Boolean (check to enable) 
• Columns: List Content Alignment: Single Choice: Left, Center 
• Columns: List Content Alignment (Mobile): Single Choice: Left, Center 
• Columns: List Spacer Style: Single Choice: Small Space, Extra Space, Divider Lines 
• Columns: List Box Style: Single Choice: No Boxes, Boxes Around Each List, Boxes Around Each Item
• Based on your selection for Columns: List Box Style, the following inputs will show.
  
  1. Option: No Boxes
     • Columns: Make Column Lists the Same Height: Boolean (check to enable)
  2. Option: Boxes Around Each List
     • Columns: Make Column Lists the Same Height: Boolean (check to enable)
  3. Option: Boxes Around Each Item
     • Columns: Make Column Lists the Same Height: Boolean (check to enable)
     • Columns: Add Drop-Shadow Around Boxes: Boolean (check to enable)
     • Columns: Add Border-Radius Around Boxes (Rounded Corners): Boolean (check to enable)
     • Columns: List Background Color: Single Choice: Primary, Secondary, Black, Dark Grey, Grey, Light Grey, White, Custom
     • If you select Custom the following inputs will show: 
       • Background: Custom Color: Numerical Hex Code Input, Opacity Percentage, and Color Picker - The opacity for this module is intended to be 100%, otherwise your color will display lighter than intended.
• Columns: Make Column Lists the Same Height: Boolean (check to enable) - The effect of this setting is only noticeable when your List Box Style is set to Boxes Around Each List or when you have CTAs below your columns. To horizontally align column CTAs, ensure this input and Make Column Headers the Same Height are enabled.

Preheader: Text Input

Header: Text Input

Content: Text Area

Columns: REPEATABLE GROUP

Add any number of columns here.

• Header/Label: Text Input
• Description: Text Area
• Bullet List: Icon Style: Single Choice: No Icon, All the Same Image Icon, Different Image Icon for Each.
• Based on your selection for Bullet List: Icon Style the following inputs will show.
  1. Option: No Icon
  2. Option: All the Same Image Icon
     • Image Icons: Maximum Width: Number Slider
     • Image / Icon: Upload Image File
       • Alt Tag: Text Input
       • Image / Icon: Vertical Offset: Number Slider
  3. Option: Different Image Icon for Each
     • Controls will appear under the Bullets: Repeatable Group
• Bullets: REPEATABLE GROUP. Add any number of bullets here.
  • If Different Image Icon for Each was selected for the Bullet List: Icon Style then the following will be an option.
    • Image / Icon: Upload Image File
      • Alt Tag: Text Input
      • Image / Icon: Vertical Offset: Number Slider
  • Header/Label: Text Input
  • Description: Text Area
    • CTA: Link to: External, Content, File, Email Address, Blog
    • CTA: URL: Input URL or Select Page
    • CTA: Open in a New Window?: Boolean (check to enable)
    • CTA: Link Type: No Follow: Boolean (check to enable)
    • CTA: Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
    • CTA: Hyperlink: Text: Text Input
    • CTA: Add Hyperlink to this Bullet List Item: Boolean (check to enable)
• CTA: Type: Single Choice: No CTA, HubSpot Call-To-Action, Custom Link, Scroll to Section.
• Based on your selection for CTA: Type, the following inputs will show.
  • Option: No CTA
  • Option: HubSpot Call-To-Action
    • CTA: Button Color: Single Choice: Primary, Secondary, White
    • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
    • CTA: Select HubSpot CTA from the CTA Section of your portal
  • Option: Custom Link
    • CTA: Button Color: Single Choice: Primary, Secondary, White
    • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
    • CTA: Button Text: Text Input
    • CTA: Hyperlink
      • Link to: External, Content, File, Email Address, Blog
      • URL: Input URL or Select Page
    • CTA: Open in a New Tab?: Boolean (check to enable)
    • CTA: Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
  • Option: Scroll to Section
    • CTA: Button Color: Single Choice: Primary, Secondary, White
    • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
    • CTA: Button Text: Text Input
    • CTA: Section Anchor ID: Text Input - Add the anchor ID of a section on this page to link to it. To link to a section on a different page, use the Custom Link option and add the section ID to the end of the URL preceded by a hashtag.
    • CTA: Title Attribute: Text Input - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.

Content Below The Bullet Section: Text Area

CTA(S): REPEATABLE GROUP

CTA: Type: Single Choice: No CTA, HubSpot Call-To-Action, Custom Link, Scroll to Section

Based on your selection for CTA: Type, the following inputs will show.

1. Option: No CTA
2. Option: HubSpot Call-To-Action
   • CTA: Button Color: Single Choice: Primary, Secondary, White
   • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
   • CTA: Select HubSpot CTA from the CTA Section of your portal
3. Option: Custom Link
   • CTA: Button Color: Single Choice: Primary, Secondary, White
   • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
   • CTA: Button Text: Text Input
   • CTA: Hyperlink
     • Link to: External, Content, File, Email Address, Blog
     • URL: Input URL or Select Page
   • CTA: Open in a New Tab?: Boolean (check to enable)
   • CTA: Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
4. Option: Scroll to Section
   • CTA: Button Color: Single Choice: Primary, Secondary, White
   • CTA: Ghost / Transparent Button: Boolean (check to enable) - Enable this to use a transparent “ghost” style for your button.
   • CTA: Button Text: Text Input
   • CTA: Section Anchor ID: Text Input - Add the anchor ID of a section on this page to link to it. To link to a section on a different page, use the Custom Link option and add the section ID to the end of the URL preceded by a hashtag.
   • CTA: Title Attribute: Text Input - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.

Reserved block class:

.section--bulletlistcolumns

Resources:

modules/Bullet List Columns/Bullet List Columns.css

module js inside main module