A container component for organizing multiple accordion items with theme support and layout options. Designed to work with the theme system for visually distinct styles.
Overview
The accordion group component provides a structured container for multiple accordion items with support for theme variations and layout controls. It includes a content area above the accordion items specifically designed for the
title-cta component and integrates with custom layout builder sections.
Usage
{% embed 'dripyard_base:accordion-group' with {
theme: 'dark',
remove_containment: false
} %}
{% block content_above %}
{# Title-CTA component content #}
{% endblock %}
{% block accordion_group_content %}
{# Accordion items go here #}
{% endblock %}
{% endembed %}
Props
Property
Type
Options
Description
remove_containment |
boolean |
true, false |
Removes CSS containment classes. Useful for nested layouts |
theme |
string |
inherit, white, light, dark, black, primary |
Sets background colors and text colors for visual distinction |
Slots
Slot
Description
content_above |
Full-width content area designed for the title-cta component with reduced vertical spacing |
accordion_group_content |
Main content area for accordion items |
Accessibility Features
- Section element: Uses
<section> with role="group" for proper content grouping
- Theme integration: Maintains proper color contrast through theme variables
Content Areas
Content Above
The
content_above slot is specifically designed for the
title-cta component:
- Reduced spacing: Uses
--spacing-component-internal for tighter integration
Accordion Group Content
The main content area for accordion items:
- Grid layout: Uses CSS Grid for organized accordion item arrangement
- Flexible spacing: 12px gap between accordion items
- Item alignment: Accordion items align to the start of their grid cells
Theme System Integration
The component works with the theme system for visually distinct styles:
- Theme inheritance: Default
inherit theme uses parent context colors
- Background theming: Theme variants apply background colors for visual distinction
- Color coordination: Text colors automatically adjust based on selected theme
Layout Builder Integration
The component is integrated into a custom layout builder section.