TABLE OF CONTENTS

• Text Component
• Heading Component
• Button Group
• Text Image Widget
• Dynamic Widget
• Rich Text Widget

Text Component

• Drag and drop the “Text” component onto the page.
• Configure the following:
  • Text content.
  • Size: Small or Medium.
    • Defines the visual scale of the content.
  • Text weight : Normal , Bold , Semibold, Extrabold
    • Controls how bold or prominent the text appears.
  • Alignment: Left, Center, or Right.
    • Determines how text is positioned within the component.
  • Color: Default or Muted.
    • Controls visibility and emphasis.
  • Padding: Top, Right, Bottom, left  
    • Adjust padding values to create space inside the component.
    • Defines spacing inside the component.

Heading Component

• Drag and drop the “Heading” component onto the page.
• Configure the following:
  • Heading text
    • Defines the main title displayed in the component.
  • Optional ID for linking within the page.
    • Used to create anchor links within a page.
  • Size: Triple Extra Large to Extra Small.
    • Determines visual scale of the heading.
  • HTML Heading Level: H1–H6.
    • Controls semantic structure and SEO importance.
  • Alignment: Left, Center, or Right.
    • Controls horizontal placement.
  • Background color and text color.
    • Defines visual contrast.
      • Background Color: Behind the heading
      • Text Color: Heading font color
  • Border settings
    • Border Sides : Top, Right, Bottom, left, All sides
      • Choose where borders appear
      • Multiselection option
    • Width
      • Defines thickness (e.g., 1px, 2px)
    • Color
      • Sets border color
    • Border Radius
      • Controls corner rounding (e.g., 4px, 8px)
    • Style : Solid , Dotted or Dashed
  • Margin: Top, Right, Bottom, 
    • Defines space outside the component.
  • Padding: Top, Right, Bottom, left  
    • Adjust padding values to create space inside the component.
    • Defines spacing inside the component.

Button Group

• Drag and drop the “Button Group” component onto the page.
• Configure the following:
  • Alignment of the button group: Left, Center, or Right.
    • Controls the horizontal alignment of all buttons within the group.
  • Direction: Horizontal or Vertical
    • Defines how multiple buttons are arranged.
  • Padding: Top, Right, Bottom, left
    • Adjust padding values to create space inside the component
    • Defines spacing inside the component.
  • Margin: Top, Right, Bottom, 
    • Defines space outside the component.
  • Button
    • Label
      • Defines the text displayed on the button.
    • Href (full URL or anchor reference using “#”).
      • Specifies where the button redirects.
    • Target behavior: same tab or new tab.
      • Controls how the link opens.
    • Style variant: Primary or Secondary.
      • Defines button appearance and emphasis.
    • Add additional buttons as needed within the same group.
      • Allows adding several buttons within the same button group.

Text Image Widget

• Drag and drop the “Text Image” widget onto the page.
• Configure the following:
  • Padding (px)
    • Defines the internal spacing within a component 
  • Margin (px)
    • Defines the external spacing around a component 
  • Heading
    • Represents the primary title
  • Description text
    • Provides detailed or supporting information below the heading.
  • Button
    • Label
      • Defines the text displayed on the button.
    • Href (full URL or anchor reference using “#”).
      • Specifies where the button redirects.
    • Target behavior: same tab or new tab.
      • Controls how the link opens.
    • Style variant: Primary or Secondary.
      • Defines button appearance and emphasis.
  • Layout order: text first or image first.
    • Controls the placement of text and image within the component.
  • Image ratio : Small or Large
    • Defines the relative size of the image.
  • Image selection from DAM.

Dynamic Widget

• Drag and drop the “Dynamic” widget onto the page.
• Insert HTML, CSS JavaScript code provided by third-party services to embed additional functionality.

Rich Text Widget

• Drag and drop the “Rich Text” widget onto the page.
• Select the “Open Rich Text Widget” button to launch the WYSIWYG editor.
  • Users can create lists and add hyperlinks without HTML, while still having the flexibility to write or paste HTML, CSS, and JavaScript when needed.