services list hover reveal numbered agency capabilities services capabilities list numbered hover-reveal agency services list with hover effect numbered capabilities section
Services Reveal List
Fetch pattern JSON:
curl https://webspire.de/patterns/services/reveal-list.json reveal-list.html
<section class="ws-services-list bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-5xl px-6">
<h2 class="mb-12 text-3xl font-bold text-slate-900">What We Do</h2>
<div class="divide-y divide-slate-200 border-y border-slate-200">
<!-- Service row -->
<div class="group relative overflow-hidden py-8">
<div class="absolute inset-0 bg-gradient-to-r from-blue-50 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-blue-900/10"></div>
<div class="relative flex items-start justify-between gap-6">
<div class="flex items-start gap-6">
<span class="text-3xl font-bold text-slate-200">01</span>
<div>
<h3 class="text-xl font-semibold text-slate-900">Strategy & Consulting</h3>
<p class="mt-2 max-w-lg text-sm text-slate-500">We help you define your digital vision, identify opportunities, and build a roadmap for sustainable growth.</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Market Research</span>
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Brand Strategy</span>
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Workshop</span>
</div>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</div>
</div>
<div class="group relative overflow-hidden py-8">
<div class="absolute inset-0 bg-gradient-to-r from-emerald-50 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-emerald-900/10"></div>
<div class="relative flex items-start justify-between gap-6">
<div class="flex items-start gap-6">
<span class="text-3xl font-bold text-slate-200">02</span>
<div>
<h3 class="text-xl font-semibold text-slate-900">Design & Experience</h3>
<p class="mt-2 max-w-lg text-sm text-slate-500">Crafting intuitive interfaces and memorable experiences that delight users and drive engagement.</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">UI/UX Design</span>
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Prototyping</span>
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Design System</span>
</div>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</div>
</div>
<div class="group relative overflow-hidden py-8">
<div class="absolute inset-0 bg-gradient-to-r from-amber-50 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 dark:from-amber-900/10"></div>
<div class="relative flex items-start justify-between gap-6">
<div class="flex items-start gap-6">
<span class="text-3xl font-bold text-slate-200">03</span>
<div>
<h3 class="text-xl font-semibold text-slate-900">Development & Engineering</h3>
<p class="mt-2 max-w-lg text-sm text-slate-500">Building robust, scalable applications with modern frameworks and best engineering practices.</p>
<div class="mt-3 flex flex-wrap gap-2">
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Frontend</span>
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">Backend</span>
<span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-600">DevOps</span>
</div>
</div>
</div>
<svg class="h-5 w-5 shrink-0 text-slate-300 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
serviceslisthoverrevealnumberedagencycapabilities
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title. |
| rows | Yes | Service rows with number, title, description, tags, and arrow. |