Surface segmented

Provide support to layout surface components linearly in segments.

Base

The layout align elements in a row without gap between them.

.l-surface-segmented

Wrapping

Prevent wrapping

By default the child elements will wrap. You can prevent wrapping with the .l-surface-group--nowrap class.

.l-surface-segmented .l-surface-segmented--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-segmented__item--fill