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.
Adding an outdented row to an indented container turns it into a breakout grid: the other rows stay inset from the container edges, and the outdented row breaks out to the container edge.
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
Use --center to align row content horizontally. Each row shrinks to the width of its content and sits in the middle of the container.
Middle
Use --middle to align the block of rows vertically within the container. It only has a visible effect when the container is taller than its rows, for example with a fixed height, a min-height, or --grow inside a taller parent.
Center and middle
Combine the two to center rows in both directions.
Limit
Use --limit to limit the width of the rows container and center it within the available space.
When the container has an outdented row, the limit applies to the content rows rather than the container, so the row can still break out.
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 | --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
Outdented rows
Add --outdent to a direct child of an indented or limited rows container to make that row break out to the full width of the container. The container becomes a breakout grid: the horizontal indent turns into a gutter either side of the content rows, while the vertical indent still pads the top and bottom.
When an outdented row is the first or last child, it also extends through the corresponding top or bottom indent.
Without a --outdent child or direct <hr> the container is laid out exactly as before. A container with only a vertical indent has nothing to break out of, so --outdent has no effect there.
Breakout grid
In a breakout grid the horizontal gap sits beside each gutter, so the content is never inset by less than the gap. With the default gap, an --indent-xsmall container insets its content by the gap width once an outdented row is added. Reduce the gap with --no-h-gap if a narrower inset is needed.
Horizontal rules
A direct <hr> child is outdented automatically and does not need the --outdent modifier.
Outdented rows with limit
With an outdented row, --limit limits the width of the content rows instead of the container. The container stays full width and the gutters grow to center the content, so the outdented row breaks out past the limited content.
Outdented rows with columns
ds-span columns sit within the content rows. Columns are placed automatically from the start of the grid, so in a breakout grid add --start to the first column of each new row to keep it out of the gutter.
Nested outdented rows
Each container manages its own breakout. An outdented row spans the container it belongs to, and a nested container with its own indent is inset again from its parent’s content rows.
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.
Starting a new row
Add --start to a ds-span child to force it onto a new row, even when it would fit alongside the previous columns.
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
Prose with an outdented figure
Combine --limit and an indent for long-form content. Paragraphs stay at a readable width while figures, banners, or images break out to the full width of the container.
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/3.41.0/ds-rows/manifest.json?v=3.41.0