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
<div class="ds-rows">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Indent
Indents the contents, this would generally be used on the main outer container of content.
Small
<div class="ds-rows --indent-small">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Medium (Default)
<div class="ds-rows --indent">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>Large
<div class="ds-rows --indent-large">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div><div class="ds-rows --indent">
<div class="ds-row --outdent">Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>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.
<div class="ds-rows">
<div class="ds-span --6">Content 1</div>
<div class="ds-span --2">Content 2</div>
<div class="ds-span --4">Content 3</div>
</div>No gap
<div class="ds-rows --no-gap">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div class="ds-span --6">Content 4</div>
<div class="ds-span --2">Content 5</div>
<div class="ds-span --4">Content 6</div>
</div>No col gap
<div class="ds-rows --no-col-gap">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div class="ds-span --6">Content 4</div>
<div class="ds-span --2">Content 5</div>
<div class="ds-span --4">Content 6</div>
</div>No row gap
<div class="ds-rows --no-row-gap">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div class="ds-span --6">Content 4</div>
<div class="ds-span --2">Content 5</div>
<div class="ds-span --4">Content 6</div>
</div>Examples
Nested indents
<div class="ds-rows --indent">
<div>Content 1 - indent 1</div>
<div class="ds-rows">
<div>Content 2 A - indent 1</div>
<div class="ds-rows">Content 2 B - indent 1</div>
<div class="ds-rows --indent">
<div>Content 2 C - indent 2</div>
<div>Content 2 D - indent 2</div>
</div>
<div>Content 2 D - indent 1</div>
<div>Content 2 E - indent 1</div>
</div>
<div>Content 3 - indent 1</div>
</div>