UI Accordion

September 4, 2021
UI Accordion

UI Accordion

Items:

  • Give the item a title, link and link title
  • Click on "Add New" to add a new item
  • Allow multiple items to open: if yes, all items are able to be open at the same time, if no, just one item is readable when you click on it.
  • Allow all items to be closed: if yes, all items can be reduced at the same time. If no, just one item can be reduced at a time.
Card Settings

Card Settings

  • Style: Select a predefined card style for accordion (None, default, muted, primary, secondary, hover, custom)
  • With a custom style, you'll be able to create your own style for color, background color, background color hover, border type, size
Title Settings

Title Settings

  • Click on the edit button to change the font typography
  • Select predefined color for the title text: none, muted, emphasis, primary, secondary, success, warning, danger.
Content settings

Content Settings

In the content settings, you'll be able to change the following options:

  • Content font: edit the font of the content
  • Custom color: keep the text color as default or choose a custom color.
  • Transform: to transform the text into uppercase, capitalized, or lowercase characters.
  • Drop cap: to display the first capital letter of the paragraph as large as a decorative element.
  • Column: Set the number of columns.
  • Column breakpoint: if the number of columns is more than 1, you can set the device width from which the text columns should apply.
  • Margin top: set the top margin of the accordion.