---
components:
  - rx.inset

Inset: |
  lambda **props: rx.card(
      rx.inset(
          rx.image(src="https://web.reflex-assets.dev/other/reflex_banner.png", alt='Reflex banner image', height="auto"),
          **props,
      ),
      width="500px",
  )
---

```python exec
import reflex as rx
```

# Inset

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

## Basic Example

Nesting an Inset component inside a Card will render the content from edge to edge of the card.

```python demo
rx.card(
    rx.inset(
        rx.image(
            src="https://web.reflex-assets.dev/other/reflex_banner.png",
            alt="Reflex banner image",
            width="100%",
            height="auto",
        ),
        side="top",
        pb="current",
    ),
    rx.text(
        "Reflex is a web framework that allows developers to build their app in pure Python."
    ),
    width="25vw",
)
```

## Other Directions

The `side` prop controls which side the negative margin is applied to. When using a specific side,
it is helpful to set the padding for the opposite side to `current` to retain the same padding the
content would have had if it went to the edge of the parent component.

```python demo
rx.card(
    rx.text("The inset below uses a bottom side."),
    rx.inset(
        rx.image(
            src="https://web.reflex-assets.dev/other/reflex_banner.png",
            alt="Reflex banner image",
            width="100%",
            height="auto",
        ),
        side="bottom",
        pt="current",
    ),
    width="25vw",
)
```

```python demo
rx.card(
    rx.flex(
        rx.text(
            "This inset uses a right side, which requires a flex with direction row."
        ),
        rx.inset(
            rx.box(
                background="center/cover url('https://web.reflex-assets.dev/other/reflex_banner.png')",
                height="100%",
            ),
            width="100%",
            side="right",
            pl="current",
        ),
        direction="row",
        width="100%",
    ),
    width="25vw",
)
```

```python demo
rx.card(
    rx.flex(
        rx.inset(
            rx.box(
                background="center/cover url('https://web.reflex-assets.dev/other/reflex_banner.png')",
                height="100%",
            ),
            width="100%",
            side="left",
            pr="current",
        ),
        rx.text(
            "This inset uses a left side, which also requires a flex with direction row."
        ),
        direction="row",
        width="100%",
    ),
    width="25vw",
)
```
