filter pills audience segments navigation adobe creative-cloud personas horizontal audience filter segment pills personas navigation creative cloud adobe horizontal bar audience segment filter bar persona selector pills below hero Adobe-style segment navigation
Audience Filter Base
Fetch pattern JSON:
curl https://webspire.de/patterns/audience-filter/base.json base.html
<div class="ws-audience-filter bg-[var(--ws-audience-filter-bg)] py-4">
<div class="mx-auto max-w-5xl px-6">
<div class="flex flex-wrap items-center gap-2" role="group" aria-label="Audience segment filter">
<!-- Label -->
<span class="shrink-0 text-sm font-semibold text-[var(--ws-audience-filter-label)]">
Creative Cloud für:
</span>
<!-- Pills -->
<a href="#individuals"
class="rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-1.5 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">
Einzelpersonen
</a>
<a href="#students"
class="rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
Schüler & Studierende
</a>
<a href="#photography"
class="rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
Fotografierende
</a>
<a href="#business"
class="rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
Unternehmen
</a>
<a href="#stock"
class="rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
Adobe Stock
</a>
<a href="#deals"
class="rounded-full border border-[var(--ws-audience-filter-pill-border)] bg-[var(--ws-audience-filter-pill-bg)] px-4 py-1.5 text-sm font-medium text-[var(--ws-audience-filter-pill-text)] transition hover:border-[var(--ws-color-primary)] hover:text-[var(--ws-color-primary)]">
Sonderangebote
</a>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
filterpillsaudiencesegmentsnavigationadobecreative-cloudpersonashorizontal
Slots
| Name | Required | Description |
|---|---|---|
| label | No | Short label before the pills (e.g. "Creative Cloud für:"). |
| pills | Yes | Anchor pills linking to segment sections. Use aria-current="true" on the active one. |
Audience segmentation pill bar. Sits between hero and content grid — lets visitors self-select their segment (Individuals, Students, Business, etc.) and jump to the relevant section.
Inspired by Adobe Creative Cloud’s homepage filter row. No JavaScript required — pure anchor links.