Surface group
Provide support to layout surface components together with consistency.
Base
The layout align elements in a row with a gap between them. You can nest groups to achieve advanced layouts.
.l-surface-group
Direction
The default direction is horizontal (row) but you can make it vertical (column). These classes are generated for each breakpoints in order to adjust the layout depending of the screen width.
Row (default) R
.l-surface-group .l-surface-group--row
Column R
.l-surface-group .l-surface-group--col
Responsive example
The group will stack vertically by default and will switch to horizontal on large screens (resize your browser window to see the changes)..l-surface-group .l-surface-group--col .l-surface-group--row@medium
Wrapping
Prevent wrapping
By default the child elements will wrap. You can prevent wrapping with the .l-surface-group--nowrap class.
.l-surface-group .l-surface-group--nowrap
Child items options
Fill R
You can make child elements fill the available horizontal space by applying the l-surface-group__item--fill to them. You can use responsive classes to apply this from specific breakpoints, like .l-surface-group__item--fill@large.
.l-surface-group__item--fill
Nesting
You can nest Surface Groups for complex layouts. By using responsive class for direction and fill you can achieve layout that work properly on screen of all size. You can test the example below on small and large screen: