Expansion
Expansion is a lightweight container that can function independently or be integrated into a larger surface. Tapping the expansion controls will either expand the content into a larger section or collapse it back to its original size.
- CSS
- Marko
- React
Progressive
Expansions reduce visual complexity and information density.
Empower
Users decide what information they want to see and when.
On-demand
Revealing and hiding information is a single tap away.
Title
The title describes what occurs when the button is selected. The title can be adjusted according to the context.
Expanding
The expansion button title adjusts according to its state to indicate what occurs when pressed. The title says “more” when collapsed and “less” when expanded. The expand button remains below the revealed content.
Overflow
The title wraps to another line when extending beyond the parent container.
Small
Expansion buttons appear directly beneath the content they expand on small screens.
Large
Expansion buttons appear directly below the content they expand on large screens.
