Skip to content

Soracom

Design System
Home Design System Styles Sizing

Sizing

Utility class for sizing of elements.

Overview 

The classes below are to set the dimensions of general html elements. In addition to the below options, most components have individual size options available (such as ds-button --large).

These general classes may be overridden by other components styles or general restrictions of the html element itself.
Setting the width, max-width, height, or max-height of element using the following classes will automatically set any overflowing content to scroll.

Format 

The format of width and height utility classes is:

For pixels based:

--{number}-{w|h}

For other units:

--{number}-{w|h}-{unit}

Where:

  • {number} is 1-100.
  • {w|h} is either -w, -wmax, -wmin for widths, and -h, -hmax, -hmin for heights.
  • {unit} is either not set (defaults to -px), -pc, -vw, -vh, -ch.

Units 

Pixel based 

The default size is based on a 10px ‘space’, where --20-w would result in a width of 200px (20 x 10px).

The available space increments are: 1-100

For example:

  • --1-w — 10px width
  • --7-h — 70px height
  • --40-w — 400px width
  • --95-h — 950px height

Percentage based 

The following percentage based units are supported:

  • pc — Percentage
  • vw — Viewport width
  • vh — Viewport height

The available percentage increments are: 1-100

For example:

  • --1-w-pc — 1% width
  • --7-h-vh — 7vh height
  • --40-w-vw — 40vw width
  • --95-h-vw — 95vw height

Character based 

The following character based units are supported:

  • ch — Character width

The available character length increments are: 1-100

Character widths is a rough estimate of actual line length, and is dependent on the characters in a specific line. Generally, the width is 10-30% wider than the number of characters.

For example:

  • --1-w-ch — ~1 character width
  • --7-h-ch — ~7 characters height
  • --40-w-ch — ~40 characters width
  • --95-h-ch — ~95 characters height

Widths — General 

Set the widths, min-widths, or max-widths of the element.

-w width 

Element widths will be the set width and are responsive.

Width using space (10px) units 
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-w">
  <p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-w">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-w">
  <p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-w">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
Width using character (ch) units 
<!-- Narrow content (40ch) -->
<div class="ds-rows highlight --40-w-ch">
  <p>Content</p>
</div>
<!-- Wide content (40ch) -->
<div class="ds-rows highlight --40-w-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (40ch) -->
<div class="ds-rows highlight --40-w-ch">
  <p>Content</p>
</div>
<!-- Wide content (40ch) -->
<div class="ds-rows highlight --40-w-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
Width using percentage (pc) units 
<!-- Narrow content (75%) -->
<div class="ds-rows highlight --75-w-pc">
  <p>Content</p>
</div>
<!-- Wide content (75%) -->
<div class="ds-rows highlight --75-w-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (75%) -->
<div class="ds-rows highlight --75-w-pc">
  <p>Content</p>
</div>
<!-- Wide content (75%) -->
<div class="ds-rows highlight --75-w-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>

-wmin min width 

Elements will be as wide as the minimum width, expand to fit the content, and are responsive.

Min width using space (10px) units 
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-wmin">
  <p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-wmin">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-wmin">
  <p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-wmin">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
Min width using character (ch) units 
<!-- Narrow content (40ch) -->
<div class="ds-rows highlight --40-wmin-ch">
  <p>Content</p>
</div>
<!-- Wide content (40ch) -->
<div class="ds-rows highlight --40-wmin-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (40ch) -->
<div class="ds-rows highlight --40-wmin-ch">
  <p>Content</p>
</div>
<!-- Wide content (40ch) -->
<div class="ds-rows highlight --40-wmin-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
Min width using percentage (pc) units 
<!-- Narrow content (75%) -->
<div class="ds-rows highlight --75-wmin-pc">
  <p>Content</p>
</div>
<!-- Wide content (75%) -->
<div class="ds-rows highlight --75-wmin-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (75%) -->
<div class="ds-rows highlight --75-wmin-pc">
  <p>Content</p>
