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 max_width="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&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.

Prop	Type	Default	Description
`class`	`string`	`nil`
`clip`	`string`	`"border-box"`
`m`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mb`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`ml`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mr`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mt`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`mx`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`my`	`any`	`—`	Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
`side`	`string`	`"all"`
`style`	`string`	`nil`

class

Type string Default nil

clip

Type string Default "border-box"

m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`

Type any Default —

side

Type string Default "all"

style

Type string Default nil