Content
Text Views
Longer, selectable copy — captions, bios, comments — built from the same system type scale as every control, not a document-style stack.
Findings
What's actually in /ig
- No dedicated "article" or document typography scale exists — long-form text reuses the 12/14/16/24px system sizes documented on Typography.
- text-overflow: ellipsis; white-space: nowrap truncation recurs constantly for single-line text views (names, captions, list rows).
- Multi-line copy has no special CSS beyond standard line-height — there is no line-clamp utility class found in /ig.
Usage
When to use it
Use when
Use for multiline text blocks: captions, bios, comment bodies, and other product copy that should expand naturally with content.
Avoid when
Avoid for single-value form entry or navigational labels; use Text Fields for editable input and Labels for compact metadata.
Anatomy
Anatomy
- 01
Text frame
- 02
Primary line(s)
- 03
Secondary/metadata line
- 04
Truncation edge
Specification
Spacing, colour, type, and motion
- Height
- No fixed height — the block expands to its content
- Type scale
- Inherits the system 12/14/16/24px product scale
- Width
- max-width comes from the surrounding layout grid, not the text component
- Single-line overflow
- overflow hidden, text-overflow: ellipsis, white-space: nowrap
- Multi-line overflow
- Scroll or expand; no captured multi-line line-clamp utility
States
States
| State | Behaviour |
|---|---|
| Default | Readable copy sits in the product UI type scale and expands vertically with content. |
| Editing | Editable text shows a cursor and expands with new lines rather than introducing a fixed document box. |
| Overflow | Single-line variants clip with ellipsis; multi-line variants should expose an expand or scroll affordance. |
Examples
Real interface compositions
Feed post
Caption and comment preview
The author name stays on the primary line, the caption starts after it at system-14, and the 'View all 128 comments' label drops to secondary text without introducing a document-style reading scale.
system-14 body, system-12 metadata, --ig-secondary-text, ellipsis truncation
Guidance
Usage guidance
- Reach for the existing 12/14/16/24px system sizes — don't introduce a document-specific type scale for long captions or bios.
- Use text-overflow: ellipsis for single-line truncation; no multi-line clamp pattern was found, so multi-line overflow should scroll or expand, not clamp with a fade.
Do / Don't
Do / Don't
Do
- Set secondary/metadata text to --ig-secondary-text or --ig-tertiary-text, matching the documented hierarchy.
Don’t
- Invent a larger 'reading' type scale — use the product UI scale, while the about-page display sizes remain marketing-only.
Code
Evidence-backed CSS
.text-view__meta {
font-size: var(--system-12-font-size);
line-height: var(--system-12-line-height);
color: rgb(var(--ig-secondary-text));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}See also