Sizing options for Expansion panel /accordion #16202
Description
Is your feature request related to a problem? Please describe.
While developers can easily customize the visual style of exapansion panel via CSS, having three predefined sizes—small, medium, and large—creates a turnkey solution that developers can quickly implement without reinventing the wheel. This approach reduces the overhead of custom styling and ensures consistent design when compared to other components in the design system. This will prove even more effective in solutions like App Builder where we want to minimize time spent in customizations, and mix and match available sizes depending on context.
A small expansion panel will be perfect for compact areas, like a sidebar or a mobile view, where space is limited. It would have tighter padding, smaller font sizes, and minimal margins, ideal for nested navigation or secondary elements.
A medium size would strike a balance—suitable for general content sections where the panel needs to stand out but not dominate. It would have moderate padding and readable font sizes, making it a versatile default.
Finally, the large size is great for expansive content areas, like FAQs or prominent feature descriptions. It would have generous padding, larger typography, and ample spacing to enhance readability.
This structured size system enhances usability, simplifies decision-making for developers, ensures visual consistency, and improves the overall user experience across different contexts.
Describe the solution you'd like
Assuming Material, it will be really easy to create nested expansion panels to simulate hierarchical menus.
Design recommendations for size, typography and padding (Material example)
- Large
- Padding T & B 16px,
- Padding L and R 24px,
- Header text - Heading 6
- Subheader - Subtitle 2
- Body content padding same has header
- Medium:
- Padding T & B 12px,
- Padding L and R 16px,
- Header text - Subtitle 1
- Subheader - Body 2
- Small
- Padding T & B 8px,
- Padding L and R 12px,
- Header text - Subtitle 1
- Subheader - Body 2
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Nice to have
Expose a prefix and suffix slot to add content like image/avatar/icon to improve the visual presentation. The suffix can be helpful to highlight some useful metadata.
