Overview
The .ds-rows class (previously .ds-layout__rows) provides generic row layouts with options to implement fixed width child rows or columns.
The ds-rows class applied to a container element causes the containers child elements to display as a vertical list of horizontal rows, with a vertical gutter between each row. ds-rows is divided into 12 columns, with each row spanning all 12 columns (the full width of the container) by default.
Options
Basic usage
Layout
ds-rows supports layout modifiers for aligning row content, limiting the container width, and allowing the container to grow to fill the available height.
Center and middle
Use --center to align row content horizontally and --middle to align row content vertically.
Limit
Use --limit to limit the width of the rows container and center it within the available space.
Grow
Use --grow when the rows container should grow to fill the available height of its parent.
Indent
Indents the contents, this would generally be used on the main outer container of content.
Available indent modifiers:
| Type | Modifiers |
|---|---|
| All sides | --indent, --no-indent |
| Sized | --indent-xxsmall, --indent-xsmall, --indent-small, --indent-medium, --indent-large, --indent-xlarge, --indent-xxlarge |
| Vertical | --v-indent, --no-v-indent, --v-indent-xxsmall, --v-indent-xsmall, --v-indent-small, --v-indent-medium, --v-indent-large, --v-indent-xlarge, --v-indent-xxlarge |
| Horizontal | --h-indent, --no-h-indent, --h-indent-xxsmall, --h-indent-xsmall, --h-indent-small, --h-indent-medium, --h-indent-large, --h-indent-xlarge, --h-indent-xxlarge |
Small
Medium (Default)
Large
No indent
Column width
As an alternative ds-cols in some situations, ds-rows can be used to display column content.
If a direct child element of ds-rows has a class of .ds-span --X where X is a value betwen 1-12 that child element will display at that width.
Adjacent child elements with a .ds-span --X value will act like columns without the need of wrapping those rows in a parent element.
Gap
Use gap modifiers to control the spacing between rows and columns.
Available gap modifiers:
| Type | Modifiers |
|---|---|
| All directions | --gap, --no-gap |
| Sized | --gap-xxsmall, --gap-xsmall, --gap-small, --gap-medium, --gap-large, --gap-xlarge, --gap-xxlarge |
| Vertical | --v-gap, --no-v-gap, --v-gap-xxsmall, --v-gap-xsmall, --v-gap-small, --v-gap-medium, --v-gap-large, --v-gap-xlarge, --v-gap-xxlarge |
| Horizontal | --h-gap, --no-h-gap, --h-gap-xxsmall, --h-gap-xsmall, --h-gap-small, --h-gap-medium, --h-gap-large, --h-gap-xlarge, --h-gap-xxlarge |
No gap
Large gap
No horizontal gap
No vertical gap
Loading
Use --loading to show a loading state over the rows container. Add data-ds-message to provide visible loading text.
Examples
Nested indents
Manifest
The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/latest/ds-rows/manifest.json