Create a clean, modern horizontal process timeline section for a UX case study. The layout should be simple, professional, and figma-ready. Use soft pastel colors, rounded pill bars, minimal icons, and three clear phases: Discovery, Design, Delivery.
46c141f
verified
| class ProcessPhase extends HTMLElement { | |
| connectedCallback() { | |
| const phase = this.getAttribute('phase') || 'Discovery'; | |
| const color = this.getAttribute('color') || 'blue-100'; | |
| const start = this.getAttribute('start') || '1'; | |
| const span = this.getAttribute('span') || '4'; | |
| const icon = this.getAttribute('icon') || 'search'; | |
| const title = this.getAttribute('title') || 'Process Step'; | |
| const desc = this.getAttribute('desc') || ''; | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .phase-container { | |
| position: relative; | |
| grid-column-start: ${start}; | |
| grid-column-end: span ${span}; | |
| margin-bottom: 1rem; | |
| } | |
| .phase-pill { | |
| border-radius: 9999px; | |
| padding: 0.75rem 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(219, 234, 254, 0.8); | |
| backdrop-filter: blur(4px); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .phase-pill:hover { | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .phase-icon { | |
| flex-shrink: 0; | |
| height: 2.5rem; | |
| width: 2.5rem; | |
| border-radius: 9999px; | |
| background: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.05); | |
| } | |
| .phase-content { | |
| margin-left: 1rem; | |
| } | |
| .phase-title { | |
| color: #1f2937; | |
| font-weight: 500; | |
| font-size: 0.9375rem; | |
| margin: 0; | |
| } | |
| .phase-desc { | |
| color: #4b5563; | |
| font-size: 0.75rem; | |
| margin-top: 0.25rem; | |
| } | |
| </style> | |
| <div class="phase-container"> | |
| <div class="phase-pill"> | |
| <div class="phase-icon"> | |
| <i data-feather="${icon}"></i> | |
| </div> | |
| <div class="phase-content"> | |
| <h3 class="phase-title">${title}</h3> | |
| ${desc ? `<p class="phase-desc">${desc}</p>` : ''} | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Initialize feather icons in shadow DOM | |
| if (window.feather) { | |
| window.feather.replace({ class: 'phase-icon i' }); | |
| } | |
| } | |
| } | |
| customElements.define('process-phase', ProcessPhase); |