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:
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:
Percentage based
The following percentage based units are supported:
The available percentage increments are: 1-100
For example:
Character based
The following character based units are supported:
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:
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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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.
html
Copy
<!-- 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.
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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
html
Copy
<!-- 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>