Full-Width List Widget with Hover Effect

Streamline your navigation or feature list with the Interactive Pill List, a sleek, pill-shaped list widget designed for clarity and engagement. This widget is perfect for "Executive Management" lists, "Locations" directories, or service menus where a horizontal layout is preferred over vertical cards.

Each item is encased in a distinct pill-shaped container with fully rounded corners (50px), giving the interface a soft, modern feel. The layout is structured into two main columns: a bold headline on the left and a descriptive summary in the center, ensuring information is easy to scan.

The standout feature is the interactive hover state: upon mouseover, the entire card transitions from a neutral off-white to a warm Peach/Orange accent color. Simultaneously, the circular arrow icon on the far right glides forward, providing a satisfying directional cue that encourages the user to click through.

Key Features:

• Pill-Shaped Design: Unique 50px border radius creates a friendly, modern "button-like" aesthetic for list items.
• Interactive Hover Effect: Background color transforms to a warm accent tone on hover to highlight the active item.
• Structured Horizontal Layout: clearly separates the headline from the description for improved readability.
• Animated Directional Icon: The SVG arrow icon is encased in a circle and animates horizontally on hover.
• Rich Text Support: The description field uses data-richtext-editable for flexible text formatting.
• Mobile Adaptive: Automatically stacks content vertically on smaller screens while maintaining the pill shape and touch-friendly target size.
• Fully Editable: All text, links, and font properties are exposed to the CMS editor.