People Listing

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 (Mobile): Single Choice: Left, Center 
• Header Content Alignment (Desktop): Single Choice: Left, Center
• Cards Content Alignment (Mobile): Single Choice: Left, Center 
• Cards Content Alignment (Desktop): Single Choice: Left, Center
• Cards Container Width: Width of Grid, Width of Window
• Cards Number of Columns (Desktop): Single Choice: 1-6
• Cards Number of Columns (Laptop): Single Choice: 1-4
• Cards Number of Columns (Tablet): Single Choice: 1-4
• Cards Number of Columns (Mobile): Single Choice: 1-4
• Image Type: Single Choice: Photos (Column-Width and Forced Aspect Ratio Image), Icons (Native Width and Aspect Ratio), None
• Based on your selection for Image Type, the following inputs will show.
  1. Photos (Column-Width and Forced Aspect Ratio Image)
     
     • Cards Image Aspect Ratio: Single Choice: 1:1 (square), 2:1, 3:1, 3:2, 4:3, 16:9
  2. Icons (Native Width and Aspect Ratio)
     • Cards Native Image/Icon Max Height (px): Number
  3. None
• Cards Add Drop-Shadow Around Cards: Boolean (checkbox to enable)
• Cards Add Border-Radius (Rounded Borders) Around Cards: Boolean (checkbox to enable)
• Cards Border Radius Type: Single Choice: Default Border Radius, Custom Border Radius
• If you select Custom Border Radius the following input will show.
  1. Cards Custom Border Radius: Number Slider
• Cards Border Width: Number Slider
• Cards Border Color: Single Choice: Primary, Secondary, Black, Dark Grey, Grey, Light Grey, White, Custom
• If you select Custom the following inputs will show:
  • Cards: Custom Border 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.
• Cards Background Color: Single Choice: Primary, Secondary, Black, Dark Grey, Grey, Light Grey, White, Custom
• If you select Custom the following inputs will show:
  • Cards: Custom Background 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.
• Cards Text Color Override: Single Choice: Default, White

Preheader: Text Input

Header: Text Input

Content: Text Area

People Listing content: REPEATABLE GROUP

Add any number of people here. Based on your selection in the Styles Tab for Cards Image Type the following Image options may or may not be available.

Image: Option: Photos/Icon

• Image: Upload image file, ALT Tag, Image Label/Caption Text
• Image Horizontal Alignment: Single Choice, Left, Left-Center, Center, Right-Center, Right
• Image Vertical Alignment: Single Choice, Top, Top-Center, Center, Bottom-Center, Bottom

Employee Name: Text Input

Employee Title: Text Input

About/Bio Link Type: Single Choice: Custom Link, Bio Modal, Video, None

Based on your selection for About/Bio Link Type, the following inputs will show.

1. Option: Custom Link
   
   • About/Bio Text: Text Input
   • About/Bio: Hyperlink
     • Link to: External, Content, File, Email Address, Blog
     • URL: Input URL or Select Page
   • About/Bio: Open Link in a New Window: Toggle on to enable
   • About/Bio: Link Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
   • About/Bio: Hyperlink: Link To: Single Choice: External, Content, File, Email Address, Blog
   • Based on your selection for About/Bio: Hyperlink, the following inputs will show. 
     1. Option: External
        • URL: Input
     2. Option: Content
        • Content: Select Page
     3. Option: File
        • File: File
     4. Option: Email Address
        • Email address: Input
     5. Option: Blog
        • Blog: Select a Blog
   • No Follow: Boolean (checkbox to enable)
2. Option: Bio Modal
   • About/Bio Text: Text Input
   • About/Bio Link Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
   • About/Bio Bio: Text Area
3. Option: Video
   • About/Bio Text: Text Input
   • About/Bio Link Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.
   • Video Type: Single Choice: YouTube/Wistia/Vimeo Modal, Vidyard Modal, HubSpot Video Modal, Embed Code
   • Based on your selection for Video: Type, the following inputs will show.
     1. Option: YouTube/Wistia/Vimeo Modal
        • Video: URL of Iframe-Embeddable Video File: Link To: Single Choice: External, File
        • Based on your selection for Video: URL of Iframe-Embeddable Video File:, the following inputs will show.
          • File: File
            • Option: File
          • Email address: Input
            • Option: Email Address
     2. Option: Vidyard Modal
        • Vidyard Video: UUID: Text Input - Enter the UUID (internal ID) of this Vidyard video.
        • Video: Image ALT Tag: Text Input
     3. Option: HubSpot Video Modal
        • Video: Embed Code: Text Area
        • Video: Image ALT Tag: Text Input
4. Option: None

CONNECT: REPEATABLE GROUP

Social: Icon: Icon

Social: Link Text: Text Input

• Link to: Single Choice: External, Content, File, Email Address, Blog
• Based on your selection for Link to, the following inputs will show. 
  1. Option: External
     • URL: Input
  2. Option: Content
     • Content: Select Page
  3. Option: File
     • File: File
  4. Option: Email Address
     • Email address: Input
  5. Option: Blog
     • Blog: Select a Blog
• Open Link in a New Window: Toggle on to enable
• Link Type: Link types specify the relationship to linked documents. The type of link relationship may impact SEO for your page. Learn more.
• No Follow: Boolean (checkbox to enable)
• Social Link Title Attribute - CTA title attribute gives additional information about the page being linked to. Leave this blank to use your button text.

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--peoplelisting

Resources:

modules/People Listing/People Listing.css

module js inside main module