style block accepts. The set is closed, so an unknown key is ignored by every
renderer and is always a typo or a web-ism that would not port. Each entry names the CSS
property it maps to, for when you know the CSS name and not ours.
Generated from
definition-1.2.schema.json and the token files, so it
cannot fall behind what ships.Size
How wide the element is.
How tall the element is.
An upper bound on width. A page-level cap uses a name; an element’s own size stays a step.
A lower bound on width.
A lower bound on height.
An upper bound on height.
How this child shares the space its parent has left.
CSS
flexSpacing
Space inside the element.
Space outside the element.
Space between children.
Layout
What happens to content larger than the box.
CSS
overflowHow the element is placed against its parent.
CSS
positionAll four offsets at once.
0 is the usual overlay.
Offset from the top, when positioned.
Offset from the right, when positioned.
Offset from the bottom, when positioned.
Offset from the left, when positioned.
Which of two overlapping elements draws on top.
CSS
z-indexWhether children run in a row or a column.
CSS
flex-directionWhether children wrap onto another line.
CSS
flex-wrapAlignment across the direction children run in.
CSS
align-itemsAlignment along the direction children run in.
CSS
justify-contentWhether the element takes part in layout at all.
CSS
displayGrid
Turns the element into a grid of this many columns.
CSS
grid-template-columnsHow many of the parent grid’s columns this child covers.
CSS
grid-columnThe width at which a grid gives up and stacks. Measures the grid, never the viewport.
Container
Makes this element the thing its children measure themselves against.
CSS
container-typeHide once the container is narrower than this.
Hide once the container is wider than this.
Surface
Background colour.
CSS
background · takes a color token nameA radial gradient background.
CSS
radial-gradient()All four borders.
CSS
borderThe top border alone.
CSS
border-topThe right border alone.
CSS
border-rightThe bottom border alone.
CSS
border-bottomThe left border alone.
CSS
border-leftA ring drawn outside the border, usually for focus.
CSS
outlineDrop shadow.
CSS
box-shadow · takes a shadow token nameCorner rounding on all four corners.
CSS
border-radius · takes a radius token nameOne corner’s rounding.
CSS
border-top-left-radius · takes a radius token nameOne corner’s rounding.
CSS
border-top-right-radius · takes a radius token nameOne corner’s rounding.
CSS
border-bottom-left-radius · takes a radius token nameOne corner’s rounding.
CSS
border-bottom-right-radius · takes a radius token nameType
A text style, such as
headline.lg.
CSS
font / font-size · takes a text token nameFont weight.
CSS
font-weightLine height.
CSS
line-height · takes a lineHeight token nameText colour.
CSS
color · takes a color token nameText alignment within its box.
CSS
text-alignMedia
How an image fills its box.
CSS
object-fitMotion
A visual transform, such as a scale or a nudge.
CSS
transformWhich property changes are animated, and how fast.
CSS
transitionA named keyframe animation from
semantic/keyframes.yaml.
CSS
animationHow long to wait before the animation starts.
CSS
animation-delayThe pointer shown on hover.
CSS
cursorConditional
A patch of styles applied while the pointer is over the element.
CSS
:hoverA patch applied while the element is being pressed.
CSS
:activeA patch applied while the element is disabled.
CSS
:disabledA list of conditions, each applying its own style patch when it matches.
CSS
(conditional)Next steps
Scales
Every value these keys accept, with what it resolves to.
Styles and tokens
Where the values come from, and how a rebrand works.