Back to all components

Accordion

An accordion is a collapsible content panel that allows users to expand or collapse sections of information.

It’s great for organising large amounts of content in a compact space, making it easier to navigate.


Key Features
  • Collapsible Sections: Users can expand or collapse content as needed.
  • Responsive Design: Adjusts seamlessly across different screen sizes.
  • Interactive UI: Improves user experience by displaying only relevant information at a time.
  • Customisable: Easily styled and adapted to match any site’s design.


Examples
  • FAQs: Organise frequently asked questions, allowing users to click and expand answers.
  • Product Details: Show detailed product specs without overwhelming the page.
  • Dashboard Panels: Hide or reveal different sections of data in admin panels

The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.


The text area you can change text size and include links.

The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.

The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.

Variations

You can change the width, custom styles and the header and body text are both full WYSIWYG editors.

The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.

The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here. The body text goes here.

Next

Alert

Back to all components. An alert is used to display important messages or notifications to users, such as warnings, success messages, or error alerts. You can change the width, custom styles and the header and body text are both full WY...

Read More