Components

Accordion

The Accordion component is used to display expandable accordion panels.

Usage

The accordion component is comprised of two components:

AccordionGroup: a wrapper for grouping related panel components.
AccordionPanel: a panel component which contains header (trigger element) and content (content to display).

The AccordionGroup provides a single default slot to display all child AccordionPanel elements and controls the overall width of the rendered component.

Getting Started

Customization Options

Components

::accordion-group
  ::accordion-panel
  #header
  Getting Started

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Customization Options

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Components

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::
::

By default, the group only allows a single panel to be expanded at a time. By setting the group's multiple prop to true, the AccordionGroup will allow multiple items to be expanded simultaneously.

The AccordionPanel component is a vertically collapsing container to be used in the AccordionGroup component that consists of header and content slots that can be used to show and hide information.

Accordion Group

Props

multiple

A boolean to determine if multiple items can be expanded at once.

Type: boolean
Default: false

Getting Started

Customization Options

Components

::accordion-group
---
multiple: true
---
  ::accordion-panel
  #header
  Getting Started

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Customization Options

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Components

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::
::

panelProps

You can configure common properties for all child AccordionPanel components from the parent AccordionGroup by passing the desired settings via the group's panelProps.

Each panelProps property will be bound to all panels in the current group.

Should you desire to customize an individual AccordionPanel, you can provide these same options directly to the individual panel component as top-level props.

Type: Object

Default:

{
  border: '1px solid #e0e4ea',
  margin: '0',
  headerColor: '#52596e',
  headerBackground: undefined,
  headerBorderRadius: "",
  headerPadding: '8px 12px',
  headerMargin: '0',
  contentColor: '#52596e',
  contentBackground: undefined,
  contentBorderRadius: "",
  contentMargin: '0',
  contentPadding: '0 12px 12px',
}

Getting Started

Customization Options

Components

::accordion-group
---
multiple: false
panel-props:
  border: "1px solid darkcyan"
  margin: "0px"
  header-color: "darkcyan"
  header-border-radius: "2px"
  header-margin: "2px"
  header-padding: "4px"
  content-color: "black"
  content-border-radius: "2px"
  content-margin: "4px"
  content-padding: "6px"
---
  ::accordion-panel
  #header
  Getting Started

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Customization Options

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Components

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::
::

AccordionGroup Component Props

multiple

A boolean to determine if multiple panels can be expanded at once.

panel-props

Options to bind to all accordion panels in the current accordion group.

margin

The margin of the component. Accepts string | null.

border

The border of the element. Accepts string | null.

header-color

The color of the header text.

header-background

The background of the header.

header-border-radius

The border radius of the header.

header-margin

The margin of the header.

header-padding

The padding of the header.

content-color

The text color of the content area.

content-background

The background of the content area.

content-border-radius

The border radius of the content area.

content-margin

The margin around the content area.

content-padding

The padding of the content area.

Shared Props

The AccordionGroup component also includes the shared props listed below:

margin - default is 0
maxWidth - default is 100%.
styles - default is ''.

See here for more information on shared props.

Slots

default

Use the #default slot to add AccordionPanel components to display content inside AccordionGroup.

Accordion Panel

Expandable container to display a header and content, used as a direct child of the AccordionGroup component.

Props

Passing props directly to the AccordionPanel will override options passed to the AccordionGroup via panelProps.

expanded

Determines if the accordion panel should be expanded initially.

Type: boolean
Default: false

Getting Started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

Customization Options

Components

::accordion-group
  ::accordion-panel
  ---
  expanded: true
  ---
  #header
  Getting Started

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Customization Options

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::

  ::accordion-panel
  #header
  Components

  #content
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
  ::
::

Text to display in the header of the accordion panel. If the header slot is provided, the slot content takes precedence.

Type: string
Default: ''

content

Text to display in the content section of the accordion panel. If the content slot is provided, the slot content takes precedence.

Type: string
Default: ''

Getting Started

::accordion-group
  ::accordion-panel
  ---
  header: "Getting Started"
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate."
  ---
  ::
::

PanelProps

headerColor

The color of the header text.

Type: string
Default: #52596e

Getting Started

::accordion-panel
---
headerColor: "darkcyan"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

headerBackground

The background of the header.

Type: string
Default: undefined

Getting Started

::accordion-panel
---
headerBackground: "linear-gradient(lightgray, lightblue)"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

headerBorderRadius

The border radius of the header.

Type: string | null
Default: null

Getting Started

::accordion-panel
---
headerBorderRadius: "4px"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

headerMargin

The margin of the header.

Type: string
Default: 0

Getting Started

::accordion-panel
---
headerMargin: "12px"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

headerPadding

The padding of the header.

Type: string
Default: 8px 12px

Getting Started

::accordion-panel
---
headerPadding: "20px"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

contentColor

The text color of the content area.

Type: string
Default: #52596e

Getting Started

::accordion-panel
---
contentColor: "darkcyan"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

contentBackground

The background of the content area.

Type: string
Default: undefined

Getting Started

::accordion-panel
---
contentBackground: "linear-gradient(lightgray, lightblue)"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

contentBorderRadius

The border radius of the content area.

Type: string
Default: null

Getting Started

::accordion-panel
---
contentBackground: "lightgray"
contentBorderRadius: "4px"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

contentMargin

The margin around the content area.

Type: string
Default: 0

Getting Started

::accordion-panel
---
contentBackground: "lightgray"
contentMargin: "12px"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

contentPadding

The padding of the content area.

Type: string
Default: 0 12px 12px

Getting Started

::accordion-panel
---
contentBackground: "lightgray"
contentPadding: "20px"
---
#header
Getting Started

#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

Shared Props

The AccordionPanel component also includes the shared props listed below:

border - default is 1px solid #e0e4ea.
margin - default is 0.
styles - default is ''.

See here for more information on shared props.

Slots

header

Use the #header slot to customize the trigger button.

Getting Started

::accordion-panel
---
expanded: true
---
#header
[Getting Started](/){ style="color: darkcyan; font-weight: 600"}


#content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

content

Use the #content slot to customize the panel's content.

Getting Started

Custom link goes here

::accordion-panel
---
expanded: true
---
#header
Getting Started

#content
[Custom link goes here](/)
::