This is the Standard reference for layouts.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
display
Interactive example.
Prefixes: d. Example: d:block. It emits display:block;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (31)
block, inline, inline-block, inline-flex, inline-grid, inline-table, flex, grid, table, table-caption, table-cell, table-column,
table-column-group, table-footer-group, table-header-group, table-row, table-row-group, flow, flow-root, ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container,
list-item, contents, none, run-in, math, [inline_flow-root], $display
visibility
Interactive example.
Prefixes: vis. Example: vis:visible. It emits visibility:visible;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (3)
visible, hidden, collapse
position
Interactive example.
Prefixes: pos. Example: pos:static. It emits position:static;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
static, fixed, absolute, relative, sticky
box-sizing
Interactive example.
Prefixes: box-sizing. Example: box-sizing:border-box. It emits box-sizing:border-box;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (2)
border-box, content-box
float
Interactive example.
Prefixes: float. Example: float:left. It emits float:left;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
left, right, inline-start, inline-end, none
clear
Interactive example.
Prefixes: clear. Example: clear:left. It emits clear:left;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (6)
left, right, both, inline-start, inline-end, none
z-index
Interactive example.
Prefixes: z-index. Example: z-index:auto. It emits z-index:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (9)
auto, 1, 10, 100, -1, 5, -5, [5], $layer
anchor-name
Interactive example.
Prefixes: anchor-name. Example: anchor-name:none. It emits anchor-name:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, --anchor, --tooltip, [--anchor,_--tooltip], $anchor
anchor-scope
Interactive example.
Prefixes: anchor-scope. Example: anchor-scope:none. It emits anchor-scope:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
none, all, --anchor, [--anchor,_--tooltip], $scope
position-anchor
Interactive example.
Prefixes: position-anchor. Example: position-anchor:normal. It emits position-anchor:normal;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (7)
normal, none, auto, match-parent, --anchor, --tooltip, $anchor
position-area
Interactive example.
Prefixes: position-area. Example: position-area:center. It emits position-area:center;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (54)
center, top, bottom, left, right, span-top, span-bottom, span-left, span-right, start, end, self-start,
self-end, span-start, span-end, span-self-start, span-self-end, span-all, x-start, x-end, span-x-start, span-x-end, self-x-start, self-x-end,
span-self-x-start, span-self-x-end, y-start, y-end, span-y-start, span-y-end, self-y-start, self-y-end, span-self-y-start, span-self-y-end, block-start, block-end,
span-block-start, span-block-end, self-block-start, self-block-end, span-self-block-start, span-self-block-end, inline-start, inline-end, span-inline-start, span-inline-end, self-inline-start, self-inline-end,
span-self-inline-start, span-self-inline-end, none, [top_left], [bottom_right], $area
position-visibility
Interactive example.
Prefixes: position-vis. Example: position-vis:always. It emits position-visibility:always;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (8)
always, anchor-valid, anchor-visible, anchors-valid, anchors-visible, no-overflow, [anchor-valid_no-overflow], $visibility
position-try
Interactive example.
Prefixes: position-try. Example: position-try:none. It emits position-try:none;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (60)
none, flip-block, flip-inline, flip-start, flip-x, flip-y, center, top, bottom, left, right, span-top,
span-bottom, span-left, span-right, start, end, self-start, self-end, span-start, span-end, span-self-start, span-self-end, span-all,
x-start, x-end, span-x-start, span-x-end, self-x-start, self-x-end, span-self-x-start, span-self-x-end, y-start, y-end, span-y-start, span-y-end,
self-y-start, self-y-end, span-self-y-start, span-self-y-end, block-start, block-end, span-block-start, span-block-end, self-block-start, self-block-end, span-self-block-start, span-self-block-end,
inline-start, inline-end, span-inline-start, span-inline-end, self-inline-start, self-inline-end, span-self-inline-start, span-self-inline-end, --fallback, [most-height_flip-block], [most-width_flip-inline,_--fallback], $try