Hopp til hovedinnhold

Komponenter

Alert

Alert gir brukeren informasjon som det er ekstra viktig at de ser og forstår. Komponenten er designet for å fange brukernes oppmerksomhet. Teksten i varselet skal være kort og tydelig.

Bruk

Eksempel

Endre varsel

I kode endrer du typen varsel ved å endre data-color. Ikonet er styrt via CSS.

HTML

For HTML bruker du klassenavnet ds-alert og attributtet data-color for å endre type varsel. Les over for når du skal bruke role og aria-live.

Les om role og aria-live på tilgjengeligheitssiden for Alert-komponenten.

CSS variabler og data-attributter

CSS-variabler
NavnVerdi
--dsc-alert-backgroundvar(--ds-color-info-surface-tinted)
--dsc-alert-border-widthvar(--ds-border-width-default)
--dsc-alert-border-stylesolid
--dsc-alert-border-colorvar(--ds-color-info-border-default)
--dsc-alert-border-radiusvar(--ds-border-radius-md)
--dsc-alert-icon-colorvar(--ds-color-info-text-subtle)
--dsc-alert-icon-urlurl("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E")
--dsc-alert-colorvar(--ds-color-info-text-default)
--dsc-alert-spacingvar(--ds-size-2)
--dsc-alert-icon-sizevar(--ds-size-7)
--dsc-alert-padding-blockvar(--ds-size-6)
--dsc-alert-padding-inline-endvar(--ds-size-6)

Ingen relevante data-attributter funnet.

Rediger denne siden på github.com (åpnes i ny fane)