Article Page
Compose readable prose with optional supporting aside content.
GitHub에서 원문 보기 ↗새 탭Recommended Pattern Stack
DOM And Source Order
Place the article before supplemental aside content when the article is the primary reading path. Use headings to expose document structure before adding layout classes.
Scroll Ownership
The document owns scrolling. The aside may become sticky, but it should not introduce an independent scroll container unless the aside content is longer than the viewport and has a declared overflow behavior.
Accessibility Expectations
- Focus expectation: Article links and controls follow the article's DOM order before moving to supplemental aside content unless the aside is the active task.
- Scroll expectation: Sticky aside behavior must not cover headings, anchors, or focused links while the document scrolls.
- Cognitive risk: Supplemental content can interrupt reading flow; keep references close to the article section they support.
Responsive Behavior
At narrow widths, aside content should fall into document flow after the related article region. Keep references close to the content they support.
Constraints And Change Points
Make the reading measure explicit through max-inline-size. Use section gaps for major article regions and stack gaps for local prose groups.
When Not To Use
Do not use sticky aside behavior when supplemental content must be read in sequence as part of the main article.
Related Patterns
IA Navigation
Parent: Layout Recipes. Next: Quality Gates for claim checks, or Layout Pattern Catalog when replacing a primitive.