> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.inset

Inset: |
  lambda **props: rx.card(
      rx.inset(
          rx.image(src="https://web.reflex-assets.dev/other/reflex_banner.png", 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",
            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",
            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",
)
```

## API Reference

### rx.inset

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

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. |
| `auto_capitalize` | Literal["off", "none", "on", "sentences", "words", "characters"] | - | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
| `content_editable` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. |
| `context_menu` | str | - | Defines the ID of a <menu> element which will serve as the element's context menu. |
| `dir` | str | - | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
| `draggable` | bool | - | Defines whether the element can be dragged. |
| `enter_key_hint` | Literal["enter", "done", "go", "next", "previous", "search", "send"] | - | Hints what media types the media element is able to play. |
| `hidden` | bool | - | Defines whether the element is hidden. |
| `input_mode` | Literal["none", "text", "tel", "url", "email", "numeric", "decimal", "search"] | - | Defines the type of the element. |
| `item_prop` | str | - | Defines the name of the element for metadata purposes. |
| `lang` | str | - | Defines the language used in the element. |
| `role` | Literal["alert", "alertdialog", "application", "article", "banner", "button", "cell", "checkbox", "columnheader", "combobox", "complementary", "contentinfo", "definition", "dialog", "directory", "document", "feed", "figure", "form", "grid", "gridcell", "group", "heading", "img", "link", "list", "listbox", "listitem", "log", "main", "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox", "menuitemradio", "navigation", "none", "note", "option", "presentation", "progressbar", "radio", "radiogroup", "region", "row", "rowgroup", "rowheader", "scrollbar", "search", "searchbox", "separator", "slider", "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel", "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"] | - | Defines the role of the element. |
| `slot` | str | - | Assigns a slot in a shadow DOM shadow tree to an element. |
| `spell_check` | bool | - | Defines whether the element may be checked for spelling errors. |
| `tab_index` | int | - | Defines the position of the current element in the tabbing order. |
| `title` | str | - | Defines a tooltip for the element. |
| `side` | Literal["x", "y", "top", "bottom", "right", "left"], Breakpoints[str, Literal["x", "y", "top", "bottom", "right", "left"]] | - | The side. |
| `clip` | Literal["border-box", "padding-box"], Breakpoints[str, Literal["border-box", "padding-box"]] | - | How to clip the element's content: "border-box", "padding-box". |
| `p` | int, str, Breakpoints[str, int, str] | - | Padding. |
| `px` | int, str, Breakpoints[str, int, str] | - | Padding on the x axis. |
| `py` | int, str, Breakpoints[str, int, str] | - | Padding on the y axis. |
| `pt` | int, str, Breakpoints[str, int, str] | - | Padding on the top. |
| `pr` | int, str, Breakpoints[str, int, str] | - | Padding on the right. |
| `pb` | int, str, Breakpoints[str, int, str] | - | Padding on the bottom. |
| `pl` | int, str, Breakpoints[str, int, str] | - | Padding on the left. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/