filter pills industry sectors segments servicenow itsm enterprise branchen horizontal icons industry sectors filter pills Automotive Banking Healthcare Technology Telecom enterprise icons industry segment filter bar with icons sector navigation pills for enterprise SaaS ServiceNow-style Branchen filter strip
Audience Filter Industry
Fetch pattern JSON:
curl https://webspire.de/patterns/audience-filter/industry.json industry.html
<div class="ws-audience-filter bg-[var(--ws-audience-filter-bg)] py-10">
<div class="mx-auto max-w-5xl px-6">
<!-- Heading -->
<h2 class="mb-6 text-center text-xl font-bold text-[var(--ws-audience-filter-label)] sm:text-2xl">
Eine Plattform für alle Branchen
</h2>
<!-- Industry pills -->
<div class="flex flex-wrap justify-center gap-2" role="group" aria-label="Branche auswählen">
<a href="#automotive"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)] aria-[current=true]:border-[var(--ws-color-primary)] aria-[current=true]:bg-[var(--ws-color-primary-soft)] aria-[current=true]:text-[var(--ws-color-primary)]"
aria-current="true">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M13 16V6a1 1 0 00-1-1H5a1 1 0 00-1 1v10l2 2h7l2-2zM9 6l2-3h8l2 3v10h-3"/></svg>
Automobilindustrie
</a>
<a href="#banking"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10l9-7 9 7v11a1 1 0 01-1 1H4a1 1 0 01-1-1V10z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 21V12h6v9"/></svg>
Bankwesen
</a>
<a href="#consumer"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
Konsumgüter
</a>
<a href="#government"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18M3 10h18M3 7l9-4 9 4M4 10h1v11H4zM9 10h1v11H9zm5 0h1v11h-1zm5 0h1v11h-1z"/></svg>
Behörden
</a>
<a href="#healthcare"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
Gesundheitswesen
</a>
<a href="#itsm"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
IT-Dienstleister
</a>
<a href="#insurance"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" 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>
Versicherung
</a>
<a href="#lifesciences"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
Life Sciences
</a>
<a href="#nonprofit"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
Gemeinnützige Org.
</a>
<a href="#tech"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18"/></svg>
Technologie
</a>
<a href="#telecom"
class="flex items-center gap-1.5 rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.14 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/></svg>
Telekommunikation
</a>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
filterpillsindustrysectorssegmentsservicenowitsmenterprisebranchenhorizontalicons
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Centered section heading above the pill row. |
| pills | Yes | Industry pill links with inline icon and sector name. Use aria-current="true" on the active one. |
Industry segment pill strip. Centered layout with 11 sector pills, each carrying a small inline icon. Wraps on mobile — no scroll needed. Sits naturally between a hero and a solution or feature grid.
Inspired by ServiceNow’s “Eine Plattform für alle Branchen” section. Replace sector labels, icons, and hrefs with your own industry set — keep the aria-current pattern for accessible active-state indication.