Use Flexi-cells to help organise content into consistent, manageable, visually distinct blocks, making it easier for users to scan and interact with. Ensure your content aligns with the brand guidelines.
Symbol
This version of the Flexi-cell has a responsive content layout, use the demo button to preview this responsive behaviour.
Horizontal
- Xs - Sm: Symbol is stacked above labels, tile padding 12px
- Md +: Symbol is inline to the left of the labels tile padding 18px
Vertical
- Xs - Sm: Tile padding 12px
- Md +: Tile padding 18px
Image bleed
This version of the Flexi-cell has a responsive content layout, use the demo button to preview this responsive behaviour.
Horizontal
- Xs - Sm: Tile padding 12px
- Md +: Tile padding 18px
Vertical
- Xs - Sm: Tile padding 12px
- Md +: Tile padding 18px
User experience
Try to keep the amount of content displayed in each tile consistent, tiles that appear in a horizontal layout should all be the same height.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.
| Platform | Status |
|---|---|
| GEL Design System | Available |
| Mesh UI | Older version available - Upgrade in backlog |
| Legacy WDP | Older version available |