<.box
width="100%"
py="8"
style="background-color: var(--gray-a2); border-radius: var(--radius-3);"
>
<.section><.decoration_box height="64px" width="100%" /></.section>
</.box>API Reference
This component is based on the section element and supports common margin props.
| Prop | Type | Default | Description |
|---|---|---|---|
as_child
|
boolean
|
false
|
Composes the component into its immediate child instead of rendering its own HTML element. |
bottom
|
string
|
—
|
CSS bottom property. Accepts scale values, CSS strings, responsive. |
class
|
string
|
nil
|
Additional CSS classes |
flex_basis
|
string
|
—
|
CSS flex-basis property. Responsive supported. |
flex_grow
|
string
|
—
|
CSS flex-grow property. Responsive supported. |
flex_shrink
|
string
|
—
|
CSS flex-shrink property. Responsive supported. |
grid_area
|
string
|
—
|
CSS grid-area property. Responsive supported. |
grid_column
|
string
|
—
|
CSS grid-column property. Responsive supported. |
grid_column_end
|
string
|
—
|
CSS grid-column-end property. Responsive supported. |
grid_column_start
|
string
|
—
|
CSS grid-column-start property. Responsive supported. |
grid_row
|
string
|
—
|
CSS grid-row property. Responsive supported. |
grid_row_end
|
string
|
—
|
CSS grid-row-end property. Responsive supported. |
grid_row_start
|
string
|
—
|
CSS grid-row-start property. Responsive supported. |
height
|
any
|
—
|
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
inset
|
string
|
—
|
CSS inset property. Accepts scale values, CSS strings, responsive. |
left
|
string
|
—
|
CSS left property. Accepts scale values, CSS strings, responsive. |
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
max_height
|
any
|
—
|
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
max_width
|
any
|
—
|
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
min_height
|
any
|
—
|
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_width
|
any
|
—
|
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
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'}` |
overflow
|
string
|
—
|
CSS overflow property. Responsive supported. |
overflow_x
|
string
|
—
|
CSS overflow-x property. Responsive supported. |
overflow_y
|
string
|
—
|
CSS overflow-y property. Responsive supported. |
p
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pb
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pl
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
position
|
string
|
—
|
CSS position property. Responsive supported. |
pr
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pt
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
px
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
py
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
right
|
string
|
—
|
CSS right property. Accepts scale values, CSS strings, responsive. |
style
|
string
|
nil
|
Additional inline styles |
top
|
string
|
—
|
CSS top property. Accepts scale values, CSS strings, responsive. |
width
|
any
|
—
|
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
as_child
Composes the component into its immediate child instead of rendering its own HTML element.
Type
boolean
Default
false
bottom
CSS bottom property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
class
Additional CSS classes
Type
string
Default
nil
flex_basis
CSS flex-basis property. Responsive supported.
Type
string
Default
—
flex_grow
CSS flex-grow property. Responsive supported.
Type
string
Default
—
flex_shrink
CSS flex-shrink property. Responsive supported.
Type
string
Default
—
grid_area
CSS grid-area property. Responsive supported.
Type
string
Default
—
grid_column
CSS grid-column property. Responsive supported.
Type
string
Default
—
grid_column_end
CSS grid-column-end property. Responsive supported.
Type
string
Default
—
grid_column_start
CSS grid-column-start property. Responsive supported.
Type
string
Default
—
grid_row
CSS grid-row property. Responsive supported.
Type
string
Default
—
grid_row_end
CSS grid-row-end property. Responsive supported.
Type
string
Default
—
grid_row_start
CSS grid-row-start property. Responsive supported.
Type
string
Default
—
height
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
inset
CSS inset property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
left
CSS left property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
max_height
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
max_width
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
min_height
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_width
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
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
—
overflow
CSS overflow property. Responsive supported.
Type
string
Default
—
overflow_x
CSS overflow-x property. Responsive supported.
Type
string
Default
—
overflow_y
CSS overflow-y property. Responsive supported.
Type
string
Default
—
p
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pb
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pl
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
position
CSS position property. Responsive supported.
Type
string
Default
—
pr
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pt
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
px
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
py
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
right
CSS right property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
style
Additional inline styles
Type
string
Default
nil
top
CSS top property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
width
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
Layout sizing, padding, position, overflow, and related props are shared with Box, Flex, Grid, and Container.
Themes CSS also defines rt-r-size-* vertical padding for Section; the Elixir size attr is not wired yet—use padding props (py, pt, pb) until it lands.