The Smart List Block is designed to create stylish, sortable lists with powerful customization options, allowing you to present post information or any custom content in a structured and visually appealing format.

1. General: List Preset

The General panel allows you to choose the list presets and configure the core structure, orientation, and alignment of your list items.

• List Preset: Choose from multiple predefined layout styles, ranging from classic bulleted lists to card-based grid arrangements.
• List Orientation: Define the flow of your list items by selecting either Horizontal or Vertical orientation.
• Alignment: Adjust the list content alignment (Left, Center, Right) from here.

• Space Between Lists: Set the vertical or horizontal gap between individual list items.
• Icon to Content Gap: Control the specific distance between the list icon/image and the associated text content.
• Items Width: Adjust the total width of the individual list items to ensure they fit perfectly within your layout.

Divider:

Turn this toggle ON/OFF to enable (Default on for Preset 02) or disable a separator line between list items.

• Divider Style: Select the visual format of the divider, such as Solid, Dashed, Dotted, or Double Line.
• Divider Width: Set the thickness (in pixels) of the divider line.
• Divider Color: Define the color of the separator to match your site’s branding.

Style List:

From this Style panel, you can easily manage the main appearance and spacing of the list item containers.

• Normal / Hover: Switch between Normal / Hover to define independent styles for the static state and the interactive mouse-over state.
• Background Type: Choose from Solid, Gradient, or Image backgrounds to fill the list item container.

Note: If you select the list background as an image, you will find the following options:

• Image Upload & Set Scale: Upload any image from your library, and set the image scale to None, Cover, or Contain. 
• Image Overlay: Enable Image Overlay, set Overlay color & opacity from here.

• Border Style: Select from four distinct border styles, including Solid, Dashed, Dotted, or Double.
• Border Width: Configure and set the thickness of the list items’ border.
• Border Color: Define the color of the list items’ stroke or border.
• Border Radius: Set the adjustment of the corner roundness, allowing for a square or pill-shaped list.
• Box Shadow: Enable the box shadow and choose from different shadow types, and add a shadow effect to the list.
• Padding & Margin: Use this to adjust the inner & outer spacing, changing the list height and width.

2. Icon/Image: General

From the Icon/Image panel, you can easily add and style visual elements within your list items.

• Icon Toggle: Use this toggle to enable and disable the display of icons or images within the list.
• Icon Source: Choose between three distinct sources.
• Icon Set: Pick your preferred icons that are commonly used in list items & set the icon size.

• Icon Library: Choose the best stylish icons from vast icon libraries & set the icon size.

• Custom: Upload any custom icon or image, and set the Width & Height to precisely scale the icon’s dimensions.
• Icon Size: Set the icon size according to the icon source type (in pixels, %, or em) to precisely scale the icon’s dimensions.
• Icon Position: Choose the placement of the icon, either before, after, or at the top of the text content.
• Alignment: Set the vertical position of the icon relative to the text, such as Top, Middle, or Bottom.

Style Icon/Image:

From this style panel, you can fine-tune the appearance of the icon container and its interactive states.

• Icon Background: Use this toggle to enable or disable the icon background.
• Choose Background Shape: Select from various geometric presets, including Square, Circle, Hexagon, Diamond, and Rounded Circle.
• Normal / Hover: Switch between Normal / Hover to define independent styles for the static state and the interactive mouse-over state.
• Icon Color: Set the primary color of the icon asset.
• Icon Background Style & Color: Choose between Solid or Gradient background types and select the specific color for the icon’s container.
• Border Styling: Select from various stroke presets (None, Solid, Dashed, Dotted, or Double) to frame the icon.
• Border Width & Color: Adjust the thickness and color of the icon’s outline.
• Border Radius: Set the adjustment of the corner roundness, allowing for a square or pill-shaped icon.
• Padding: Use this to adjust the inner spacing, changing the list height and width.

3. Content: General

From the Content panel, you can manage and style the textual elements of your list items, including titles and descriptions.

• List Title Toggle: Turn this ON/OFF to enable or disable the primary heading for each list item.
• Description Toggle: Enable or disable it to show/hide the description of the list items.
• Title to Description Gap: Set a gap to adjust the vertical spacing between the title and its description.
• Alignment: Set the List title & description alignment to Left, Center, or Right from here.

Style Content

Using the style panel, you can fine-tune the visual of your content across different states.

• Typography: Configure the Title and Description Typography to customize font family, size, weight, and line height.
• Normal / Hover: Switch between Normal / Hover to define independent styles for the static state and the interactive mouse-over state.
• Title Color: Set the primary color of the heading text.
• Description Color: Set the specific color of the description text from here.

Let’s watch a live demo of how the Smart List will be displayed on your posts or pages.