Gallery
See what others have created

felixdesbiens
@felixdesbiens
Text views
Design a text-view component for reading long-form content inside a product. Treat the page as a focused reading surface, not a marketing layout. The main job is to make dense copy easy to enter, scan, and continue reading without distraction.
Build a clear type system: article title, section headings, body text, pull quotes, links, captions, and metadata such as author, date, or reading time. Show how spacing, line length, and contrast support readability on desktop and mobile. Include a state for selected text and inline actions such as highlight, copy, or share if they fit the interaction model.
Add reader controls that belong near the content: font size, theme toggle, and line-height or width adjustments. Show loading, empty, and error states, plus a long-content state with sticky section navigation or progress. The component should still read well when text is short, very long, or mixed with links and embedded elements.
What to deliver
- Design a text-view component with title, body, and metadata states.
- Show typographic hierarchy for headings, paragraphs, quotes, and links.
- Include reading controls for font size, line spacing, and theme.
- Add loading, empty, and long-content states.
- Make links, selections, and inline actions visible without breaking flow.
Spruce up your text view design with a 'typography scale'—proportional sizing that maintains harmony and visual hierarchy, guiding the reader's eye smoothly through the content.