CSS: callout ​

div[class~="instui-callout"] — 짧은 알림이나 메모용 인라인 정보 알림입니다.

✅ Callout을 사용할 때:

  • 중요한 정보나 알림을 인라인으로 강조해야 할 때

  • 메시지가 비교적 짧을 때(한 문장에서 짧은 단락)

  • 주요 흐름을 방해하지 않으면서 주의를 환기해야 할 때 🚫 Callout을 사용하지 말아야 할 때:

  • 메시지가 상호작용이나 여러 동작을 필요로 하는 경우 — Modal 또는 Alert Dialog를 사용하세요

  • 콘텐츠가 페이지의 주요 초점인 경우 — 대신 Card나 Hero 레이아웃을 사용하세요

접근성 ​

  • alert 역할이 적절히 적용되었는지 확인하세요 (role="alert" 또는 role="status")
  • 시맨틱 색 대비가 WCAG AA 기준을 충족하도록 사용하세요
  • 의미 전달에 색상만 의존하지 마세요

사용법 ​

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

슬롯 ​

슬롯설명
message알림 메시지 내용

부분 ​

부분설명
.instui-content텍스트 내용을 위한 컨테이너.
.instui-icon내용 왼쪽에 표시되는 선택적 아이콘.

의사 요소 ​

의사 요소설명
::before—

상태 ​

상태설명
:optional—

사용된 토큰 ​

Token타입값
--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——

관련 항목 ​