A container component for organizing multiple accordion items with theme support and visual variations. Designed to work with the theme system for visually distinct styles and supports different layout variations.
Overview
The accordion group component provides a structured container for multiple accordion items with support for theme variations and visual layout options. It uses a grid-based layout for organizing accordion items with configurable spacing and borders.
Usage
{% embed 'dripyard_base:accordion-group' with {
theme: 'dark',
variation: 'borders'
} %}
{% block accordion_group_content %}
{# Accordion items go here #}
{% endblock %}
{% endembed %}
Props
| Property | Type | Options | Description |
|---|---|---|---|
theme |
string | inherit, white, light, dark, black, primary |
Sets background colors and text colors for visual distinction. Default: inherit |
variation |
string | background-color, borders |
Visual variation that affects layout and styling. borders removes gap between items |
Slots
| Slot | Description |
|---|---|
accordion_group_content |
Main content area for accordion items arranged in a grid layout |
Accessibility Features
- Section element: Uses
<section>withrole="group"for proper content grouping - Theme integration: Maintains proper color contrast through theme variables
- Semantic structure: Provides proper sectioning for screen readers
Visual Variations
Background Color Variation
- Standard layout with spacing between items
- Uses theme colors for background and text
Borders Variation
- Removes gap between accordion items for seamless borders
- Items appear connected without spacing
Theme System Integration
The component integrates with the theme system:
- Theme inheritance: Default
inherittheme uses parent context colors - Background theming: Non-inherit themes apply
--theme-surfacebackground - Color coordination: Text color uses
--theme-text-color-mediumfor consistency