FlexCard Documentation

Attribute Values Description
data-max-height auto | <number>
  • Optional.
  • Default : auto
  • Sets the maximum height of the card body not including the card header.
  • auto : max height is determined on document load based on content.
  • <number> : explicitly setting the max height of the body. If the content is lower, the actual height will adjust to content and if content is higher a scrollbar will appear.
data-close-others true | false
  • Optional.
  • Default : false
  • Whether opening one FlexCard will close other FlexCards on the same page.
  • true : when opening a FlexCard any other FlexCard on the same page will close.
  • false : when opening a FlexCard any other open FlexCard will NOT close, this allows multiple cards to be open at the same time.
data-animation-time <number>
  • Optional.
  • Default : 0.3
  • How long time it takes the FlexCard body to open & close AND how long time it take any toggle button to change state.
data-toggle-icon-provider builtin | custom | none
  • Optional.
  • Default : builtin
  • builtin : use one of the builtin toggle icons.
  • custom : provide your own toggle icon.
  • none : don't display any toggle icon.
data-toggle-icon-design plus-x | arrow | plus-minus
  • Optional.
  • Default : plus-x
  • Only relevant if provider is set to builtin
  • plus-x : icon is a plus sign in closed state and an x sign in open state.
  • arrow : icon is a downward pointing arrow in closed state and an upward pointing arrow in open state.
  • plus-minus : icon is a plus sign in closed state and a minus sign in open state.