List

Use List to output a structured list of items with optional icons, headings, and rich content using ordered, unordered, or generic list markup.

Usage

Use List to render a series of items as an unordered list, ordered list, or generic div-based list. Each advanced item can include an icon, a heading, and rich content, with control over icon placement, heading and content tags, and the markers used for ordered or unordered lists. A simpler basic mode accepts one entry per line for quick lists without per-item formatting.

Use List for feature lists, step summaries, service breakdowns, key takeaways, and any layout that needs more structure than a plain WYSIWYG list. The module suits both content-heavy lists with headings and supporting copy as well as compact bullet or numbered lists styled inside Beaver Builder.

Module Settings

The List module settings control how list items are sourced and rendered, the list and item markup, and the appearance of the list, icons, headings, content, and item separators.

General Tab

The General tab sets the list layout, the items themselves, the list type and icons, and the HTML tags used for item headings and content.

List Items

The List Items section controls how items are added and which markup wraps each item heading.

List Items

Layout Default: Advanced

Selects how list items are authored.

• Advanced: Adds items through a repeater where each item supports an icon, heading, and rich content. Reveals List Item entries and the List Item Heading Tag field.
• Basic: Accepts one item per line in a single text field. Reveals Text For List.

List Item

The repeater used when Layout is set to Advanced. Each entry opens its own settings form.

List Item Icon

Icon Supports: Field Connections

The icon shown for this item. Overrides the icon configured at the module level in Display.

List Item Heading

Heading Text

The heading shown for this item. Leave empty to omit the heading. Supports a limited set of inline HTML tags.

List Item Content

Content

The rich text content for this item, edited with the WordPress Classic Editor WYSIWYG.

List Item Style

Heading Text Color Supports: Responsive, Field Connections

Overrides the module-level heading color for this item.

Content Text Color Supports: Responsive, Field Connections

Overrides the module-level content color for this item.

Background Color Supports: Responsive, Field Connections

Sets the background color of this item.

Icon Color Supports: Responsive, Field Connections

Overrides the module-level list icon color for this item.

List Item Padding Supports: Responsive, Link Values

Overrides the module-level List Item Padding for this item.

Text For List (Basic Only) Supports: Field Connections

A plain-text list used when Layout is set to Basic. Enter one item on each new line.

Display

The Display section controls the list markup, the icon shown next to items, and where that icon sits in each item.

Display

List Type Default: Generic List (div)

The HTML markup used for the list. Each type has its own icon control.

• Generic List (div): Renders the list as a div with role list and reveals the List Icon picker for choosing a custom icon.
• Unordered List (ul): Renders a <ul> and reveals a marker selector with Square, Circle, and Disc options.
• Ordered List (ol): Renders an <ol> and reveals a numbering selector with Numeric, Numeric With Leading Zeros, Alphabetic (Upper), Alphabetic (Lower), Roman Numerals (Upper), Roman Numerals (Lower), Hebrew Numerals, Armenian Numerals (Lower), Armenian Numerals (Upper), and Greek Numerals (Lower) markers.

List Icon (Unordered List Only) Default: Disc

The marker style applied to the unordered list. Appears when List Type is set to Unordered List (ul).

• Square: A solid square marker.
• Circle: A hollow circle marker.
• Disc: A solid disc marker.

List Icon (Ordered List Only) Default: Numeric

The numbering style applied to the ordered list. Appears when List Type is set to Ordered List (ol).

• Numeric: Standard decimal numbers, for example 1, 2, 3.
• Numeric With Leading Zeros: Decimal numbers padded with leading zeros, for example 01, 02, 03.
• Alphabetic (Upper): Uppercase letters, for example A, B, C.
• Alphabetic (Lower): Lowercase letters, for example a, b, c.
• Roman Numerals (Upper): Uppercase Roman numerals, for example I, II, III.
• Roman Numerals (Lower): Lowercase Roman numerals, for example i, ii, iii.
• Hebrew Numerals: Traditional Hebrew numbering.
• Armenian Numerals (Lower): Lowercase Armenian numbering.
• Armenian Numerals (Upper): Uppercase Armenian numbering.
• Greek Numerals (Lower): Lowercase Greek numbering.

List Icon (Generic List Only) Supports: Field Connections

The icon shown next to each item when List Type is set to Generic List (div). Individual items can override this through their own Icon setting.

List Icon Placement Default: Left of Content

Controls where the list icon sits inside each item.

• Left of Heading: Places the icon before the item heading.
• Left of Content: Places the icon before the item content.
• Right of Heading: Places the icon after the item heading.
• Right of Content: Places the icon after the item content.

List Item Tags

The List Item Tags section controls the HTML tags used for each item's heading and content wrappers.

List Item Tags

List Item Heading Tag (Advanced Only) Default: h3

The wrapper tag used for each item heading. The heading appears above the text content. Available when Layout is set to Advanced.

• h1: First-level heading tag.
• h2: Second-level heading tag.
• h3: Third-level heading tag.
• h4: Fourth-level heading tag.
• h5: Fifth-level heading tag.
• h6: Sixth-level heading tag.
• span: Inline span wrapper for non-semantic headings.
• div: Block div wrapper for non-semantic headings.

List Item Content Tag Default: div

The wrapper tag used for each item's text content. Sits directly below the item heading.

• div: Generic block wrapper.
• aside: Semantic wrapper for tangentially related content.
• section: Semantic wrapper for a self-contained section.

Style Tab

The Style tab controls the appearance of the list container, icons, headings, content, and item separators.

List Background Color Supports: Responsive, Field Connections

The background color applied to the list container.

List Padding Default: 0; Supports: Responsive, Link Values

The inner spacing of the list container.

List Item Padding Default: 5; Supports: Responsive, Link Values

The inner spacing applied to every list item. Individual items can override this in their own style settings.

Border Around List Supports: Responsive

The border style, width, color, and radius applied to the list container.

Icon Style

The Icon Style section controls the appearance of list icons.

Icon Style

List Icon Color Supports: Responsive, Field Connections

The color of the list icon.

Icon Size Default: 10; Supports: Responsive

The font size of the list icon, in pixels.

Icon Width Supports: Responsive

A fixed width for the icon container, in pixels. Useful for aligning headings or content across items.

Icon Padding Default: 5; Supports: Responsive, Link Values

The inner spacing applied around the list icon.

Heading Style (Advanced Only)

The Heading Style section controls the appearance of item headings. Available when Layout is set to Advanced.

Heading Style

Heading Color Supports: Responsive, Field Connections

The text color used for item headings.

Typography Supports: Responsive

The font settings for item headings.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Content Style

The Content Style section controls the appearance of item content.

Content Style

Content Color Supports: Responsive, Field Connections

The text color used for item content.

Typography Supports: Responsive

The font settings for item content.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Item Separator

The Item Separator section controls the line drawn between adjacent list items.

Item Separator

Line Separator Style Default: None (No Separator); Supports: Responsive

The border style drawn between items.

• None (No Separator): No line is drawn between items.
• Solid: A continuous line.
• Dashed: A dashed line.
• Dotted: A dotted line.
• Double: Two parallel lines.

Line Color Supports: Responsive, Field Connections

The color of the separator line. Set this to a transparent color to use the separator as spacing only.

Separator Size Default: 0; Supports: Responsive

The thickness of the separator line, in pixels.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.