How To Use Accordion Widget

X

The Litho Accordion Widget is used to display text in a collapsed, condensed manner, letting you save space while still presenting an abundance of content.

With the Accordion, visitors can scan the item titles and expand an item only if it is of interest.

Content

General

Select styleChoose from different available styles
Enable default activeClick on “Yes” to enable default active

Accordion

Accordion itemsUse the ‘Add Item’ button to add more accordion items to the list
IconSelect the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the expanding concept
Active iconSelect the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the collapsing concept
Title HTML tagSet the HTML tag used for the title to H1- H6 or DIV

Style

Accordion

BackgroundChoose the color of the accordion background
PaddingSet the padding for accordion
MarginSet the margin for accordion
Border radiusSet the border radius around the accordion
Box shadowSet the box shadow of the accordion

Title

TypographySet the typography options for the titles
ColorChoose the color for the title text
Border typeChoose the border type for the titles from solid, double, dotted, dashed, and groove
PaddingSet the padding for the titles

Icon

AlignmentAlign the icon from the start to end of the title
ColorChoose the color of the icons
SizeSet the icon size
SpacingControl the spacing between the icon and the title
Icon top spacingControl the icon top spacing between the icon and the title
Active icon colorChoose the color of the active icon
Active icon top spacingControl the active icon top spacing between the icon and the title

Description

ColorChoose the background color of the description
TypographySet the typography options for the description
Border typeSet the border type for the description
PaddingSet the padding for the description
MarginSet the margin for the description

Advanced

Click here to set the advanced options that are applied to this widget.

SCROLL UP