컴포넌트
컴포넌트
시스템 · 테마 설정 · 컴포넌트
버튼
.btn 기본 클래스에 modifier를 조합해 사용합니다.
기본 / Primary
.btn.btn .btn-p.btn .btn-ghost
크기 변형
.btn.btn .btn-s.btn .btn-xs
헤더 버튼 (.mh-btn-*)
.mh-btn-outline.mh-btn-sub.mh-btn-primary
배지
.bdg 기본 클래스에 색상 modifier를 조합합니다.
활성오류경고비활성정보
.bdg .bdg-ok.bdg .bdg-err.bdg .bdg-warn.bdg .bdg-muted.bdg .bdg-ac
카드 · KPI
기본 컨테이너와 지표 표시 컴포넌트입니다.
카드 (.card)
카드 제목
기본 카드 컴포넌트입니다. hover 시 border와 shadow가 강조됩니다.
아이콘 카드
아이콘과 함께 사용하는 카드 예시입니다.
KPI 카드 (.kpi)
총 이용자
12,480
전월 대비 +5.2%
활성 시설
8
운영중
월 수납액
₩4.2M
목표 대비 92%
미처리 민원
23
긴급 3건 포함
.kpi.kpi-l.kpi-v.kpi-s
탭
필 형태의 탭 컴포넌트입니다. (.tabs / .tab)
선택된 탭: 전체
.tabs.tab.tab.a (활성)
입력 필드
텍스트 입력 컴포넌트입니다. (.inp)
기본 입력
검색 입력
그리드 레이아웃
.grid-2 / .grid-3 / .grid-4 / .grid-cards
2 컬럼 .grid .grid-2
Col 1
Col 2
3 컬럼 .grid .grid-3
Col 1
Col 2
Col 3
4 컬럼 .grid .grid-4
Col 1
Col 2
Col 3
Col 4
반응형 자동 .grid .grid-cards
카드 A
카드 B
카드 C
유틸리티
공통으로 사용되는 유틸리티 클래스입니다.
섹션 제목 .section-title
섹션 제목 예시
섹션 제목 아래에 오는 콘텐츠 영역
구분선 .sep
구분선 위 콘텐츠
구분선 아래 콘텐츠
Flex Row .fc
아이템 1아이템 2아이템 3
CSS 변수 팔레트
테마에서 사용되는 주요 디자인 토큰입니다.
--bg0
최외곽 배경
--bg1
카드/패널 배경
--bg2
서브 배경
--bd
기본 보더
--t1
주 텍스트
--t2
보조 텍스트
--t3
약한 텍스트
--ac
액센트 컬러
--ac2
액센트 보조
--ok
성공/활성
--err
오류
--warn
경고