Patterns
PickCard
공연 몇 개를 줄로 보여주고 줄마다 행동을 붙이는 패널.
import { PickCard, PickRow } from '@coldsurfers/surf-ui/cards'오늘 저녁
TODAY · 10.0119:30
까치산 단독공연
웨스트브릿지
20:00
인디 쇼케이스 「가을 밤」
클럽 FF
오늘 저녁
TODAY · 10.0119:30
까치산 단독공연
웨스트브릿지
20:00
인디 쇼케이스 「가을 밤」
클럽 FF
import { PickCard, PickRow } from '@coldsurfers/surf-ui/cards'import { RowAction } from '@coldsurfers/surf-ui/primitives'export default function Example() { const card = ( <PickCard title="오늘 저녁" kicker="TODAY · 10.01" footer={<a href="#pick-card">18건 모두 ›</a>} style={{ width: '100%', maxWidth: 420 }} > <PickRow time="19:30" title="까치산 단독공연" meta="웨스트브릿지" action={<RowAction>예매 ↗</RowAction>} /> <PickRow time="20:00" title="인디 쇼케이스 「가을 밤」" meta="클럽 FF" action={<RowAction>예매 ↗</RowAction>} /> </PickCard> ) return ( <> {card} <div data-surface="ink" style={{ padding: 16, borderRadius: 24, background: 'var(--surf-bg-base)' }} > {card} </div> </> )}홈의 오늘 저녁 · 이번 주말 자리입니다(Figma 821:92). 패널 안에 머리 한 줄, 줄 낱장, 꼬리 한 줄이 섭니다.
색은 전부 역할 토큰이라 data-surface="ink" 안에 넣으면 잉크 면이 됩니다 — 위 두 번째 카드가 그 모습입니다.
머리 오른쪽(aside) · 줄 둘째 줄(meta) · 행동(action)은 슬롯입니다. 스웰 미터 · 스웰 태그 같은 앱 부품은
소비처가 넣습니다. 여러 장을 3단으로 놓는 그리드도 소비처 몫입니다.
Props
Prop
Type
그 밖의 Omit<HTMLAttributes<HTMLElement>, 'title'> 속성은 루트 엘리먼트로 그대로 통과한다.
PickRow
Prop
Type
그 밖의 Omit<HTMLAttributes<HTMLDivElement>, 'title'> 속성은 루트 엘리먼트로 그대로 통과한다.