List Circle (alonepro/list-circle)

The List Circle block is an orbital badge showcase featuring concentric SVG ring graphics framing a central editorial content box. Colored pill-shaped badges orbit continuously around the center, staying upright via automated counter-rotation geometry. It is ideally suited for cause categories, impact pillars, and "About Our Foundation" overviews.

Architecture & Layout

• Concentric SVG Rings: Dual outer and inner SVG rings provide an orbital guide for orbiting items.
• Center Hero Content: An anchor area holding an optional subheading, main headline, dashed divider, description paragraph, and primary call-to-action button.
• Orbital Pill Badges: Reusable badge items positioned evenly along the circle using trigonometric coordinates ($x = r \cdot \cos\theta$, $y = r \cdot \sin\theta$). Each badge counter-rotates as the parent ring spins so text remains easily readable.

Configuring Center Content

In the block inspector under Center Content Settings:

• Show Center Content: Toggle whether the middle text and CTA box is rendered.
• Sub Heading: Category prefix text (e.g. OUR CORE PILLARS).
• Heading: Main headline (e.g. How We Deliver Lasting Change).
• Show Divider: Toggle the styled dashed divider between heading and description.
• Description: Summary paragraph explaining your organizational pillars.
• Button Settings: Set button text, destination URL, and link target (_self or _blank).

Configuring Orbital Items

In the Items repeater:

1. Click Add Item to introduce a new orbital badge.
2. For each item:
   • Text: Pillar or category title (e.g. Emergency Medical Relief, Clean Water Wells, Literacy Programs).
   • Color: Hex code or token slug for the badge background blob.
   • URL: Optional link target when visitors click the badge.

Animation & Orbit Settings

Color Customization

Customizable palette controls available in the block inspector:

• subHeadingColor, headingColor, dividerColor, descriptionColor
• buttonBgColor, buttonTextColor, buttonBgColorHover, buttonTextColorHover
• ringOuterColor, ringInnerColor
• itemTextColor