services pills tags navigation agency cloud list services pills tag cloud agency navigation services as pill tags tag cloud for agency services flowing pill list of offerings
Services Tag Cloud
Fetch pattern JSON:
curl https://webspire.de/patterns/services/tag-cloud.json tag-cloud.html
<section class="ws-services bg-[var(--ws-services-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<!-- Section header -->
<div class="mb-14 max-w-xl">
<p class="mb-2 font-mono text-xs tracking-widest text-[var(--ws-services-text-muted)] uppercase">What we do</p>
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-services-text)] sm:text-4xl">
Services that move you forward
</h2>
<p class="mt-3 text-base text-[var(--ws-services-text-soft)]">
From strategy to shipping — choose what you need, combine freely.
</p>
</div>
<!-- Tag cloud / pill navigation -->
<div class="flex flex-wrap gap-3" role="list" aria-label="Service areas">
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-violet-500" aria-hidden="true"></span>
Brand Strategy
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-sky-500" aria-hidden="true"></span>
UI / UX Design
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
Web Development
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-amber-500" aria-hidden="true"></span>
Motion Design
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-rose-500" aria-hidden="true"></span>
Content Creation
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-fuchsia-500" aria-hidden="true"></span>
Design Systems
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-teal-500" aria-hidden="true"></span>
SEO & Analytics
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-orange-500" aria-hidden="true"></span>
Performance Audit
</a>
<a href="#" role="listitem"
class="group inline-flex items-center gap-2 rounded-full border border-[var(--ws-services-pill-border)] bg-[var(--ws-services-pill-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-services-pill-text)] transition hover:border-[var(--ws-services-pill-border-hover)] hover:bg-[var(--ws-services-pill-bg-hover)] hover:text-[var(--ws-services-text)]">
<span class="h-2 w-2 rounded-full bg-indigo-500" aria-hidden="true"></span>
Consulting
</a>
</div>
<!-- Footer: CTA link -->
<div class="mt-12 flex items-center gap-3">
<div class="h-px flex-1 bg-[var(--ws-services-divider)]"></div>
<a href="#"
class="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--ws-services-link)] transition hover:text-[var(--ws-services-text)]">
See all services
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
servicespillstagsnavigationagencycloudlist
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Mono uppercase label above the heading. |
| heading | Yes | Section headline. |
| subtext | No | Supporting copy. |
| pills | Yes | Pill links — each has a colored dot indicator and label. |
| footer-link | No | "See all services" link at the bottom with a divider line. |
A flat list of service areas rendered as pill-shaped links. Each pill has a small colored dot (decorative, hardcoded per service type) and a text label. The pills wrap naturally on smaller viewports.
The role="list" / role="listitem" pattern restores list semantics that Tailwind’s CSS reset removes on list-style: none elements.
Without colored dots
<a href="#" role="listitem"
class="inline-flex rounded-full border px-5 py-2.5 text-sm font-medium ...">
Web Development
</a>