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
Thanks for sharing feedback. We're using it to improve these docs.