Advanced List

Estimated reading: 8 minutes 276 views

This widget enables you to organize your list in a more efficient and visually appealing manner. This feature allows you to customize individual list items with unique styles and designs, such as adding badges to certain items.

It offers various layout options to display your list, including horizontal and vertical orientation. You can also choose to use a grid view for a more structured and organized representation.

The “Advanced List” widget features the following controls:

Content

General

  • List

Content

  • Title: Enter the title for the list.
  • Description: Enter the description for the list item.
  • Show Badge: Toggle the badge as desired.
    • Badge Text: Enter the text for the badge.
  • Link: Enter the link for applying to the list.
Advanced List: Content Settings(individual item)
Advanced List: Content Settings(individual item)

Icon

  • Icon Type- Choose from a list of Icons, Images, or Lottie animations.
    • Icon
      • Icon: Select from the Font Awesome icon library or upload an SVG image.
    • Image
      • Image: Either upload an image or select a dynamic tag for display.
      • Image size: Choose the size for your icon image display.
    • Lottie Animation
      • Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
      • Loop: Enable the loop option to display the animation continuously.
      • Reverse: Activate the reverse option to display the animation in reverse order.
  • View – Select from default, stacked, or framed display options.
  • Shape – Select either Circle or Square shape for the stack or frame.
Advanced List: Icon Settings(individual item)
Advanced List: Icon Settings(individual item)

Style(for individual item)

  • Custom Style: Toggle the Custom Style as desired.
Advanced List: Custom Style Option(individual item)
Advanced List: Custom Style Option(individual item)

Normal

  • Background Type: Choose either a Classic or a Gradient.
    • Classic
      • Color: Choose the color for the background.
      • Image: Either upload an image or select a dynamic tag for display.
    • Gradient
      • Color: Select the color for the background.
      • Location: Determine the position of the color on the background by specifying their location in percentage.
      • Second Color: Select the second color for the background.
      • Location: Determine the position of the second color on the background by specifying their location in percentage.
      • Type: Select either Radial or Linear.
        • Radial
          • Position: Set the position.
        • Linear
          • Angle: Set the angle using DEG, GRAD, RAD, and TURN.
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border
Advanced List: Custom Style Normal Settings(individual item)
Advanced List: Custom Style Normal Settings(individual item)

Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the item box.

Advanced List: Custom Style Hover Settings(individual item)
Advanced List: Custom Style Hover Settings(individual item)

Counter

  • Color: Choose the color for the counter.
  • Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
Advanced List: Custom Style Counter Settings(individual item)
Advanced List: Custom Style Counter Settings(individual item)

Title

  • Normal
    • Color: Choose the color for the Title.
    • Text Shadow: Apply a shadow to the title if desired.
  • Hover
    • Color: Choose the color for the Title hover.
    • Text Shadow: Apply a shadow to the title hover if desired.
Advanced List: Custom Style Title Settings(individual item)
Advanced List: Custom Style Title Settings(individual item)

Description

  • Normal
    • Color: Choose the color for the description.
  • Hover
    • Color: Choose the color for the description.
Advanced List: Custom Style Description Settings(individual item)
Advanced List: Custom Style Description Settings(individual item)

Badge

  • Normal
    • Color: Choose the color for the badge.
    • Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the badge.
Advanced List: Custom Style Badge Settings(individual item)
Advanced List: Custom Style Badge Settings(individual item)

Icon

  • Normal
    • Primary Color: Choose the primary color for the icon.
    • Secondary Color: Choose the secondary color for the icon.
    • Size: Set the size of the Icon using %, EM, REM, VW, or PX.
    • Padding: Set the padding.
    • Rotate:  Set the rotation of your Icon.
    • Border Width: Set the border’s width using %, EM, REM, VW, or PX.
    • Border Radius: Set the border’s radius using PX, %, EM, or REM.
Advanced List: Icon Style Normal Settings(individual item)
Advanced List: Icon Style Normal Settings(individual item)
  • Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.

Advanced List: Icon Style Hover Settings(individual item)
Advanced List: Icon Style Hover Settings(individual item)

Note: To make the layout stacked on mobile devices, make sure to enable the Grid View option.

  • Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
  • List Direction: Choose either Vertical or Horizontal.
  • Counter: Activate the option to add a Counter to your list.
  • Grid View: Enable the Grid View option if desired.
    • Column: Specify the number of columns to display in a single row.
Advanced List: Content Settings
Advanced List: Content Settings

