CSS: callout

div[class~="instui-callout"] — Rivillä oleva tietoilmoitus lyhyttä muistutusta tai huomautusta varten.

✅ Käytä Calloutia, kun:

• Sinun täytyy korostaa tärkeää tietoa tai muistutuksia rivissä

• Viesti on melko lyhyt (lauseesta lyhyeen kappaleeseen)

• Varoituksen tulee kiinnittää huomiota ilman, että se keskeyttää päävirran 🚫 Älä käytä Calloutia, kun:

• Viesti vaatii vuorovaikutusta tai useita toimenpiteitä — käytä Modal-ikkunaa tai Alert Dialogia

• Sisältö on sivun pääasiallinen keskipiste — käytä Cardia tai Hero-asettelua sen sijaan

Saavutettavuus

• Varmista, että alert-rooli on oikein asetettu (role="alert" tai role="status")
• Käytä semanttista värikontrastia, joka täyttää WCAG AA -vaatimukset
• Älä luota pelkkään väriin merkityksen välittämisessä

Käyttö

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

Esimerkit

Slotit

Paikka	Kuvaus
message	Ilmoituksen viestin sisältö

Osat

Osa	Kuvaus
.instui-content	Tekstisisällön säiliö.
.instui-icon	Valinnainen kuvake sisällön vasemmalla puolella.

Pseudo-elementit

Pseudo-elementti	Kuvaus
::before	—

Tilat

Tila	Kuvaus
:optional	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--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	—	—

Liittyvät

• alert