인셋

인셋 (Inset)

콘텐츠가 주변 컨테이너로 넘쳐 흐르도록(bleed) 음수 마진을 적용하는 컴포넌트예요. 카드 안 이미지 등을 가장자리까지 확장할 때 사용해요.

출처: 문서

본문

콘텐츠가 주변 컨테이너로 넘쳐 흐르도록 음수 마진을 적용해요.

<Box maxWidth="240px">
  <Card size="2">
    <Inset clip="padding-box" side="top" pb="current">
      <img
        src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
        alt="Bold typography"
        style={{
          display: "block",
          objectFit: "cover",
          width: "100%",
          height: 140,
          backgroundColor: "var(--gray-5)",
        }}
      />
    </Inset>

    <Text as="p" size="3">
      <Strong>Typography</Strong> is the art and technique of arranging type to make written
      language legible, readable and appealing when displayed.
    </Text>
  </Card>
</Box>

API Reference

이 컴포넌트는 div 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
side Responsive<enum> "all"
clip Responsive<"border-box" | "padding-box"> "border-box"
p Responsive<"current" | "0"> No default value
px Responsive<"current" | "0"> No default value
py Responsive<"current" | "0"> No default value
pt Responsive<"current" | "0"> No default value
pr Responsive<"current" | "0"> No default value
pb Responsive<"current" | "0"> No default value
pl Responsive<"current" | "0"> No default value

더 알아보기 (Learn more)