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

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

Basic display classes

These are the available options:

• tp-display--none
• tp-display--block
• tp-display--inline
• tp-display--inline-block

<div class="tp-display--block">You can change display property for elements.</div>

Responsive display classes

Options are:

| | 0 to Small | Small to Medium | Medium to Large | Large plus | | ------------------------------- | ---------- | --------------- | --------------- | ---------- | | tp-display--none--small | Hidden | Visible | Visible | Visible | | tp-display--none--medium | Visible | Hidden | Visible | Visible | | tp-display--none--large | Visible | Visible | Hidden | Visible | | tp-display--none--large-plus | Visible | Visible | Visible | Hidden | | tp-display--block--small | Visible | Hidden | Hidden | Hidden | | tp-display--block--medium | Hidden | Visible | Hidden | Hidden | | tp-display--block--large | Hidden | Hidden | Visible | Hidden | | tp-display--block--large-plus | Hidden | Hidden | Hidden | Visible |

<div class="tp-display--none--small">
    I’m hidden when the browser width is between `0` and `$tp-breakpoint--small` range.
</div>

Hide only

The primary use case is for server-side rendering where browser width is initially unknown.

| class | small | medium | large | large + | | -------------------- | ------ | ------ | ------ | ------- | | tp-hide--sm | hidden | shown | shown | shown | | tp-hide--sm-md | hidden | hidden | shown | shown | | tp-hide--sm-md-lg | hidden | hidden | hidden | shown | | tp-hide--md-lg-lgp | shown | hidden | hidden | hidden | | tp-hide--lg-lgp | shown | shown | hidden | hidden | | tp-hide--lgp | shown | shown | shown | hidden |

<div class="tp-display--none--small">
    I’m hidden when the browser width is between `0` and `$tp-breakpoint--small` range.
</div>

Faded element

Useful for a simulated disabled state.

<div class="tp-faded">Content inside this element will appear faded.</div>