CSS: banner

.instui-banner · alpha — 페이지 수준 또는 문맥 내 공지를 위한 닫을 수 있는 아이콘 메시지 표면입니다.

크기는 패딩과 간격을 제어합니다: relaxed(기본)는 여유가 있고; compact은 둘 다를 더 좁힙니다. 색상은 배경을 설정합니다: bare(수정자 없음)는 채워지지 않음 — 테두리와 아이콘만 보입니다; -color-violet 및 -color-sea은 색조가 있는 배경과 일치하는 아이콘 스와치를 추가합니다.

접근성

보조 기술이 배너를 알리도록 role="status"(또는 긴급 메시지에는 role="alert")을 추가하세요; 장식용 아이콘은 aria-hidden="true"로 표시하고 닫기 버튼에는 aria-label을 부여하세요.

사용법

@import "@pantoken/plugin-custom-components/custom-components.css";

css

@import "@pantoken/plugin-custom-components/custom-components.css";

예제들

html

<div class="instui-banner -icon-canvas-icon-reversed" role="status">
  <h2 class="instui-heading">새 기능</h2>
  <span class="instui-text">이것은 사용자 지정 아이콘이 있는 보라색 배너입니다.</span>
  <div class="button-group">
    <button class="instui-button">취소</button>
    <button class="instui-button">확인</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

구조

text

.instui-banner
  heading (component, 0..1)
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)

