CSS: callout ​

div[class~="instui-callout"] — Inláinna informašuvnna-alertta guovtti ráhkkaseamis dahje merkebeaivvi.

✅ Geavaha Callout gos:

  • Don váldit geopmemeha bivddit ovtta informašuvnna dahje merkebeaivvi

  • Gávdno lea eanet geavahit (jahki-ovtta buoremus dahje nuppi páragrahvvon)

  • Alertta galggašii riŋget eará čuohppat mainna fástumiin 🚫 Aldágege geavaha Callout gos:

  • Messažža galggašii olla vuoigŋašvvai dahje muitalus leat váldit — geavaha Modal dahje Alert Dialog

  • Inhalt lea sivvuid fástu — geavaha Card dahje Hero-layout sijá

Accessibility ​

  • Vahkkugeat alertta role vuođđudit buorret (role="alert" dahje role="status")
  • Geavaha semantala fárbba kontrastta mii máhttu WCAG AA standaide
  • Aldágege bargat doarjut fárbba davvisámegillii maid hálddašet merkebevnnas

Buktáhašvuohta ​

css
@import "@pantoken/plugin-layouts/layouts.css";

Exempla ​

Slottat ​

SlottDescription
messageAlertta messažža sisältto

Dála ​

DálaDescription
.instui-contentKontehnára textta sisälttojuvvon.
.instui-iconVáldánas ikona oarbbis sisälttojuvvon.

Pseudo-elementtat ​

Pseudo-elementDescription
::before—

Stáhtat ​

StateDescription
:optional—

Tokenat gaskkalit ​

TokenTypeVaššun
--instui-color-info-background——
--instui-color-info-border——
--instui-color-info-text——
--instui-radius-medium——
--instui-size-small<length>—
--instui-space-medium——
--instui-space-small——

Dálkkodat ​