Skip to content

Badge list

Badge list (type: badge_list, display name “Badges”) is a container component holding multiple Badge children with unified layout and styling.

Image: storefront badge list rendering (multiple badges)

  • DirectionHorizontal / Vertical
  • JustifyStart / Center / End / Space between / Space around
  • For column direction also: cross-axis align — Left / Center / Right / Stretch
  • Gap — child spacing 0–80

Unifies all child badges’ image params:

  • Desktop icon size / Mobile icon size — 10–200
  • Desktop gap / Mobile gap — 0–100
  • Desktop font size / Mobile font size
  • Color
  • Desktop font size / Mobile font size
  • Color

“Wrap each child in a card”:

  • Card background
  • Card border: color / opacity / width
  • Card radius
  • Card padding
  • Hover animation
  • Spacing — responsive Padding / Margin

Image: Badge list editor sections

Child editing: see Badge.