Layout
Card
semantic HTML관련 콘텐츠와 작업을 하나의 표면에 묶습니다.
Live example
Card
표준 HTML 영역을 조합한 화면 패턴입니다.
<section data-ui="surface"><header><h3>Card</h3><p>표준 HTML 영역을 조합한 화면 패턴입니다.</p></header><div data-ui="stack"><button type="button">주요 작업</button><a href="/">상세 보기</a></div></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.1 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
Native HTML semantics and keyboard behavior are the baseline.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->