Position
Use Position to put one element over another instead of beside it. Offsets on the spacing scale hold it a set distance from the edges of its container, and a short stacking scale says which of two overlapping elements is drawn on top.
Available offset sizes and their pixel values
Relative and Absolute
relative marks an element as a container
that positioned children are placed against.
absolute takes a child out of the normal
flow, and the offsets below then measure from that container's edges.
relative
The container the offsets below measure from
absolute
Takes the element out of flow
Offsets
top--, right--,
bottom-- and
left-- each set the distance from one edge, and
inset-- sets all four. The numbers come from the
spacing scale
Spacing
Spacing
Control element spacing with fixed margin and padding values
Utility classes for margin and padding. Fixed steps plus decimal values for the cases where a whole step is too coarse.
, where one step is 4px, so
top--3 is 12px.
There are half steps at the small end, where 0.5, 1.5, 2.5 and 3.5 give 2px, 6px, 10px and 14px, and the
scale runs from 0 to 96, or 384px. Nothing outside those steps is a class, so
top--[Npx] has no effect.
Those pixel values describe a standard device. On one with a larger interface scale the offsets grow with it, the same way padding does Scale Scale Scale interface to affect content density and readability Scale the whole interface from one screen modifier by changing the UI scale factor. Use it to match content density to viewing distance or user preference. .
top--{size}
Distance from the top edge
right--{size}
Distance from the right edge
bottom--{size}
Distance from the bottom edge
left--{size}
Distance from the left edge
inset--{size}
All four edges at once; inset--0 is full bleed
Layers
Where two positioned elements overlap, z--0 through
z--3 say which of them is drawn on top. The scale
ends at 3, so nothing a screen positions can cover the title bar.
z--{0-3}
Which positioned element draws on top
Responsive
Every class on this page takes a prefix for Size Size Size Define exact width and height dimensions for elements Utility classes for width and height. Fixed sizes, arbitrary values, dynamic sizes, and container query units, each also available as a min or max constraint and with responsive variants. , Orientation, or both Responsive Responsive Adapt styles to the device's size class, orientation, and bit depth using variant prefixes The Responsive system adapts a layout to the device it renders on. Size-based breakpoints follow the size class each device carries, and Bit-depth variants follow its color capabilities. Combine them to control how your content appears across TRMNL's range of devices. . Bit-depth prefixes are not part of the set, because these classes place an element rather than paint it.
md:top--{size}
Size-based example
portrait:inset--{size}
Orientation-based example
lg:portrait:left--{size}
Size + Orientation example
Out of Flow
Once an element leaves the flow, three things about it change: what measures its text, what decides its width, and what it needs behind it.
Clamp Clamp Manage text overflow with single and multi-line truncation The Clamp engine truncates text to a specified number of lines using word-based ellipsis. It preserves the original text, measures available width, and re-applies clamping whenever layouts change. , Fit Value Fit Value Automatically resize numbers and values to fit within their containers Fit text to its container by adjusting font size, weight, and line height. Use it where the space available changes between devices, orientations, or view sizes. , Content Limiter Content Limiter Change font size when content overflows to fit within the container Content areas are capped in height by the view type they sit in. Past that threshold the limiter steps typography down and the Clamp engine truncates the first block that still overflows. and Table Overflow Table Overflow Handle table rows overflow When a table has more rows than can fit within the available vertical space, it constrains its height and appends a trailing "and X more" row to indicate the hidden entries. measure elements in normal flow, so they pass a positioned one by. Give it a size, clamp its own text, and read it back on the smallest screen you support.
An element with only left-- or only
right-- is as wide as its contents. Name
both edges and it stretches from one to the other.
An element drawn over other content needs a solid fill:
bg--canvas or
bg--white. Every shade between them is a
dither pattern on a 1-bit screen, and small text over one is hard to read. Draw its edge with
Outline
Outline
Draw a pixel-perfect dotted rounded border on any element
The Outline utility draws a pixel-perfect dotted rounded border on any element. On 1-bit displays it places single-pixel dots at exact integer coordinates with pure CSS gradients; on 2-bit, 4-bit, and full-color displays it draws a standard CSS border with border-radius instead.
rather than a shadow, which ePaper renders as a band of dither.
Card over a full-bleed panel
A panel takes the whole layout here, with one card in its top left corner and another in its bottom right. Each card names a vertical edge and a horizontal edge, and with no second horizontal edge to stretch to, it comes out as wide as its own label.
Position
Card over a panel
<div class="layout layout--col">
<div class="relative stretch w--full bg--gray-45">
<div class="absolute top--3 left--3 z--2 p--2 bg--white outline">
<span class="label label--small">Depot</span>
<span class="value value--xsmall value--tnums">12 min</span>
</div>
<div class="absolute bottom--3 right--3 z--2 p--2 bg--white outline">
<span class="label label--small">Updated 17:04</span>
</div>
</div>
</div>Related Tokens
These tokens are automatically mapped to this page by token prefix.
| Token | 1-bit | 2-bit | Density 2x | 4-bit and up |
|---|---|---|---|---|
--content-scale
|
1 | - | - | - |