CSS: callout

div[class~="instui-callout"] — Ahu whakamōhio whakauru mō te whakamaharatanga poto, mō te tuhipoka.

✅ Whakamahia te Callout ina:

• Me whakaahua koe i ngā mōhiohio nui, ngā whakamaharatanga rānei i roto i te tuhinga

• He poto te karere (he rerenga kōrero, he parakaraka poto rānei)

• Me akiaki te whakamōhio i te aro atu, kaua e aukati i te rere o te ihirangi matua 🚫 Kaua e whakamahi i te Callout ina:

• Me whakawhitiwhiti, me mahi-rua ngā mahi — whakamahia he Modal, he Alert Dialog rānei

• Ko te ihirangi te pokapū matua o te whārangi — whakamahia he Card, he Hero layout rānei

Wātea mō te katoa

• Ensure the alert role is properly applied (role="alert" or role="status")
• Whakamahia ngā tae mōhio ā-tūturu me te rerekētanga e tutuki ana i ngā paerewa WCAG AA
• Kaua e whakawhirinaki ki te tae anake ki te tuku i te tikanga

Ngā Whakamahi

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

Wāhi

Wāhi	Whakamārama
message	Ihirangi karere whakamōhio

Wāhanga

Wāhanga	Whakamārama
.instui-content	Ipu mō te ihirangi kuputuhi.
.instui-icon	He tohu kōwhiringa kei te taha mauī o te ihirangi.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::before	—

Ngā āhuatanga

Tūnga	Whakamārama
:optional	—

Ngā tohu i whakamahia

Token	Momo	Uara
--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	—	—

Hono

• alert