Expansion

Check out the Brandguide to find out when to use which version of the button.

Single Expansion Panel - Large (Use for desktop only)
Panel Title This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here. Long Title Personal data with your name and age This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here.
Single Expansion Panel - Small (Use primarily in mobile or with multi-column layouts)

<mat-expansion-panel bciMatExpansionSmall>....</mat-expansion-panel>

Panel Title This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here. Long Title Personal data with your name and age This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here. This is the content text that makes sense here.

Accordion

Options

Allow Multi Expansion Hide Indicators Show Panel 3

Panels

Panel 1 Panel 2
Section 1

This is the content text that makes sense here.

Section 2

This is the content text that makes sense here.

Section 3 Reveal Buttons Below