@thumbtack/tp-ui-utility-type v2.4.8

package: '@thumbtack/tp-ui-utility-type' kit: utility/type.yaml platform: scss

url: /api/components/utility/type/scss/

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

Monospace

Text can be in a <span class="tp-text--monospace">monospace</span> font.

Text colors

<div class="tp-color--black">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="tp-color--black-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="tp-color--white">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="tp-color--red">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Text weights

<div class="tp-weight--normal">This is normal weight, equivalent to `font-weight: 400`.</div>

<div class="tp-weight--bold">This is equivalent to `font-weight: 700`.</div>

Text styles

You may want to <span class="tp-text--strike">strike out</span> some text.

You may want to use <span class="tp-text--caps">uppercase</span> in some cases.

Breaking text

<div class="tp-text--truncate">
    When you have a lot of text on a single line you sometimes don’t want it to wrap or run off the
    screen. Nulla mollis sapien diam, in rutrum mauris suscipit in. Praesent ac sapien rhoncus,
    efficitur massa nec, mattis ante. In dictum eget orci sit amet dapibus.
</div>

<div class="tp-text--forcebreak">
    http://www.thumbtack.com/this/is/a/long/path/that/could/go/and/not/break/the/way/you/want/it/to/but/this/class/can/help/make/it/wrap/as/you/may/desire.html
</div>

<span class="tp-text--nowrap">
    In some cases you may want text blocks that don’t wrap the way they normally would. This is
    possible with the `tp-text--nowrap` class. Praesent ac sapien rhoncus, efficitur massa nec,
    mattis ante. In dictum eget orci sit amet dapibus.
</span>

Text alignment

<div class="tp-text--left">I’m on the left.</div>

<div class="tp-text--center">I’m in the middle!</div>

<div class="tp-text--right">Whoa, I’m way over on the right.</div>