Modules
...
Forms V2
Elements

Cards/Accordion

7min

A Card element is a UI component that is used to display information in a compact and organized manner. It typically consists of a container that holds a variety of elements, such as an image, heading, body text, and action buttons.

An Accordion element is a UI component that allows you to show or hide content on a page. It typically consists of multiple sections that can be expanded or compressed by clicking on a header or control element. The purpose of an Accordion is to present information in a compact and organized manner while conserving space on the page.

Cards

Element Details of Cards
Element Details of Cards
ο»Ώ

Field Details

  • Card Title: This field is used to define the title of the card/accordion.
  • Make as accordion toggle: This toggle enables or disablesΒ the accordion option.
  • Add Background: The card's background can also be chosen by clicking on the radio button. There are three options for choosing the background- none, color, and image.
    • None: No background will be applied if this option is selected.
    • Color: Any color can be applied according to requirement by simply entering the hex code of the color or choosing the color from the carousel using this option.
    • Image: Any image can be applied as the card's background by uploading the image of choice. (The image should be in svg format)
  • Select Elements: We can choose the required elements to be added to the card.

Toggle Buttons

  • Add Prefix icon: This toggle is used to add the desired prefix icon for the card.
  • Add Suffix icon: This toggle is used to add the desired suffix icon for the card.

The icon can be added by entering the name of the icon in the text box that appears on turning the toggle(s) on. The name of the icon can be found by clicking on 'Click here to find the icon name'

Accordion

Element Details of Accordi
Element Details of Accordi
ο»Ώ

Field Details

  • Card Title: This field is used to define the title of the card/accordion.
  • Make as accordion toggle: This toggle is used to enable or disableΒ the accordion option.
  • Default state of accordion:
    • Open: This is used to select the opened state of the accordion element.
    • Close: This is used to select the closed state of the accordion element.
  • Select Elements: We can choose the required elements to be added to the accordion.

Toggle Buttons

  • Accordion Prefix icon: This toggle is used to add the desired prefix icon for the Accordion.
  • Add Open Suffix icon: This toggle is used to add the desired suffix icon for the Accordion in the open state.
  • Add Close Suffix icon: This toggle is used to add the desired suffix icon for the Accordion in the closed state.

The icon can be added by entering the name of the icon in the text box that appears on turning the toggle(s) on. The name of the icon can be found by clicking on 'Click here to find the icon name'

Getting help

Please feel free to contact us if you have any questions, require clarification, or have ideas for how to make the documents or any of our services better.

You can reach out to us at [email protected].

ο»Ώ

Updated 27 Sep 2024
Did this page help you?