Patterns
PinCard
포스터 원래 비율 · 제목 두 줄 · 출처 한 줄의 핀 한 장.
팝업제목만 있는 핀성수동
import { PinCard } from '@coldsurfers/surf-ui/cards'import { IconButton } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <div style={{ columnCount: 2, columnGap: 12, orphans: 1, widows: 1, width: 360 }}> <PinCard meta="ticketlink.co.kr" fallback="MOBO 인디 뮤직 페스티벌" action={ <IconButton label="담기" variant="secondary" shape="pill" size="sm"> ＋ </IconButton> } > <a href="#pin">MOBO 인디 뮤직 페스티벌</a> </PinCard> <PinCard meta="성수동" fallback="팝업"> 제목만 있는 핀 </PinCard> </div> )}시안 v3 v3/PinCard(Figma 1455:263)입니다. 제목에 링크 하나를 넣으면 그 링크가 카드 전체를 덮고,
action(담기 ＋)만 그 위에 뜹니다. action 은 링크 밖 형제라 단추를 넣어도 됩니다.
포스터가 없으면 3:4 회색 자리에 fallback 을 그립니다. 여러 장은 Masonry 로 놓습니다. RN 판은 @coldsurfers/surf-ui/native/PinCard.
Props
Prop
Type
그 밖의 Omit<HTMLAttributes<HTMLDivElement>, 'children'> 속성은 루트 엘리먼트로 그대로 통과한다.