Dependopolis Consulting LImited

Components

Documentation

FAQs

FAQs – A collapsible accordion-style component designed to present frequently asked questions in an organized and user-friendly manner.

  • Plus Addon Accordion Widget – Used to create the collapsible FAQ layout.

/* No code defined. */

  1. Accordion Container:
    • Background: Light or neutral background color for contrast with the text.
    • Border: Subtle borders around the accordion container to separate items visually.
  2. Accordion Items:
    • Font Style: [Specify font family, e.g., “Roboto, 16px”].
    • Text Color: Default text in dark tones, hover or active state text in the primary brand color.
    • Padding: 15px for each accordion title and content for consistency.
    • Transition: Smooth 0.3s animation for expanding and collapsing items.
  3. Icons/Expand Button:
    • Size: 20px by 20px icons for clear visibility.
    • Hover State: Icon or “+” changes color to the primary brand color when hovered or active.
  4. Responsiveness:
    • Accordion items stack vertically on smaller screens.
    • Ensure adequate spacing between items for readability.

FAQs – A collapsible accordion-style component designed to present frequently asked questions in an organized and user-friendly manner.

  • Plus Addon Accordion Widget – Used to create the collapsible FAQ layout.

/* No code defined. */

  1. Accordion Container:
    • Background: Light or neutral background color for contrast with the text.
    • Border: Subtle borders around the accordion container to separate items visually.
  2. Accordion Items:
    • Font Style: [Specify font family, e.g., “Roboto, 16px”].
    • Text Color: Default text in dark tones, hover or active state text in the primary brand color.
    • Padding: 15px for each accordion title and content for consistency.
    • Transition: Smooth 0.3s animation for expanding and collapsing items.
  3. Icons/Expand Button:
    • Size: 20px by 20px icons for clear visibility.
    • Hover State: Icon or “+” changes color to the primary brand color when hovered or active.
  4. Responsiveness:
    • Accordion items stack vertically on smaller screens.
    • Ensure adequate spacing between items for readability.