Media

QR Code

semantic HTML

짧은 텍스트를 스캔 가능한 코드로 표시합니다.

stablefreeSince 0.4

Live example

QR value: chois-ui.dev

<figure data-standard-component="qr-code" data-qr-value="chois-ui.dev"><div class="standard-qr" role="img" aria-label="QR code: chois-ui.dev" data-qr-output></div><figcaption>QR value: chois-ui.dev</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.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

인코딩 값이 포함된 이미지 이름을 제공하고 빈 값이나 인코딩 오류를 data-error로 노출합니다.

Server template guidance

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