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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-rows --indent-large">
  <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 --indent">
  <div class="ds-row --outdent">Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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>