Components
Alert Dialog
Aspect Ratio
Avatar
Badge
Button
Callout
Card
Checkbox
Checkbox Group
Checkbox Cards
Context Menu
Data List
Dialog
Dropdown Menu
Hover Card
Icon Button
Inset
Popover
Progress
Radio
Radio Group
Radio Cards
Scroll Area
Segmented Control
Select
Separator
Skeleton
Slider
Spinner
Switch
Table
Tabs
Tab Nav
Text Area
Text Field
Tooltip
Components
Inset
Applies a negative margin to allow content to bleed into the surrounding container.
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.
| 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 |
PreviousIcon Button
NextPopover