List Schema
| Property | Value |
|---|---|
name | list |
category | general |
tag | div |
nestable | false |
Controls
Section titled “Controls”| Key | Type | Label | CSS |
|---|---|---|---|
items | repeater | List items | — |
itemJustifyContent | justify-content | Justify content | justify-content on .content, justify-content on .description |
itemAlignItems | align-items | Align items | align-items on .content, align-items on .description |
itemMargin | spacing | Margin | margin on li |
itemPadding | spacing | Padding | padding on li |
itemOddBackground | color | Odd background | background-color on li:nth-child(odd) |
itemEvenBackground | color | Even background | background-color on li:nth-child(even) |
itemBorder | border | Border | border on li |
itemAutoWidth | checkbox | Auto width | justify-content on .content, flex-grow on .separator |
highlightBlock | checkbox | Block | display on li[data-highlight]::before |
highlightLabelPadding | spacing | Padding | padding on li[data-highlight]::before |
highlightLabelBackground | color | Background | background-color on li[data-highlight]::before |
highlightLabelBorder | border | Border | border on li[data-highlight]::before |
highlightLabelTypography | typography | Typography | font on li[data-highlight]::before |
highlightContentPadding | spacing | Padding | padding on li[data-highlight] .content |
highlightContentBackground | color | Background | background-color on li[data-highlight] .content |
highlightContentBorder | border | Border | border on li[data-highlight] .content |
highlightContentColor | color | Text color | color on li[data-highlight] .content .title, color on li[data-highlight] .content .meta, color on li[data-highlight] .content .description |
icon | icon | Icon | — |
iconAfterTitle | checkbox | After title | — |
iconWidth | number | Width | width on .icon |
iconHeight | number | Height | height on .icon |
iconSize | number | Size | font-size on .icon, height on .icon svg, width on .icon svg |
iconColor | color | Color | color on .icon |
iconBackgroundColor | color | Background color | background-color on .icon |
iconBorder | border | Border | border on .icon |
iconBoxShadow | box-shadow | Box shadow | box-shadow on .icon |
titleMargin | spacing | Margin | margin on .title |
titleTag | text | HTML tag | — |
titleTypography | typography | Typography | font on .title |
metaMargin | spacing | Margin | margin on .meta |
metaTypography | typography | Typography | font on .meta |
descriptionTypography | typography | Typography | font on .description |
separatorDisable | checkbox | Disable | display on .separator |
separatorStyle | select | Style | border-top-style on .separator |
separatorWidth | number | Width | flex-basis on .separator, flex-grow on .separator |
separatorHeight | number | Height | border-top-width on .separator |
separatorColor | color | Color | border-top-color on .separator |
Inherited CSS controls
Section titled “Inherited CSS controls”Shared CSS controls available on all elements. Keys are prefixed with _ and support responsive/pseudo-class variants via colon syntax (e.g. _typography:tablet_portrait:hover).
| Key | Type | Label | CSS |
|---|---|---|---|
_content | text | Content | content |
_margin | spacing | Margin | margin |
_padding | spacing | Padding | padding |
_width | number | Width | width |
_widthMin | number | Min. width | min-width |
_widthMax | number | Max. width | max-width |
_height | number | Height | height |
_heightMin | number | Min. height | min-height |
_heightMax | number | Max. height | max-height |
_aspectRatio | text | Aspect ratio | aspect-ratio |
_position | select | Position | position |
_top | number | Top | top |
_right | number | Right | right |
_bottom | number | Bottom | bottom |
_left | number | Left | left |
_zIndex | number | Z-index | z-index |
_order | number | Order | order |
_display | select | Display | display, align-items |
_visibility | select | Visibility | visibility |
_overflow | text | Overflow | overflow |
_opacity | number | Opacity | opacity |
_cursor | select | Cursor | cursor |
_isolation | select | Isolation | isolation |
_mixBlendMode | select | Mix blend mode | mix-blend-mode |
_pointerEvents | text | Pointer events | pointer-events |
_perspective | number | Perspective | perspective |
_perspectiveOrigin | text | Perspective origin | perspective-origin |
_gridItemJustifySelf | align-items | Justify self | justify-self |
_flexDirection | direction | Direction | flex-direction |
_alignSelf | align-items | Align self | align-self |
_justifyContent | justify-content | Align main axis | justify-content |
_alignItems | align-items | Align cross axis | align-items |
_gap | number | Gap | gap |
_flexGrow | number | Flex grow | flex-grow |
_flexShrink | number | Flex shrink | flex-shrink |
_flexBasis | text | Flex basis | flex-basis |
_useMasonry | checkbox | %s layout | — |
_masonryColumn | number | Columns | --columns |
_masonryGutter | number | Spacing | --gutter |
_masonryHorizontalOrder | checkbox | Horizontal order | — |
_masonryTransitionDuration | number | Transition | — |
_masonryTransitionMode | select | Reveal animation | — |
_typography | typography | _typography | font |
_background | background | _background | background |
_shapeDividers | repeater | Custom shape | — |
_gradient | gradient | _gradient | background-image |
_border | border | Border | border |
_boxShadow | box-shadow | Box shadow | box-shadow |
_transform | transform | Transform | transform |
_transformOrigin | text | Transform origin | transform-origin |
_motionElementParallax | checkbox | Element parallax | — |
_motionElementParallaxSpeedX | number | Horizontal speed | --brx-motion-parallax-speed-x |
_motionElementParallaxSpeedY | number | Vertical speed | --brx-motion-parallax-speed-y |
_motionBackgroundParallax | checkbox | Background parallax | — |
_motionBackgroundParallaxSpeed | number | Background speed | --brx-motion-background-speed |
_motionStartVisiblePercent | number | Parallax start point | — |
_cssCustom | code | Custom CSS | — |
_cssClasses | text | CSS classes | — |
_cssId | text | CSS ID | — |
_cssFilters | filters | CSS Filters | filter |
_cssTransition | text | Transition | transition |
_attributes | repeater | Name | — |
_scrollSnapType | select | Type | scroll-snap-type on html, scroll-snap-align on .brxe-section |
_scrollSnapAlign | select | Align | scroll-snap-align on .brxe-section |
_scrollSnapStop | select | Stop | scroll-snap-stop on .brxe-section |
Was this helpful?
A quick vote and short notes help us improve these docs faster.
Leave a note for us
Please do not include passwords, license keys, or personal data. We store submitted notes to improve the docs.
Thanks for sharing feedback. We're using it to improve these docs.