BulletList/V1

Bullet lists with icon support for creating feature lists and checklists.

Important Constraint

Single icon style: BulletList only supports ONE icon style and color for ALL items. You cannot use different icons for different items within the same list.

Basic Structure

JSON

{
  "type": "BulletList/V1",
  "id": "6Z-BulLs-0",
  "version": 0,
  "parentId": "6Z-Parent-0",
  "fractionalIndex": "a0",
  "attrs": {
    "style": { "margin-top": 20 }
  },
  "params": {
    "margin-top--unit": "px"
  },
  "selectors": {
    ".elBulletList": {
      "attrs": {
        "data-style-guide-content": "m",
        "style": { "color": "#333333" }
      }
    },
    ".elBulletList li:not(:first-child)": {
      "attrs": {
        "style": { "margin-top": 15 }
      },
      "params": {
        "margin-top--unit": "px"
      }
    },
    ".elBulletList .fa_icon": {
      "attrs": {
        "className": "fas fa-check",
        "style": {
          "margin-right": 12,
          "font-size": 18,
          "color": "#22c55e"
        }
      },
      "params": {
        "margin-right--unit": "px",
        "font-size--unit": "px"
      }
    }
  }
}

Common Icon Options

Icon Class	Description
`fas fa-check`	Checkmark
`fas fa-check-circle`	Checkmark in circle
`fas fa-star`	Star
`fas fa-arrow-right`	Arrow right
`fas fa-circle`	Simple bullet

Styling Options

Item Spacing

Control spacing between list items:

JSON

{
  "selectors": {
    ".elBulletList li:not(:first-child)": {
      "attrs": {
        "style": { "margin-top": 20 }
      },
      "params": {
        "margin-top--unit": "px"
      }
    }
  }
}

Icon Styling

JSON

{
  "selectors": {
    ".elBulletList .fa_icon": {
      "attrs": {
        "className": "fas fa-check-circle",
        "style": {
          "margin-right": 16,
          "font-size": 20,
          "color": "#3b82f6"
        }
      },
      "params": {
        "margin-right--unit": "px",
        "font-size--unit": "px"
      }
    }
  }
}

Supported Features

Feature	Supported
Background	Yes
Border	No
Shadow	No
Corners	No