Style ◑

Header Box Styles

The Header Box Styles panel provides the layout and aesthetic controls for the container housing your component’s title and introduction. By customizing these settings, you can create a distinct visual separation between the header content and the main body, ensuring a structured and professional appearance for any section of your site.

• Padding: Adjust the internal breathing room around your heading text. Increasing padding creates a more prominent, “framed” look for the header area.
• Margin Top & Bottom: Control the external vertical spacing. Use Margin Top to separate the header from the elements above it, and Margin Bottom to define the distance between the header and the main content below.
• Border: Define a stroke style, width, and color to outline the header container. This is a great way to add structural definition or a subtle decorative touch.
• Border Radius: Control the roundness of the box corners. Use 0px for a sharp, formal rectangle or higher values to create soft, modern curves that match your site’s design language.
• Color:
  • Background Color: Set the fill color for the header container. Applying a subtle background color can help the title stand out as a clear visual anchor for the section.

Heading Styles

The Heading Styles panel provides dedicated controls to customize the visual character of your component’s main title. These settings allow you to go beyond standard typography, turning your heading into a stylized design element that captures the user’s attention.

• Padding: Adjust the internal space between the text and the boundary of the heading’s background or border. This is essential for ensuring the text doesn’t feel cramped when using background colors.
• Border: Apply a stroke style, width, and color around the heading. This can be used to underline, frame, or fully encase the title for added emphasis.
• Border Radius: Define the curvature of the heading’s corners. This works in tandem with the background or border to create a sleek, modern look.
• Clip-path: Enter a custom CSS clip-path value (such as polygon(50% 0, 100% 50%, 50% 100%, 0 50%) or circle(40%)) to create unique, non-rectangular shapes for the heading’s background. This allows for creative, high-end design layouts like slanted or notched headers.
• Color:
  • Text Color: Set the primary color for the heading typography to ensure it is legible and brand-consistent.
  • Background Color: Apply a fill color specifically to the heading area, which can be used to create a “badge” or “highlight” effect behind the title.

Sub Heading Style

The Sub Heading Styles Panel allows you to refine the secondary text or links within your header. This is particularly useful for styling “View All” links or descriptive taglines, providing a clear visual hierarchy and interactive feedback for users.

• Padding: Adjust the internal space around the sub-heading text. This is essential if you are styling the sub-heading as a button or badge to ensure the text has balanced breathing room.
• Border: Define the stroke style and width. A subtle border can help transform a simple text link into a sophisticated call-to-action.
• Border Radius: Control the roundness of the corners. Use a high value to create a pill-shaped button or 0px for a classic rectangular look.Vertical & Horizontal Positioning: Use these granular offsets to “pin” the badge to specific areas of the product image. You can tuck it into the top-right corner or center it along the bottom edge for a unique look.
• 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 (Default/Hover): Set the base color for your text and define a hover color to provide immediate visual feedback when a user interacts with the link.
  • Background (Default/Hover): Apply a background fill to the sub-heading area. Switching the background color on hover creates a dynamic, “button-like” feel.
  • Border Hover: Change the outline color during a hover event to further emphasize the interactivity of the element.

Product Box Style

The Product Box Styles panel governs the container of the individual product card. These settings allow you to define the outer structure and interactive behavior of each item, ensuring your products are presented with consistent spacing and engaging motion.

• Padding: Adjust the internal space between the product content (image, title, price) and the edge of the box. This creates a balanced, professional frame for each item.
• Margin Top & Bottom: Control the external vertical spacing. This defines the gap between the product cards and the elements above or below the block.
• Border: Apply a stroke style and color to the product container. A subtle border can help separate products from the page background, especially on minimalist white layouts.
• Border Radius: Define the curvature of the box corners. Use a higher value for a soft, friendly look or 0px for a sharp, modern aesthetic.
• Hover Effect: When toggled on, this adds a “lift” animation to the product card. When a user mouses over the box, it translates slightly upwards, creating a sense of depth and providing clear visual feedback that the product is interactive.
• Default / Hover States: Use the toggle tabs to define different styles for the “Normal” and “Hover” states. You can shift colors, borders, or shadows to create a dynamic visual lift.
  • 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.
