Skip to main content

Mauris purus urna, dictum non cursus et, congue et felis. Suspendisse porttitor mi et eros luctus suscipit.

Read More
Open Search
Schedule a Call
Search for topics or resources
Enter your search below and hit enter or click the search icon.
Close Search
TRUST Documentation

Left-Right Self-Selector

left-right-self-selector--documentation

Module Styles Tab Walkthrough

 

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 HTag: Single Choice: H1 , H2 (Default)
  • Column Widths (Desktop): Single Choice - This control hides when Media Type: None (Centered) is selected.
    • 4/12 [Content] + 8/12 [Media]
    • 5/12 [Content] + 7/12 [Media]
    • 6/12 [Content] + 6/12 [Media] - Default
    • 7/12 [Content] + 5/12 [Media]
    • 8/12 [Content] + 4/12 [Media]
  • Column Widths (Tablet): Single Choice - This control hides when Media Type: None (Centered) is selected.
    • 4/12 [Content] + 8/12 [Media]
    • 5/12 [Content] + 7/12 [Media]
    • 6/12 [Content] + 6/12 [Media] - Default
    • 7/12 [Content] + 5/12 [Media]
    • 8/12 [Content] + 4/12 [Media]
  • Content Position (Desktop and Tablet): Single Choice: Left of Media, Right of Media
  • Content Position (Mobile): Single Choice: Above Media, Below Media
  • Content Vertical Alignment with Media (Desktop and Tablet): Single Choice: : Top, Center - If using a video with a video label for the media in this section, please note that the center alignment option for this input includes the height of the video label which will cause your alignment not to appear centered
  • Content Alignment (Mobile): Single Choice: Left-Aligned, Center-Aligned

Module Settings Walkthrough

Preheader: Text Input

Header: Text Input

Content: Text Area

Selector Supporting Text: Text Area

 

Selectors: Repeatable Group
  • My [Blank] is:
    • Dropdown Label: Text Input
    • CTA: Button Color: Single Choice: Primary, Secondary, White, Simple
    • CTA: Button Text: Text Input
    • Options/Choices - Repeatable Group
      • Choice Label: Text Input
      • Choice URL: Link To: Single Choice: External, Content, File, Blog
      • Based on your selection for Link to the following inputs for Video Type will show.
        1. Option: External
          • URL: Input URL
        2. Option: Content
          • Content: Choice
        3. Option: File
          • File: File
        4. Option: Blog
          • Blog: Choice

 

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.

 

Media: Type

Media: Type: Single Choice: Image, Video, Lottie Animation, None (Empty Space), None (Centered)

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

  1. Option: Image
    • Media: Device Visibility - Use these inputs to show/hide your media for certain device sizes. This may affect your section's layout at any screen sizes where the media is hidden. Please note that this will not stop a video from playing if the user clicks play then resizes the screen to a point where it is no longer visible.
      • Hide on Desktop: Boolean (check to enable)
      • Hide on Laptop: Boolean (check to enable)
      • Hide on Tablet: Boolean (check to enable)
      • Hide on Mobile: Boolean (check to enable)
    • Image: Image
  2. Option: Video
    • Media: Device Visibility - Use these inputs to show/hide your media for certain device sizes. This may affect your section's layout at any screen sizes where the media is hidden. Please note that this will not stop a video from playing if the user clicks play then resizes the screen to a point where it is no longer visible.
      • Hide on Desktop: Boolean (check to enable)
      • Hide on Laptop: Boolean (check to enable)
      • Hide on Tablet: Boolean (check to enable)
      • Hide on Mobile: Boolean (check to enable)
    • 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
        • Hide Video Play Icon: Boolean (check to enable) - Use this toggle if the image thumbnail already has the icon included in it
        • Video: Thumbnail Type (Desktop): Single Choice: Display Thumbnail Image, No Thumbnail Image
        • Video: Thumbnail Type (Mobile): Single Choice: Display Thumbnail Image, No Thumbnail Image
        • Video: Thumbnail Image: Image
        • Link to: External, File
        • URL: Input URL
        • Video: Image ALT Tag: Text Input
      2. Option: Vidyard Modal
        • Hide Video Play Icon: Boolean (check to enable) - Use this toggle if the image thumbnail already has the icon included in it
        • Video: Thumbnail Type (Desktop): Single Choice: Display Thumbnail Image, No Thumbnail Image
        • Video: Thumbnail Type (Mobile): Single Choice: Display Thumbnail Image, No Thumbnail Image
        • Video: Thumbnail Image: Image
        • Vidyard Video: UUID: Text Input - Enter the UUID (internal ID) of this Vidyard video.
        • Video: Image ALT Tag: Text Input
        • Video: Title Attribute: Text Input - Video title attribute gives additional information about the video being linked to. Leave this blank to use default text.
      3. Option: HubSpot Video Modal
        • Hide Video Play Icon: Boolean (check to enable) - Use this toggle if the image thumbnail already has the icon included in it
        • Video: Thumbnail Type (Desktop): Single Choice: Display Thumbnail Image, No Thumbnail Image
        • Video: Thumbnail Type (Mobile): Single Choice: Display Thumbnail Image, No Thumbnail Image
        • Video: Thumbnail Image: Image
        • Video: HubSpot Video: Video
        • Video: HubSpot Play Button 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.
        • Video: Image ALT Tag: Text Input
        • Video: Title Attribute: Text Input - Video title attribute gives additional information about the video being linked to. Leave this blank to use default text.
      4. Option: Embed Code
        • Video: Embed Code: Text Area
        • Video: Title Attribute: Text Input - Video title attribute gives additional information about the video being linked to. Leave this blank to use default text.
  3. Option: Lottie Animation
    • Lottie Embed: Type: Single Choice: URL of Lottie JSON File, Lottie JSON Code
    • Lottie Embed: Loop Animation: Boolean (check to enable) - Toggle this "On" to have the animation loop indefinitely.
    • Lottie URL/Embed Code: Text Input - Use this field to paste the URL only of your externally hosted Lottie JSON file (like the ones provided on lottiefiles.com) or the JSON code of your custom Lottie animation. DO NOT PASTE THE FULL EMBED CODE PROVIDED ON LOTTIEFILES.COM
    • Lottie: Container Width: Number - Use this field to control the width of the container for your animation. If left blank, the animation will go full width and centered.
    • Lottie: Container Height: Number - Use this field to control the height of the container for your animation (the width will automatically adjust based on this value). This is designed to keep the height of the animations consistent across cards in the same row. Leave this blank to allow the animation to go full width regardless of height.
  4. Option: None (Empty Space)
  5. Option: None (Centered)

 

Add Drop shadow to Featured Media: Boolean (check to enable) - Toggle this on to enable a drop shadow around the area allocated for the featured image, video thumbnail or calendar widget.

Add Border Radius to Featured Media: Boolean (check to enable) - Toggle this on to enable the default border radius around the area allocated for the featured image, video thumbnail or calendar widget.

 

FAQs

Help! My content isn't showing.

Development Notes

Reserved block class:

.section--leftrightselector

Resources:

modules/Left-Right Self Selector/Left-Right Self Selector Module.css

module js inside main module