Style ◑

Spacing

• Padding: Adjust the internal space between the edges of the block and the content inside it. This adds “breathing room” around your tabs and nested items, preventing the content from feeling cramped against the container’s borders.
• Margin Top: Define the specific amount of vertical space above the block. Use this to create a clear separation from the elements preceding it, such as a heading or an image.
• Margin Bottom: Control the vertical gap below the block. This ensures there is an appropriate distance between the Toggle Content and the next section of your page.

Border & Radius

• Border: Add a structural perimeter to the main container. You can customize the width, style, and color to give the block a clear boundary against your page background.
• Border Radius: Use the slider to transition from sharp, modern squares to soft, classic circles.Size: Independently scale the arrow icon within its box. You can create a “minimalist small arrow in a large box” or a “bold arrow that fills the frame.”
• Box Shadow: When the Box Shadow toggle is enabled, you can add depth and dimension to your container to make it “pop” off the page:
  • Position: Choose Outline for a traditional drop shadow or Inset to make the shadow appear inside the container, creating a “pressed” effect.
  • Horizontal & Vertical: Shift the shadow’s position along the X and Y axes to simulate a specific light source.
  • Blur & Spread: Blur softens the edges of the shadow for a natural look, while Spread expands or contracts the overall surface area of the shadow.
  • Shadow Color: Select the color and transparency (opacity) of the shadow effect.

Header Styles

The Header Styles panel allows you to customize the navigation area (the tabs or toggle switcher) of your block. These settings ensure the “triggers” for your content are visually distinct and perfectly aligned with your design system.

• Width: Define the horizontal span of the header area:
  • Default: Stretches the header to the full 100% width of the parent container.
  • Fit Content: Shrinks the header width to only occupy the space needed for the tab labels or toggle buttons.
• Padding: Adjust the internal spacing within the header. This controls how much room exists around the group of tabs, allowing for a more spacious or compact navigation bar.
• Margin Top / Bottom: Control the vertical clearance above the header and the gap between the header and the content area below it.
• Border: Add a stroke to the header container. This is often used to create a bottom “separator” line or a full box around the navigation buttons.
• Border Radius: Curvature settings for the header’s corners. Use this to create rounded “pill-shaped” navigation bars or subtle soft-edged containers.
• Color: Select a background fill for the entire header area. Applying a light gray or brand-tinted background can help distinguish the navigation labels from the content below.

Toggle Content Styles

• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color
  • Text Color: Sets the color for the labels on either side of the toggle.
  • Button Default: Defines the color of the sliding toggle button when it is in the inactive or initial position.
  • Button Active: Sets the color of the sliding toggle button when it is moved to the “on” or active position.
  • Background Default: The color of the switcher track (the area behind the button) in its starting state.
  • Background Active: The color of the switcher track when the toggle is switched to the active state.