/
List Block
List Block
A list container that renders bullet lists, numbered lists, or custom icon lists. Controls typography, spacing, and colors for all items at once. Each item is a List Item Block.
THREE LIST TYPES
Unordered
- Pre-designed sections
- Responsive by default
- No code needed
Ordered
- Choose a pattern
- Customize the content
- Publish your page
Custom Icon
Fast performance- SEO optimized
- Mobile ready
When to use this block
- Feature lists, benefit lists, step-by-step instructions
- Checklists with custom icons (checkmarks, arrows, stars)
- Navigation link lists in footers or sidebars
List Type
Choose between bullet points, numbered items, or a custom icon that appears beside every item.
List Type
Sidebar Panel
Custom Icon mode
Upload an SVG or image to use as the bullet icon for every item. Control icon width and height in pixels. The icon is passed to all List Item children automatically.
Custom Icon
When list type is set to “Custom Icon”, upload an image or SVG. It replaces the default bullet on every item.
Icon Settings
Sidebar Panel
Icon
Width
px
Height
px
RESULT
- 260+ pre-designed sections
- Design token system
- Sub-second page loads
Colors
Separate color controls for text, bullets/numbers, and link hover state.
Text Color
Applied to all item text via the <ul> / <ol> tag.
Bullet Color
Colors the ::marker (bullet or number) independently from text.
Link Hover
Hover color for linked items. Links inherit text color by default.
Typography
Font size, line height, and letter spacing apply to all items. Responsive across 3 breakpoints. All values in px.
Typography
Sidebar Panel
Font Size
px
Line Height
px
Letter Spacing
px
Responsive: Mobile Tablet Desktop. Individual items can override font weight via the List Item Block.
Item Spacing
Gap between list items in pixels. Responsive across breakpoints. Applied as top margin on every item except the first.
Item Spacing
Sidebar Panel
VISUAL COMPARISON
Spacing: 4px
- Item one
- Item two
- Item three
Spacing: 12px
- Item one
- Item two
- Item three
Margin
Top and bottom margin in pixels. Responsive across breakpoints.
Responsive:
Mobile
Tablet
Desktop
No padding, border, background, or shadow on this block. Wrap it in a Grid Item or Flex Block if you need those.
All Available Controls
List Type unordered, ordered, custom icon
listType: "unordered" (bullets, default), "ordered" (numbers), "custom" (icon per item).
Custom Icon Image/SVG upload + width/height
iconUrl / iconId: uploaded image. iconWidth (default 16px), iconHeight (default 16px). Only used when listType: "custom". Passed to children via block context.
Colors Text, bullet, link hover
textColor: all item text. bulletColor: ::marker only. linkHoverColor: hover state for linked items. Links inherit text color by default (color: inherit is always applied).
Typography Font size, line height, letter spacing — 3 breakpoints
fontSize, lineHeight, letterSpacing (+Md/Lg). All in px. Applies to all items uniformly.
Item Spacing Gap between items — 3 breakpoints
itemSpacing, itemSpacingMd, itemSpacingLg. Value in px. Applied as margin-top on every item except the first.
Margin Top & bottom only, 3 breakpoints
marginTop, marginBottom (+Md/Lg). Value in px. No left/right margin, no padding on this block.