• 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
  • Background (Default/Hover): Apply a background fill to the sub-heading area. Switching the background color on hover creates a dynamic, “button-like” feel.
  • Border Hover: Change the outline color during a hover event to further emphasize the interactivity of the element.

Product Style

The Product Styles panel provides precise control over the presentation of the product imagery and typography. These settings allow you to standardize how your catalog appears, ensuring a uniform and professional look regardless of varying image sizes or title lengths.

• Product Image:
  • Width & Height: Define the specific dimensions for the product images. Setting a fixed height is a great way to maintain a consistent “row” look across your entire layout.
  • Radius: Control the corner roundness of the product image itself. This can be used to create soft, circular, or pill-shaped thumbnails.
  • Object Fit (Cover/Contain): Use this toggle to decide how the image fills its container. Cover ensures the image fills the entire area (cropping if necessary), while Contain shows the full image without cropping, which is ideal for products where every detail matters.
  • Object Position: Adjust the focal point of the image within the frame. If an image is cropped, you can choose to pin the focus to the Top, Center, Bottom, Left, or Right to ensure the most important part of the product is always visible.
  • Margin Top & Bottom: Control the external vertical spacing around the image. This helps define the distance between the photo and the surrounding elements like the “Sale” badge or product title.
  • Image Hover Effect: When active, the image will subtly zoom in when a user hovers over the card. This adds a layer of dynamic polish and draws the shopper’s eye toward the product details.
• Product Title / Content Typography:
  • Margin Top & Bottom: Control the vertical breathing room for your product titles and descriptions. This allows you to create a clear hierarchy and prevent the text content from feeling crowded.
  • 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.

Product Style

The Product Styles panel provides precise control over the presentation of the product imagery and typography. These settings allow you to standardize how your catalog appears, ensuring a uniform and professional look regardless of varying image sizes or title lengths.

• Image Hover Effect: When active, the image will subtly zoom in when a user hovers over the card. This adds a layer of dynamic polish and draws the shopper’s eye toward the product.
• Product Image:
  • Width & Height: Define the specific dimensions for the product images. Setting a fixed height is a great way to maintain a consistent “row” look across your entire layout.
  • Radius: Control the corner roundness of the product image itself. This can be used to create soft, circular, or pill-shaped thumbnails.
  • Object Fit (Cover/Contain): Use this toggle to decide how the image fills its container. Cover ensures the image fills the entire area (cropping if necessary), while Contain shows the full image without cropping, which is ideal for products where every detail matters.
  • Object Position: Adjust the focal point of the image within the frame. If an image is cropped, you can choose to pin the focus to the Top, Center, Bottom, Left, or Right to ensure the most important part of the product is always visible.
  • Margin Top & Bottom: Control the external vertical spacing around the image. This helps define the distance between the photo and the surrounding elements like the “Sale” badge or product title.
  • Image Hover Effect: When active, the image will subtly zoom in when a user hovers over the card. This adds a layer of dynamic polish and draws the shopper’s eye toward the product details.
• Product Title / Content Typography:
  • Margin Top & Bottom: Control the vertical breathing room for your product titles and descriptions. This allows you to create a clear hierarchy and prevent the text content from feeling crowded.
  • 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.
• Colors
  • Image Overlay: Set a color layer that appears over the product image, which is especially useful for improving the legibility of text or icons placed on top.
  • Product Title (Default/Hover): Choose the primary color for your titles and a secondary color for when a user interacts with the link.
  • Product Price: Set a distinct color for the price to make it stand out as a key piece of information.
  • Product Summary: Define the color for the short description to maintain a balanced visual weight against the title.

Navigation Styles

• Icon 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 Width & Height: Define the clickable area surrounding the navigation arrows. Creating a larger box ensures your gallery is touch-friendly and easy to navigate on mobile devices.
• Border: Add a structural outline to your navigation boxes. This is ideal for “Ghost Button” styles where the background is transparent.
• Border Radius: Use the slider to transition from sharp, modern squares to soft, classic circles.
• Color
  • Icon & Icon Hover: Set the color of the arrow itself. Providing a high-contrast hover color gives the user immediate tactile feedback.
  • Background & Background Hover: Control the fill color of the navigation box.