features quick-start developer cards hover colorful icon quick-start features cards icons developer hover colorful capabilities quick-start features grid developer onboarding cards capabilities overview with colored icons
Features Quick-Start
Fetch pattern JSON:
curl https://webspire.de/patterns/features/quick-start.json quick-start.html
<section class="ws-features bg-[var(--ws-features-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="text-center">
<h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">Start building</h2>
<p class="mx-auto mt-4 max-w-xl text-base text-[var(--ws-features-text-soft)]">Everything you need to ship AI-powered features — from embeddings to agents.</p>
</div>
<div class="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card: Text Generation -->
<a href="#"
class="group relative overflow-hidden rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6 transition-colors hover:bg-[color-mix(in_oklch,var(--ws-features-bg),#6366f1_5%)]"
style="--qs-hover: oklch(0.67 0.2 264);">
<!-- Pixel grid on hover -->
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-30"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px; color: var(--qs-hover);"></div>
<div class="relative">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[color:var(--qs-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
</span>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-features-text)]">Chat & Text</h3>
<p class="mt-1.5 text-xs leading-relaxed text-[var(--ws-features-text-soft)]">Generate, summarize, classify, and transform text with frontier language models.</p>
</div>
</a>
<!-- Card: Vision -->
<a href="#"
class="group relative overflow-hidden rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6 transition-colors hover:bg-[color-mix(in_oklch,var(--ws-features-bg),#ec4899_5%)]"
style="--qs-hover: oklch(0.65 0.22 340);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-30"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px; color: var(--qs-hover);"></div>
<div class="relative">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[color:var(--qs-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
</span>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-features-text)]">Vision</h3>
<p class="mt-1.5 text-xs leading-relaxed text-[var(--ws-features-text-soft)]">Analyze images, extract data from documents, and describe visual content.</p>
</div>
</a>
<!-- Card: Agents -->
<a href="#"
class="group relative overflow-hidden rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6 transition-colors hover:bg-[color-mix(in_oklch,var(--ws-features-bg),#f59e0b_5%)]"
style="--qs-hover: oklch(0.75 0.18 80);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-30"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px; color: var(--qs-hover);"></div>
<div class="relative">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[color:var(--qs-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.091Z"/></svg>
</span>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-features-text)]">Agents</h3>
<p class="mt-1.5 text-xs leading-relaxed text-[var(--ws-features-text-soft)]">Build autonomous agents that use tools, call APIs, and complete multi-step tasks.</p>
</div>
</a>
<!-- Card: Embeddings -->
<a href="#"
class="group relative overflow-hidden rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6 transition-colors hover:bg-[color-mix(in_oklch,var(--ws-features-bg),#10b981_5%)]"
style="--qs-hover: oklch(0.7 0.17 162);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-30"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px; color: var(--qs-hover);"></div>
<div class="relative">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[color:var(--qs-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"/></svg>
</span>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-features-text)]">Embeddings</h3>
<p class="mt-1.5 text-xs leading-relaxed text-[var(--ws-features-text-soft)]">Semantic search, RAG pipelines, and similarity — high-quality vector representations.</p>
</div>
</a>
<!-- Card: Reasoning -->
<a href="#"
class="group relative overflow-hidden rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6 transition-colors hover:bg-[color-mix(in_oklch,var(--ws-features-bg),#ef4444_5%)]"
style="--qs-hover: oklch(0.63 0.22 25);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-30"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px; color: var(--qs-hover);"></div>
<div class="relative">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[color:var(--qs-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</span>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-features-text)]">Reasoning</h3>
<p class="mt-1.5 text-xs leading-relaxed text-[var(--ws-features-text-soft)]">Complex multi-step reasoning, math, and science with chain-of-thought models.</p>
</div>
</a>
<!-- Card: Document AI -->
<a href="#"
class="group relative overflow-hidden rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-6 transition-colors hover:bg-[color-mix(in_oklch,var(--ws-features-bg),#0ea5e9_5%)]"
style="--qs-hover: oklch(0.65 0.18 220);">
<div class="pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-30"
style="background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px; color: var(--qs-hover);"></div>
<div class="relative">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--ws-features-icon-bg)]">
<svg class="h-5 w-5 text-[color:var(--qs-hover)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
</span>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-features-text)]">Document AI</h3>
<p class="mt-1.5 text-xs leading-relaxed text-[var(--ws-features-text-soft)]">OCR, extraction, and comprehension for PDFs, invoices, contracts, and forms.</p>
</div>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
featuresquick-startdevelopercardshovercolorfulicon
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| cards | Yes | Feature cards with icon box, title, description, and individual hover color. |
Props
| Name | Type | Default | Description |
|---|---|---|---|
| --qs-hover | color | oklch(0.67 0.2 264) | Per-card accent color used for icon, dot-grid overlay, and background tint on hover. Set inline on each card element. |
Six-card capabilities grid inspired by developer docs landing pages. Each card has:
- A square icon box with an individual accent color via
--qs-hover - A dot-grid (
radial-gradient) overlay that fades in on hover - A subtle background tint on hover via
color-mix()
No JavaScript — all interactions are pure CSS. Change --qs-hover on each <a> element to set individual card colors.