Inset

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

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", "object-fit": "cover", "width": "100%", "height": "140px", "background-color": "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
asChildboolean—
sideResponsive<enum>"all"
clipResponsive<"border-box" | "padding-box">"border-box"
pResponsive<"current" | "0">—
pxResponsive<"current" | "0">—
pyResponsive<"current" | "0">—
ptResponsive<"current" | "0">—
prResponsive<"current" | "0">—
pbResponsive<"current" | "0">—
plResponsive<"current" | "0">—