accordion filled
A filled accordion is a UI component used to organize content into collapsible sections, offering a background color that helps visually separate it from surrounding elements. It enhances webpage navigation by keeping content compact and makes the accordion stand out, encouraging users to easily access or hide detailed information with a simple click.
accordion outlined
An outlined accordion is a UI component designed to organize content into collapsible sections with a transparent background, delineated by a subtle border. It keeps content compact while maintaining a minimalistic look, allowing users to focus on the content without overwhelming the design.
other
This section covers key considerations and use cases that apply to both types of accordions, ensuring consistency and best practices across implementations.
By default, accordion slots have no padding. To add padding, you’ll need to apply any of the global body padding classes. In this example, the dashed lines around the slots aren’t part of the accordion’s design—they’re here to help illustrate the boundaries of the content area when padding isn’t applied.