Patterns
PosterThumb
배지를 얹는 3:4 포스터 한 장.
import { PosterThumb } from '@coldsurfers/surf-ui/cards'M31
P12
찰
import { PosterThumb } from '@coldsurfers/surf-ui/cards'import { StatPill } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 120px)', gap: 10 }}> <PosterThumb cover="M" badge={<StatPill icon="🔥" value="31" tone="hot" />} /> <PosterThumb cover="P" badge={<StatPill icon="🔥" value="12" tone="hot" />} /> <PosterThumb cover="찰" /> </div> )}3:4 · r12 포스터에 왼쪽 아래 배지 하나입니다(Figma 1028:217). 폭을 채우므로 칸 폭은 소비처 그리드가 정합니다.
포스터가 없으면 cover 가 색면 위에 섭니다. 옆에 제목이 있으면 alt 는 비워 둡니다(기본).
Props
Prop
Type
그 밖의 HTMLAttributes<HTMLDivElement> 속성은 루트 엘리먼트로 그대로 통과한다.