Layout

Page Shell

semantic HTML

header, navigation, main, aside, footer를 조합합니다.

stablefreeSince 0.4

Live example

Operations

Overview

All services are operational.

<section data-standard-component="page-shell" class="standard-page-shell"><header><strong>Operations</strong></header><nav><a href="#overview">Overview</a><a href="#jobs">Jobs</a></nav><main id="overview"><h3>Overview</h3><p>All services are operational.</p></main><aside><strong>Queue</strong><p>4 jobs running</p></aside><footer>Last updated just now</footer></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

비어 있는 보조 영역은 landmark에서 제거됩니다. 기본 slot은 main 영역이며 페이지에 중복 main landmark가 생기지 않도록 사용합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->