Media

Avatar

semantic HTML

사람이나 대상을 이미지, 글자, 아이콘으로 나타냅니다.

stablefreeSince 0.1

Live example

Ada LovelaceOwner · Content workspace

<figure class="avatar-card" data-avatar-card><span class="avatar-initials" role="img" aria-label="Ada Lovelace profile photo">AL</span><figcaption><strong>Ada Lovelace</strong><small>Owner · Content workspace</small></figcaption></figure>

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. -->