22-Flow — Content Flow
Prose content styling and automatic spacing between elements.
Prose Styling
The flow layer applies opinionated styling to long-form content containers.
Article Heading
This is prose content. When you apply the .ss-u-prose class, all child elements receive tasteful default styling optimized for reading.
Paragraphs, lists, and other block elements get consistent vertical spacing automatically.
- List items are properly spaced
- Nested content works correctly
- Links are styled for visibility
Blockquotes receive distinctive styling to stand out from body text.
Flow Space
Automatic "lobotomized owl" spacing using the * + * selector.
First element
Auto-spaced
Auto-spaced
Auto-spaced
.ss-flow > * + * {
margin-top: var(--ss-flow-space, 1em);
}Flow Utilities
| Class | Description |
|---|---|
.ss-flow |
Apply flow spacing to children |
.ss-flow-space-sm |
Smaller flow spacing |
.ss-flow-space-lg |
Larger flow spacing |
.ss-u-prose |
Full prose styling |
.ss-u-prose-sm |
Smaller prose variant |
.ss-u-prose-lg |
Larger prose variant |