</div>
<!-- Wide content (75%) -->
<div class="ds-rows highlight --75-wmin-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>

-wmax max width 

Elements will be as narrow as it’s content up to the maximum width and are responsive.

Max width using space (10px) units 
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-wmax">
  <p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-wmax">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-wmax">
  <p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-wmax">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
Max width using character (ch) units 
<!-- Narrow content (40ch) -->
<div class="ds-rows highlight --40-wmax-ch">
  <p>Content</p>
</div>
<!-- Wide content (40ch) -->
<div class="ds-rows highlight --40-wmax-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (40ch) -->
<div class="ds-rows highlight --40-wmax-ch">
  <p>Content</p>
</div>
<!-- Wide content (40ch) -->
<div class="ds-rows highlight --40-wmax-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
Max width using percentage (pc) units 
<!-- Narrow content (75%) -->
<div class="ds-rows highlight --75-wmax-pc">
  <p>Content</p>
</div>
<!-- Wide content (75%) -->
<div class="ds-rows highlight --75-wmax-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content (75%) -->
<div class="ds-rows highlight --75-wmax-pc">
  <p>Content</p>
</div>
<!-- Wide content (75%) -->
<div class="ds-rows highlight --75-wmax-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>

Widths — Table columns 

See also ds-datatable Column widths documentation.

-w width 

Table column widths will be the set width, widths are not responsive, they will force the table to overflow if neccessary.

<!-- Narrow content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--30-w">Heading one</th>
      <th class="--16-w">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
<!-- Wide content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--30-w">Heading one</th>
      <th class="--16-w">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--30-w">Heading one</th>
      <th class="--16-w">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
<!-- Wide content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--30-w">Heading one</th>
      <th class="--16-w">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

-wmin min width 

Table column widths will be the minimum width or wider if space permits.

<!-- Narrow content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--16-wmin">Heading one</th>
      <th class="--20-wmin">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
<!-- Wide content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--16-wmin">Heading one</th>
      <th class="--20-wmin">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Narrow content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--16-wmin">Heading one</th>
      <th class="--20-wmin">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>
<!-- Wide content -->
<table class="ds-datatable">
  <thead>
    <tr>
      <th class="--16-wmin">Heading one</th>
      <th class="--20-wmin">Heading two</th>
      <th>Heading three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</td>
      <td>Content</td>
    </tr>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

-wmax max width 

-wmax is not supported for table column widths

Heights — General 

Set the heights, min-heights, or max-heights of the element.

-h height 

Element heights will be the set height and are responsive.

Height using space (10px) units 
<!-- Short content (250px) -->
<div class="ds-rows highlight --25-h">
  <p>Content</p>
</div>
<!-- Long content (250px) -->
<div class="ds-rows highlight --25-h">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (250px) -->
<div class="ds-rows highlight --25-h">
  <p>Content</p>
</div>
<!-- Long content (250px) -->
<div class="ds-rows highlight --25-h">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
height using character (ch) units 
<!-- Short content (30ch) -->
<div class="ds-rows highlight --30-h-ch">
  <p>Content</p>
</div>
<!-- Long content (30ch) -->
<div class="ds-rows highlight --30-h-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (30ch) -->
<div class="ds-rows highlight --30-h-ch">
  <p>Content</p>
</div>
<!-- Long content (30ch) -->
<div class="ds-rows highlight --30-h-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
Height using percentage (pc) units 
<!-- Short content (40%) -->
<div class="ds-rows highlight --40-h-pc">
  <p>Content</p>
</div>
<!-- Long content (40%) -->
<div class="ds-rows highlight --40-h-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (40%) -->
<div class="ds-rows highlight --40-h-pc">
  <p>Content</p>
</div>
<!-- Long content (40%) -->
<div class="ds-rows highlight --40-h-pc">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>

-hmin min height 

Elements will be as high as the minimum height, expand to fit the content, and are responsive.

