Inset

Applies a negative margin to allow content to bleed into the surrounding container.

Bold typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

<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

This component is based on the div element and supports common margin props.

PropTypeDefault
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
PreviousIcon Button