package: '@thumbtack/tp-ui-utility-sizing' kit: utility/sizing.yaml platform: scss url: /api/components/utility/sizing/scss/

import '@thumbtack/tp-ui-element-table'; import '@thumbtack/tp-ui-utility-background'; import '@thumbtack/tp-ui-utility-sizing'; import { Link } from 'gatsby'; import Alert from './../../../../www/src/components/alert';

Fixed widths

Fixed width utility classes are available in:

• .tp-width--50
• .tp-width--75
• .tp-width--100
• .tp-width--150
• .tp-width--200
• .tp-width--250
• .tp-width--300

<div class="tp-width--200 tp-background--white">200px width box</div>

Fluid widths

Width helper classes are used to set percentage widths on elements, commonly for table columns.

The class variations express the width as a fraction: the dash separates the numerator and denominator.

Some examples:

tp-width--1-3 = width: 33.333% !important;
tp-width--1-6 = width: 16.666% !important;
tp-width--2-5 = width: 40% !important;

Width classes can be expressed with any of the following as the denominator:

• 2
• 3
• 4
• 5
• 6
• 8
• 10
• 12

<table class="tp-table">
    <thead>
        <tr>
            <th class="tp-width--1-3">Name</th>
            <th class="tp-width--1-6">Hometown</th>
            <th class="tp-width--1-6">Status</th>
            <th class="tp-width--1-6">Animal</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stan Smith</td>
            <td>Sarasota</td>
            <td>Single</td>
            <td>Elephant</td>
        </tr>
        <tr>
            <td>Jenny Holtzer</td>
            <td>Bloomington</td>
            <td>Married</td>
            <td>Tiger</td>
        </tr>
    </tbody>
</table>