steps process connector icons numbered dashed-line horizontal vertical steps process icons connector dashed-line numbered how-it-works process steps with icons and connector line numbered steps with dashed line connector horizontal steps layout with icons
Steps With Connector Icons
Fetch pattern JSON:
curl https://webspire.de/patterns/steps/with-connector-icons.json with-connector-icons.html
<section class="ws-steps bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-accent)]">How it works</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Get started in four steps</h2>
</div>
<!-- Desktop: horizontal -->
<div class="mt-16 hidden lg:block">
<div class="relative flex items-start justify-between gap-0">
<!-- Connector line behind icons -->
<div class="absolute left-[12.5%] right-[12.5%] top-[1.75rem] border-t-2 border-dashed border-[var(--ws-color-border)]" aria-hidden="true"></div>
<!-- Step 1 -->
<div class="relative flex w-1/4 flex-col items-center text-center">
<div class="relative flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-accent)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-accent)] text-[10px] font-black text-white">1</span>
<svg class="h-6 w-6 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
</div>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Browse patterns</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Search the registry by family, intent, or keyword. Filter by domain and tone.</p>
</div>
<!-- Step 2 -->
<div class="relative flex w-1/4 flex-col items-center text-center">
<div class="relative flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-border)] text-[10px] font-black text-[var(--ws-color-text)]">2</span>
<svg class="h-6 w-6 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/>
</svg>
</div>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Copy the HTML</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">One-click copy for HTML, Astro, or Web Component format. No CLI required.</p>
</div>
<!-- Step 3 -->
<div class="relative flex w-1/4 flex-col items-center text-center">
<div class="relative flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-border)] text-[10px] font-black text-[var(--ws-color-text)]">3</span>
<svg class="h-6 w-6 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/>
</svg>
</div>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Customize classes</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Adjust Tailwind classes for your brand colors, spacing, and typography system.</p>
</div>
<!-- Step 4 -->
<div class="relative flex w-1/4 flex-col items-center text-center">
<div class="relative flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-border)] text-[10px] font-black text-[var(--ws-color-text)]">4</span>
<svg class="h-6 w-6 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
</svg>
</div>
<h3 class="mt-5 text-base font-bold text-[var(--ws-color-text)]">Ship to production</h3>
<p class="mt-2 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Patterns are SSR-safe, accessible, and responsive out of the box. Deploy with confidence.</p>
</div>
</div>
</div>
<!-- Mobile: vertical -->
<div class="mt-12 flex flex-col gap-0 lg:hidden">
<div class="relative pl-16">
<!-- Vertical connector line -->
<div class="absolute left-7 top-14 bottom-0 w-px border-l-2 border-dashed border-[var(--ws-color-border)]" aria-hidden="true"></div>
<!-- Step 1 mobile -->
<div class="relative mb-10">
<div class="absolute -left-9 flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-accent)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-accent)] text-[10px] font-black text-white">1</span>
<svg class="h-6 w-6 text-[var(--ws-color-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
</div>
<h3 class="text-base font-bold text-[var(--ws-color-text)]">Browse patterns</h3>
<p class="mt-1 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Search the registry by family, intent, or keyword.</p>
</div>
<!-- Step 2 mobile -->
<div class="relative mb-10">
<div class="absolute -left-9 flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-border)] text-[10px] font-black text-[var(--ws-color-text)]">2</span>
<svg class="h-6 w-6 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/></svg>
</div>
<h3 class="text-base font-bold text-[var(--ws-color-text)]">Copy the HTML</h3>
<p class="mt-1 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">One-click copy for HTML, Astro, or Web Component format.</p>
</div>
<!-- Step 3 mobile -->
<div class="relative mb-10">
<div class="absolute -left-9 flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-border)] text-[10px] font-black text-[var(--ws-color-text)]">3</span>
<svg class="h-6 w-6 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
</div>
<h3 class="text-base font-bold text-[var(--ws-color-text)]">Customize classes</h3>
<p class="mt-1 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">Adjust Tailwind classes for your brand colors and spacing.</p>
</div>
<!-- Step 4 mobile -->
<div class="relative mb-10">
<div class="absolute -left-9 flex h-14 w-14 items-center justify-center rounded-full border-2 border-[var(--ws-color-border)] bg-[var(--ws-color-bg)]">
<span class="absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--ws-color-border)] text-[10px] font-black text-[var(--ws-color-text)]">4</span>
<svg class="h-6 w-6 text-[var(--ws-color-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/></svg>
</div>
<h3 class="text-base font-bold text-[var(--ws-color-text)]">Ship to production</h3>
<p class="mt-1 text-sm leading-relaxed text-[var(--ws-color-text-soft)]">SSR-safe, accessible, and responsive. Deploy with confidence.</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
stepsprocessconnectoriconsnumbereddashed-linehorizontalvertical
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading. |
| heading | No | Section title. |
| steps | Yes | Four process step items with icon, title, and description. |
Four process steps displayed horizontally on desktop with a dashed connector line running through the center of the numbered icon circles. The first step is highlighted in accent color as the active starting point. On mobile, steps stack vertically with a vertical dashed line on the left side. Two separate layout blocks (desktop/mobile) ensure clean rendering at all sizes.