Skip to content
MENU

Soracom

Design System

Rows

A generic container for row layout

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>
Content 1
Content 2
Content 3
<div class="ds-rows">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>

Indented 

Indents the contents, this would generally be used on the main outer container of content.

<div class="ds-rows--indented">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
Content 1
Content 2
Content 3
<div class="ds-rows--indented">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
A specific row can be 'outdented' using ds-row--outdent
<div class="ds-rows--indented">
  <div class="ds-row--outdent">Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
Content 1
Content 2
Content 3
<div class="ds-rows--indented">
  <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>
Content 1
Content 2
Content 3
<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>
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
<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>
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
<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>
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
<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>