-hmin-pc (percentage) is not supported
Min height using space (10px) units 
<!-- Short content (250px) -->
<div class="ds-rows highlight --25-hmin">
  <p>Content</p>
</div>
<!-- Long content (250px) -->
<div class="ds-rows highlight --25-hmin">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (250px) -->
<div class="ds-rows highlight --25-hmin">
  <p>Content</p>
</div>
<!-- Long content (250px) -->
<div class="ds-rows highlight --25-hmin">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
Min height using character (ch) units 
<!-- Short content (30ch) -->
<div class="ds-rows highlight --30-hmin-ch">
  <p>Content</p>
</div>
<!-- Long content (30ch) -->
<div class="ds-rows highlight --30-hmin-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (30ch) -->
<div class="ds-rows highlight --30-hmin-ch">
  <p>Content</p>
</div>
<!-- Long content (30ch) -->
<div class="ds-rows highlight --30-hmin-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>

-hmax max height 

Elements will be as short as it’s content up to the maximum height and are responsive.

-hmax-pc (percentage) is not supported
Max height using space (10px) units 
<!-- Short content (250px) -->
<div class="ds-rows highlight --25-hmax">
  <p>Content</p>
</div>
<!-- Long content (250px) -->
<div class="ds-rows highlight --25-hmax">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (250px) -->
<div class="ds-rows highlight --25-hmax">
  <p>Content</p>
</div>
<!-- Long content (250px) -->
<div class="ds-rows highlight --25-hmax">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
Max height using character (ch) units 
<!-- Short content (30ch) -->
<div class="ds-rows highlight --30-hmax-ch">
  <p>Content</p>
</div>
<!-- Long content (30ch) -->
<div class="ds-rows highlight --30-hmax-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<!-- Short content (30ch) -->
<div class="ds-rows highlight --30-hmax-ch">
  <p>Content</p>
</div>
<!-- Long content (30ch) -->
<div class="ds-rows highlight --30-hmax-ch">
  <p>Content</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nunc neque, tempor porttitor odio pretium eu. Donec sodales lobortis pretium. Morbi suscipit efficitur urna, non volutpat sem aliquam ut. Maecenas risus dolor, cursus nec ligula eu, vulputate ullamcorper nisl. Donec tempus risus et ex sodales, quis vehicula enim aliquet. Integer vulputate ac lectus at scelerisque. In commodo metus laoreet sapien placerat mollis. Nunc varius venenatis metus, non congue velit feugiat sed.</p>
  <p>Nullam a magna augue. Curabitur id dolor vulputate urna consectetur condimentum non nec tortor. Morbi fringilla tellus lorem, sed sollicitudin quam placerat ac. Quisque mi orci, lobortis sit amet consequat in, viverra vitae tellus. Integer non risus dolor. Ut tellus est, ultricies feugiat elit in, tempor malesuada mauris. Morbi felis ipsum, blandit eu massa nec, efficitur mollis augue.</p>
  <p>Aliquam congue urna vitae nisl sollicitudin, sit amet eleifend purus dapibus. Fusce ornare posuere dolor bibendum fringilla. Donec gravida turpis quis turpis congue consectetur. Praesent egestas ornare dictum. Aenean luctus eros quis facilisis varius. Donec gravida dui ac sapien consectetur consectetur. Etiam eros ligula, tempor eget nibh quis, consectetur tincidunt est. Cras at tortor laoreet, porta nisi eu, ornare sapien. Proin sit amet orci lorem. Aliquam in diam facilisis, auctor erat a, imperdiet erat. Mauris eu tristique odio, vel tristique lorem. Praesent bibendum suscipit tristique. Sed sed pulvinar urna. Maecenas faucibus nulla pharetra convallis mollis. Duis finibus imperdiet porttitor.</p>
</div>
Copyright © 2015-2024 Soracom, Inc.
Last page update: August 24, 2023
106b64b8