@thumbtack/tp-ui-utility-layout NPM

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>

@thumbtack/thumbprint-tokens @thumbtack/tp-ui-core-function @thumbtack/tp-ui-core-mixin

@everything-registry/sub-chunk-917 @zalastax/nolb-_thu

1.3.5

5 years ago

1.3.4

5 years ago