# Inset

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

```jsx
<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](/themes/docs/overview/layout#margin-props).

| Prop                                                                                                                                                                   | Type                                        | Default        |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------------- |
| `asChild`Render one explicit target with merged props and behavior, not a cloned child. Read our [Composition](/primitives/docs/guides/composition) guide for details. | `boolean`                                   | —              |
| `side`                                                                                                                                                                 | `Responsive<enum>`                          | `"all"`        |
| `clip`                                                                                                                                                                 | `Responsive<"border-box" \| "padding-box">` | `"border-box"` |
| `p`                                                                                                                                                                    | `Responsive<"current" \| "0">`              | —              |
| `px`                                                                                                                                                                   | `Responsive<"current" \| "0">`              | —              |
| `py`                                                                                                                                                                   | `Responsive<"current" \| "0">`              | —              |
| `pt`                                                                                                                                                                   | `Responsive<"current" \| "0">`              | —              |
| `pr`                                                                                                                                                                   | `Responsive<"current" \| "0">`              | —              |
| `pb`                                                                                                                                                                   | `Responsive<"current" \| "0">`              | —              |
| `pl`                                                                                                                                                                   | `Responsive<"current" \| "0">`              | —              |