Settings

  • Title HTML Tag: Select the html tag for the title.
  • Link: Select on which you want to apply the link, “Icon” or “list.”
  • List Item Row Gap: Specify the gap between the list item rows(applicable if you enable Grid View).
Advanced List: Content Settings
Advanced List: Content Settings

Icon

  • Gap: Specify the gap between the icon and the list items.
  • Position: Select the position of the icon, either “right” or “left.”
  • Alignment: Select the alignment of the icon.
Advanced List: Icon Settings
Advanced List: Icon Settings

Badge

  • Position: Select the position of the badge, either “right” or “left.”
  • Alignment: Select the alignment of the badge.
  • Gap: Specify the gap between the badge and the list items.
Advanced List: Badge Settings
Advanced List: Badge Settings

Counter

Note: This option is only applicable if we enable Counter in the content section.

  • Type: Select the type of Counter.
  • Suffix: Select a suffix from the options of colon, dot, or bracket.
  • Position: Select either Vertical or Horizontal(applicable if List Direction is selected as Horizontal).
  • Alignment: Select the alignment of the Counter.
  • Gap: Specify the gap between the counter and the list items.
Advanced List: Counter Settings
Advanced List: Counter Settings

Style

General

  • Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
  • Box Shadow: Set the box shadow.
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border.
  • Border Radius: Set the border’s radius using PX or %.
  • Padding: Set the padding using PX or %.
  • Margin: Set the margin using PX or %.
Advanced List: General Style Settings
Advanced List: General Style Settings

List Item

  • Normal
    • Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
    • Box Shadow: Set the box shadow.
Advanced List: List Item Style Settings(Normal)
Advanced List: List Item Style Settings(Normal)
  • Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the list item box.

Advanced List: List Item Style Settings(Hover)
Advanced List: List Item Style Settings(Hover)
  • Border Type: Select the type of border.
    • Width: Enter the width for the border.
    • Color: Specify the color of the border.
  • Border Radius: Set the border’s radius using PX or %.
  • Padding: Set the padding.
  • Margin: Set the margin using PX or %.
Advanced List: List Item Settings
Advanced List: List Item Settings

Counter

  • Box Height: Set the box height.
  • Box Width: Set the box width.
  • Typography: Set the typography for the counter.
Advanced List: Counter Style Settings
Advanced List: Counter Style Settings
  • Normal
    • Color: Specify the color for the counter.
    • Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
    • Border Type: Select the type of border.
      • Width: Enter the width for the border.
      • Color: Specify the color of the border.
Advanced List: Counter Style Settings(Normal)
Advanced List: Counter Style Settings(Normal)
  • Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the counter.

Advanced List: Counter Style Settings(Hover)
Advanced List: Counter Style Settings(Hover)
  • Border Radius: Set the border’s radius using PX or %.
  • Padding: Set the padding.

Title

  • Normal
    • Color: Choose the color for the Title.
    • Text Shadow: Apply a shadow to the title if desired.
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the title.
  • Typography: Set the typography for the title.
Advanced List: Title Style Settings
Advanced List: Title Style Settings

Description

  • Normal
    • Color: Choose the color for the description.
    • Text Shadow: Apply a shadow to the title if desired.
    • Typography: Set the typography for the description.
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the description.
  • Margin: Set the margin for description.
Advanced List: Description Style Settings
Advanced List: Description Style Settings

Icon

Styling controls for the Normal and hover state are available under this section. Hover settings will be applied when Someone hovers the icon. Click here.

Advanced List: Icon Style Settings
Advanced List: Icon Style Settings

Badge

  • Typography: Set the typography for the badge.
    • Normal
      • Color: Set the color for the badge text.
      • Background Type: As we mentioned above, Choose either a Classic or a Gradient. Click here.
      • Box Shadow: Set the box shadow.
      • Border Type: Select the type of border.
        • Width: Enter the width for the border.
        • Color: Specify the color of the border.
Advanced List: Badge Style Settings(Normal)
Advanced List: Badge Style Settings(Normal)
  • Hover
    • Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the badge.
Advanced List: Badge Style Settings(Hover)
Advanced List: Badge Style Settings(Hover)
  • Border Radius: Set the border’s radius using PX or %.
  • Padding: Set the padding.
  • Margin: Set the margin using PX or %.
Advanced List: Badge Style Settings
Advanced List: Badge Style Settings

Check out the Demo page of Advanced List.

Share this Doc

Advanced List

Or copy link

CONTENTS