Card

관련 콘텐츠를 그룹화하여 표시하는 유연한 컨테이너 컴포넌트입니다.

카드 제목

카드에 대한 간단한 설명입니다.

카드의 주요 콘텐츠가 여기에 들어갑니다.

설치

사용법

예제

Variant

Outlined

기본 테두리 스타일

가장 기본적인 카드 스타일입니다. 테두리만 있고 그림자나 배경색이 없어 깔끔한 느낌을 줍니다.

일반적인 콘텐츠 그룹화에 적합합니다.

Shadow

그림자 + 테두리

은은한 그림자가 있는 카드입니다. 적당한 깊이감을 표현하여 콘텐츠를 돋보이게 합니다.

중요한 정보를 강조할 때 사용합니다.

Filled

배경색 스타일

배경색이 있는 카드입니다. 부드러운 배경색으로 콘텐츠 영역을 명확히 구분합니다.

섹션 구분이 필요할 때 유용합니다.

Elevated

강조된 그림자

강한 그림자로 강조된 카드입니다. 높은 깊이감으로 시선을 집중시킵니다.

가장 중요한 콘텐츠를 표시할 때 사용합니다.

Semantic Variants

정보

일반 알림

일반적인 정보나 도움말을 제공할 때 사용합니다. 사용자에게 참고 사항을 안내하는데 적합합니다.

예: 시스템 공지, 기능 안내

성공

작업 완료

성공적인 작업 완료를 표시합니다. 긍정적인 결과를 사용자에게 알릴 때 사용합니다.

예: 저장 성공, 전송 완료

경고

주의 필요

주의가 필요한 정보를 표시합니다. 사용자의 주의를 환기시켜야 하는 상황에 사용합니다.

예: 삭제 전 확인, 중요 변경사항

오류

실패 상태

오류나 실패 상태를 표시합니다. 문제가 발생했음을 명확히 전달할 때 사용합니다.

예: 검증 실패, 서버 오류

Padding

Padding: none (0px)

내부 여백이 없어 커스텀 레이아웃에 적합

이미지나 커스텀 콘텐츠를 카드 전체에 배치할 때 사용합니다.

Padding: sm (16px)

작은 여백으로 콤팩트한 디자인

공간이 제한적이거나 여러 카드를 밀집하게 배치할 때 적합합니다.

Padding: md (24px)

표준 여백으로 가장 많이 사용

일반적인 콘텐츠 카드에 적합한 기본 패딩값입니다.

Padding: lg (32px)

넓은 여백으로 여유로운 레이아웃

중요한 콘텐츠를 강조하거나 시각적 여유를 줄 때 사용합니다.

Hoverable

클릭 가능한 카드

이 카드를 클릭하거나 Enter/Space 키를 눌러보세요

카드 전체가 버튼처럼 작동합니다.

Complete Example

데이터 분석

실시간 데이터 시각화 및 분석

대시보드를 통해 비즈니스 지표를 실시간으로 모니터링하고 데이터 기반 의사결정을 내릴 수 있습니다.

차트, 그래프, 테이블 등 다양한 형태로 데이터를 시각화합니다.

보고서 생성

자동화된 보고서 작성 시스템

설정한 주기에 따라 자동으로 보고서를 생성하고 관련자에게 이메일로 발송합니다.

PDF, Excel 등 다양한 형식으로 내보내기가 가능합니다.

팀 협업

실시간 협업 도구 및 커뮤니케이션

팀원들과 실시간으로 소통하고 작업을 공유하며 프로젝트를 효율적으로 관리할 수 있습니다.

채팅, 화상회의, 파일 공유 등 다양한 협업 기능을 제공합니다.

보안 관리

통합 보안 모니터링 시스템

사용자 권한 관리, 접근 로그 추적, 보안 정책 설정 등을 통해 시스템을 안전하게 보호합니다.

2단계 인증, IP 화이트리스트, 암호화 등 다양한 보안 기능을 제공합니다.