Skip to main content

Card

MSK Card는 콘텐츠를 묶는 CSS 전용 레이아웃 컨테이너 primitive입니다. header / title / description / body / footer 슬롯을 선택적으로 사용합니다.

Preview

프로젝트 설정

팀과 권한을 관리합니다.

본문 영역입니다. 어떤 콘텐츠든 담을 수 있습니다.

Data API

<div class="msk-ui-card">
<div class="msk-ui-card__header">
<h3 class="msk-ui-card__title">제목</h3>
<p class="msk-ui-card__description">부가 설명</p>
</div>
<div class="msk-ui-card__body">본문 내용</div>
<div class="msk-ui-card__footer">
<button>확인</button>
</div>
</div>

슬롯

  • __header / __title / __description
  • __body
  • __footer (우측 정렬 액션 영역)