features skills progress bars competency expertise agency skills progress-bars competency expertise capabilities percentage skill bars expertise section competency progress display
Features Skill Bars
Fetch pattern JSON:
curl https://webspire.de/patterns/features/skill-bars.json skill-bars.html
<section class="ws-features ws-skill-bars bg-[var(--ws-features-bg)] py-16">
<div class="mx-auto grid max-w-6xl gap-12 px-6 lg:grid-cols-2 lg:items-center">
<!-- Left: Intro -->
<div>
<p class="mb-3 text-sm font-semibold uppercase tracking-wider text-blue-600">Our Expertise</p>
<h2 class="text-3xl font-bold text-[var(--ws-features-text)]">Technical capabilities that drive results</h2>
<p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">Our team brings deep expertise across multiple domains, continuously pushing the boundaries of what's possible.</p>
<div class="mt-8 grid grid-cols-2 gap-4">
<div class="flex items-start gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-100">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
</div>
<div>
<h3 class="text-sm font-semibold text-[var(--ws-features-text)]">Innovation</h3>
<p class="text-xs text-[var(--ws-features-text-muted)]">Cutting-edge solutions</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-100">
<svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<div>
<h3 class="text-sm font-semibold text-[var(--ws-features-text)]">Security</h3>
<p class="text-xs text-[var(--ws-features-text-muted)]">Enterprise-grade protection</p>
</div>
</div>
</div>
</div>
<!-- Right: Skill bars -->
<div class="space-y-6">
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Frontend Development</span>
<span class="text-sm font-bold text-[var(--ws-features-text)]">92%</span>
</div>
<div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
<div class="h-2.5 w-[92%] rounded-full bg-blue-500 transition-all duration-1000 ease-out"></div>
</div>
</div>
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-[var(--ws-features-text-soft)]">UI/UX Design</span>
<span class="text-sm font-bold text-[var(--ws-features-text)]">87%</span>
</div>
<div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
<div class="h-2.5 w-[87%] rounded-full bg-emerald-500 transition-all duration-1000 ease-out"></div>
</div>
</div>
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Backend Architecture</span>
<span class="text-sm font-bold text-[var(--ws-features-text)]">78%</span>
</div>
<div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
<div class="h-2.5 w-[78%] rounded-full bg-amber-500 transition-all duration-1000 ease-out"></div>
</div>
</div>
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Cloud & DevOps</span>
<span class="text-sm font-bold text-[var(--ws-features-text)]">85%</span>
</div>
<div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
<div class="h-2.5 w-[85%] rounded-full bg-purple-500 transition-all duration-1000 ease-out"></div>
</div>
</div>
<div>
<div class="mb-2 flex items-center justify-between">
<span class="text-sm font-medium text-[var(--ws-features-text-soft)]">Machine Learning</span>
<span class="text-sm font-bold text-[var(--ws-features-text)]">71%</span>
</div>
<div class="h-2.5 rounded-full bg-[var(--ws-features-card-bg)]">
<div class="h-2.5 w-[71%] rounded-full bg-rose-500 transition-all duration-1000 ease-out"></div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
featuresskillsprogressbarscompetencyexpertiseagency
Slots
| Name | Required | Description |
|---|---|---|
| intro | Yes | Title, description, and feature icons on the left. |
| bars | Yes | Labeled progress bars with percentage values. |