Style Gallery.
Layout레시피

Article Page

Compose readable prose with optional supporting aside content.

이 자료로 구현하기

원문 주소와 버전이 포함된 요청문입니다. 복사한 뒤 만들 화면과 요구사항을 채워 에이전트에게 전달하세요.

FROM PRINCIPLE TO PRACTICE

이 원리로 만든 예제 1

예제를 열어 직접 조작하고, 관찰한 동작을 이 문서의 원리와 비교해 보세요.

원문 가이드 ENGLISH

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.

IA Navigation

Parent: Layout Recipes. Next: Quality Gates for claim checks, or Layout Pattern Catalog when replacing a primitive.

Layout 전체 ↗