new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

text

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Text component based on span element

The Text component is based on the span element and supports common margin props.

Text as prop for semantic rendering

The Text component has an as prop that allows rendering as p, label, div, or span. This prop is purely semantic and does not alter visual appearance.

Text size prop values and behavior

The Text component has a size prop with values 1 through 9. The size prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease. Sizes 2–4 are designed for long-form content. Sizes 1–3 are designed for UI labels.

Text weight prop values

The Text component has a weight prop with values: regular, medium, and bold.

Text align prop values

The Text component has an align prop with values: left, center, and right.

Text trim prop for leading space control

The Text component has a trim prop to trim the leading space at the start, end, or both sides of the text box. The prop works similarly to the CSS half-leading control spec but uses a negative margin workaround for cross-browser support. Trim values can be: normal or both. The default trim values are configured via CSS variables: --default-leading-trim-start (0.42em), --default-leading-trim-end (0.36em), --heading-leading-trim-start (0.42em), --heading-leading-trim-end (0.36em).

Text truncate prop for ellipsis

The Text component has a truncate prop that truncates text with an ellipsis when it overflows its container.

Text wrap prop values

The Text component has a wrap prop with values: nowrap, balance, and pretty. The value 'pretty' is experimental and not yet supported in all browsers but can be treated as a progressive enhancement.

Text color prop and contrast

The Text component has a color prop to assign a specific color. Text colors are designed to achieve at least Lc 60 APCA contrast over common background colors.

Text highContrast prop

The Text component has a highContrast prop to increase color contrast with the background.

Text composition with formatting and form controls

The Text component can be composed with formatting components like Link, Em, Code, and Kbd. When composed with form controls like Checkbox, RadioGroup, or Switch, the control automatically centers with the first line of text, even when the text is multi-line.

Text trim usage for card spacing

Trimming the leading is useful when dialing in vertical spacing in cards or other 'boxy' components. Otherwise, padding looks larger on top and bottom than on the sides.

Give your agent this brain