flowchart TD n0[".instui-banner"]:::cssdoc-root n1(["heading"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot subgraph sg3 subgraph sg4 ["bare-button"] n5["@component button (0..1)"]:::cssdoc-root end subgraph sg6 ["button-group"] n7[".button-group"]:::cssdoc-root n8(["button"]):::cssdoc-component end end n9(["close-button"]):::cssdoc-component n0 -.->|0..1| n1 n0 --> n2 n7 -->|1..2| n8 n0 --> sg3 n0 -.->|0..1| n9 click n1 "/api/css/heading.md" click n8 "/api/css/button.md" click n9 "/api/css/close-button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

수정자

수정자	설명
`.-color-sea`	바다색 톤의 배경 및 아이콘 스와치.
`.-color-violet`	보라색 톤의 배경 및 아이콘 스와치.
`.-icon-*`	기본 `info` 글리프를 공유 아이콘 세트의 아이콘(예: `-icon-megaphone`)으로 교체하세요.
`.-size-compact`	더 촘촘한 패딩과 간격.
`.-size-md`	Alias — maps to `.-size-relaxed`.
`.-size-relaxed`	더 넉넉한 패딩과 간격(기본).
`.-size-sm`	Alias — maps to `.-size-compact`.

부분

부분	설명
`.button-group`	인용문과 출처를 담는 컨테이너.

의사 요소

의사 요소	설명
`::after`	—
`::before`	—

상태

상태	설명
`[aria-disabled="true"]`	—
`:disabled`	—

사용된 토큰

Token	타입	값
`--instui-color-background-interactive-action-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-background-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-background-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-stroke-interactive-action-primary-active`	`<color>`	LightDark`light-dark(#061C30, #D5E2F6)`
`--instui-color-stroke-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-color-stroke-interactive-action-primary-hover`	`<color>`	LightDark`light-dark(#234465, #ffffff)`
`--instui-color-text-interactive-action-primary-base`	`<color>`	LightDark`light-dark(#ffffff, #1D354F)`
`--instui-component-banner-border-color`	—	`color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 10%, transparent)`
`--instui-component-banner-border-radius`	`<length>`	`1rem`
`--instui-component-banner-border-style`	—	`solid`
`--instui-component-banner-border-width`	`<length>`	`0.0625rem`
`--instui-component-banner-close-button-margin-right`	`<length>`	`0.5rem`
`--instui-component-banner-close-button-margin-top`	`<length>`	`0.5rem`
`--instui-component-banner-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-banner-compact-content-gap-horizontal`	`<length>`	`0.5rem`
`--instui-component-banner-compact-icon-border-radius`	`<length>`	`0.5rem`
`--instui-component-banner-compact-padding-horizontal`	`<length>`	`0.75rem`
`--instui-component-banner-compact-padding-vertical`	`<length>`	`0.75rem`
`--instui-component-banner-content-gap-vertical`	`<length>`	`0.5rem`
`--instui-component-banner-icon-color`	`<color>`	`#ffffff`
`--instui-component-banner-relaxed-content-gap-horizontal`	`<length>`	`1rem`
`--instui-component-banner-relaxed-icon-border-radius`	`<length>`	`0.75rem`
`--instui-component-banner-relaxed-padding-horizontal`	`<length>`	`1.5rem`
`--instui-component-banner-relaxed-padding-vertical`	`<length>`	`1.5rem`
`--instui-component-banner-sea-background`	`<color>`	LightDark`light-dark(#CFF0F6, #00424A)`
`--instui-component-banner-sea-icon-background`	`<color>`	`#00828E`
`--instui-component-banner-violet-background`	`<color>`	LightDark`light-dark(#F3E5F7, #522965)`
`--instui-component-banner-violet-icon-background`	`<color>`	`#9E58BD`
`--instui-component-base-button-medium-height`	`<length>`	`2.5rem`
`--instui-component-base-button-primary-disabled-background-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-primary-disabled-text-color`	`<color>`	LightDark`light-dark(#F2F4F5, #273540)`
`--instui-component-base-button-primary-ghost-active-background`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)`
`--instui-component-base-button-primary-ghost-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)`
`--instui-component-base-button-primary-ghost-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-primary-ghost-hover-background`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)`
`--instui-component-base-button-small-font-size`	`<length>`	`0.875rem`
`--instui-component-base-button-small-height`	`<length>`	`2rem`
`--instui-component-base-button-small-padding-horizontal`	`<length>`	`0.75rem`
`--instui-component-base-button-tertiary-active-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)`
`--instui-component-base-button-tertiary-active-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-base-button-tertiary-disabled-border-color`	`<color>`	LightDark`light-dark(#C7CACD, #4A5B68)`
`--instui-component-base-button-tertiary-disabled-text-color`	`<color>`	LightDark`light-dark(#AAB0B5, #4A5B68)`
`--instui-component-base-button-tertiary-hover-border-color`	—	`color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)`
`--instui-component-base-button-tertiary-hover-text-color`	`<color>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-heading-title-card-mini-font-size`	`<length>`	`1rem`
`--instui-component-heading-title-card-mini-font-weight`	`<integer>`	`700`
`--instui-component-heading-title-card-regular-font-size`	`<length>`	`1.25rem`
`--instui-component-heading-title-card-regular-font-weight`	`<integer>`	`700`
`--instui-component-shared-tokens-spacing-gap-buttons`	`<length>`	`0.75rem`
`--instui-component-text-content-font-size`	`<length>`	`1rem`
`--instui-component-text-content-font-weight`	`<integer>`	`400`
`--instui-component-text-content-line-height`	`<percentage>`	`150%`
`--instui-component-text-content-small-font-size`	`<length>`	`0.875rem`
`--instui-component-text-content-small-font-weight`	`<integer>`	`400`
`--instui-component-text-content-small-line-height`	`<percentage>`	`150%`
`--instui-font-size-text-base`	`<length>`	`1rem`
`--instui-icon-megaphone`	`<image>`	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E')
`--instui-line-height-standalone-text-base`	`<length>`	`1rem`
`--pantoken-banner-close-button-reserve`	`<length>`	`0rem`
`--pantoken-banner-glyph`	`<url>`	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E')
`--pantoken-banner-icon-background`	`<color>`	`#9E58BD`
`--pantoken-banner-icon-inset-block-start`	`<length>`	`1.5rem`
`--pantoken-banner-icon-inset-inline-start`	`<length>`	`1.5rem`
`--pantoken-banner-icon-size`	`<length>`	`2rem`
`--pantoken-glyph`	`<url>`	`url("data:image/svg+xml`

컴포넌트

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

유틸리티

규칙

선언

Plugins

layout

CSS: banner

접근성

사용법

예제들

구조

수정자

부분

의사 요소

상태

사용된 토큰

하위 컴포넌트

관련 항목

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

segmented-control

side-nav-bar

table

tabs

CSS: banner ​

접근성 ​

사용법 ​

예제들 ​

구조 ​

수정자 ​

부분 ​

의사 요소 ​

상태 ​

사용된 토큰 ​

하위 컴포넌트 ​

관련 항목 ​

CSS: banner

접근성

사용법

예제들

구조

수정자

부분

의사 요소

상태

사용된 토큰

하위 컴포넌트

관련 항목