v1.3.0

Text Row

A horizontal layout primitive — text with optional slots on both sides. Used inside Cell, Card, and any component that needs a row with text.

-- -- -- --

Standard

Pickup location

Expanded

Pickup location

Overview

TextRow is a horizontal layout primitive. It wraps a text node and up to 4 optional icon slots. It does not define its own typography or color — those are set by the parent component.

1
Standard mode — text only, all slots hidden
2
Expanded mode — up to 4 slots around the text (before-1, before-2, after-1, after-2)

Standard — text only

Pickup location

Expanded — with slots

Pickup location

Anatomy

TextRow is a flex row: optional slots on both sides wrap a fill-width text node.

Pickup location

Slots
2
slot-start-1/2 Optional. Left side. Hug. Visible in expanded mode only.
3
text Required. Fill width. Truncates with ellipsis by default.
4
slot-end-1/2 Optional. Right side. Hug. Visible in expanded mode only. Hidden when multiline is on.

Layout

Multiline off — 4 slots

Pickup location near the station

Multiline on — end slots hidden

Pickup location near the main railway station

General
1
direction horizontal flex row
2
width fill, determined by parent
3
height hug content
4
align-v center
5
s4 gap between all elements
Expanded ON
1
multiline: off Default. Single line. Text truncates with ellipsis. slot-start/end-1/2 can be displayed.
2
multiline: on Text wraps. slot-end-1 and slot-end-2 are hidden.
Standard ON
1
multiline: off Default. Single line. Text truncates with ellipsis.
2
multiline: on Text wraps. No slots.

Usage

TextRow is always used inside a parent component. It inherits typography and color from the parent — never sets them itself.

1
Cell › start-text top-row (title), middle-row (subtitle), bottom-row (additional)
2
If no side slots are needed use a typography token directly

1 Do

Pickup location near the main railway station downtown

2 Don't