Vertical Gradient Process List - Pill Layout

Streamline complex information into a clear, digestible format with the Vertical Gradient Process List. This widget abandons traditional bullet points or horizontal sliders in favor of a modern, stacked "pill" layout that guides the user's eye naturally down the page. It is the ideal component for displaying timelines, onboarding steps, service workflows, or feature breakdowns.

The design utilizes a sophisticated CSS-based Color Cycling Engine. The rows are pre-configured to cycle through a calming green spectrum (White, Mint, Teal, Deep Forest). As you add new steps via your CMS using the included template, the style engine automatically applies the correct color theme to the new item based on its position in the list. This ensures a perfectly cohesive gradient effect regardless of how many steps you add, without requiring manual color overrides.

Visually, the widget separates the step number from the content, placing them in distinct, rounded containers ("pills") with subtle drop shadows. On desktop, these align horizontally for a sleek look; on mobile devices, they stack vertically to maximize readability on narrow screens.

Key Features:

• Linear Vertical Layout: Displays content in a straightforward, top-to-bottom stack for maximum scannability.
• Smart Color Cycling: Advanced CSS nth-child logic automatically applies a 4-step gradient color scheme to new items.
• Modern Pill Aesthetic: Features fully rounded corners and soft shadows for a friendly, approachable UI.
• CMS-Ready Architecture: Built with data-slide attributes and a hidden template row, making it fully compatible with frontend visual editors.
• Responsive Stacking: The layout intelligently adapts to mobile screens, centering the content and stacking the number above the text.