Nemo
컴포넌트FOX · Card

카드

관련 있는 내용을 한 덩어리로 묶는 네모 면이에요. 그림자 높이로 얼마나 떠 있는지 나타내고, 누를 수 있는 카드는 마우스를 올리면 떠올라요.

그림자 단계

0은 선만 있는 평평한 카드예요. 숫자가 클수록 그림자가 커져서 더 위에 있는 것처럼 보여요. 한 화면에서는 한두 단계만 섞어 써요.

SHADOW
0단계. 평평해요
1단계. 기본이에요
2단계. 조금 떠 있어요
3단계. 가장 위에 있어요
<Card shadow={0}>평평해요</Card>
<Card shadow={1}>기본이에요</Card>
<Card shadow={2}>조금 떠 있어요</Card>
<Card shadow={3}>가장 위에 있어요</Card>

머리말과 꼬리말

제목과 행동은 구분선으로 나눈 머리말과 꼬리말에 둬요. 본문은 가운데에서 내용만 보여 줘요.

HEADER AND FOOTER
이번 달 카드값
1,284,000원
지난달보다 82,000원 적어요
<Card
  header="이번 달 카드값"
  footer={<Button size="sm">내역 보기</Button>}
>
  <p>1,284,000원</p>
</Card>

창 모양 카드

titleBar 속성에 글자를 넣으면 줄무늬 제목 줄이 달린 옛 컴퓨터 창 모양이 돼요. 화면의 중심 내용이나 도구 상자에 써요.

TITLE BAR
MY SPENDING
이번 주 쓴 돈을 한눈에 봐요.
<Card titleBar="MY SPENDING" shadow={2}>
  <p>이번 주 쓴 돈을 한눈에 봐요.</p>
</Card>

누르는 카드

href나 onClick을 주면 누를 수 있는 카드가 돼요. 마우스를 올리면 왼쪽 위로 떠오르고, 누르면 눌려 들어가요. 키보드로 Enter와 Space도 쓸 수 있어요.

CLICKABLE
<Card href="/benefit" header="혜택 모아보기">
  놓친 혜택이 3개 있어요
</Card>

이렇게 써요

받을 포인트
1,200P

이렇게카드 하나에는 한 가지 주제만 담아요.

포인트, 대출, 보험 소식을 한 카드에 모두 담았어요

이렇게 말고여러 주제를 한 카드에 섞으면 무엇을 누르라는 건지 알기 어려워요.

속성

속성값기본값설명
shadow0 | 1 | 2 | 31그림자 단계. 0은 선만 있다
headerReactNode없음위쪽 구분 영역
footerReactNode없음아래쪽 구분 영역
titleBarstring없음줄무늬 제목 줄. 창 모양 카드가 된다
padding"md" | "none"md본문 안쪽 여백. none은 이미지나 목록을 꽉 채울 때
hrefstring없음링크 카드. a 태그로 그려진다
onClick() => void없음누르는 카드. 버튼 역할이 붙고 Enter, Space로도 동작한다