ONE SOURCE
Same intent, every target
start, center, end, and justify preserve the authored meaning without target-specific syntax.
DISPLAY / TYPOGRAPHY
Text and Title
Use one text contract for readable copy and headings. Alignment is logical and portable across web, iOS, and Android.
ONE SOURCE
Same intent, every target
start, center, end, and justify preserve the authored meaning without target-specific syntax.
ALIGNMENT
Align the text, not the container
align belongs to Text and Title. It is independent from Flex or Grid alignment, and start/end follow the writing direction of each target.
EXPLICIT LINE BREAK
Full-stack development, from one codebase
Use a multiline string for an intentional break. Keep maxW alone when natural wrapping is acceptable.
start keeps the copy on the logical leading edge.
center creates a centered reading measure.
end follows the logical trailing edge.
justify distributes space across lines with native target support.
Title size:"xl" align:"center"
"Centered heading"
Text size:"lg" align:"justify"
"A paragraph can use the same logical contract on web, iOS, and Android."FLUID SIZE
A scalar size is already responsive
The shared typography scale lowers a scalar size through fluid metrics on every target. Use size:"lg" directly; do not add a breakpoint object only to make it responsive.
RECOMMENDED
Fluid by default
The same declaration adapts between compact and wide viewports.
EXPLICIT OVERRIDE
Choose breakpoints deliberately
Use an object only when the design intentionally changes at named breakpoints.
Text size:"lg"
"Fluid body copy"
Title size:"xl"
"Fluid heading"
Text size:{ xs:"md" lg:"xl" }
"Intentional breakpoint override"API
Text and Title props
Both components accept the same typography and common style surface. RichText remains a separate marked-text contract and does not accept align.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||