browser-support compatibility browsers baseline status browser support compatibility chrome firefox safari edge baseline show browser compatibility matrix display which browsers are supported
Browser Support Base
Fetch pattern JSON:
curl https://webspire.de/patterns/browser-support/base.json base.html
<section class="ws-browser-support bg-[var(--ws-browser-support-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-browser-support-text)]">Compatibility</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-browser-support-text)] sm:text-4xl">Browser Support</h2>
</div>
<div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col items-center rounded-lg border border-[var(--ws-browser-support-border)] bg-[var(--ws-browser-support-bg)] p-6 text-center">
<span class="text-3xl" aria-hidden="true">🌐</span>
<p class="mt-3 text-lg font-semibold text-[var(--ws-browser-support-text)]">Chrome</p>
<p class="mt-1 text-sm text-[var(--ws-browser-support-text-soft)]">v120+</p>
<span class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600" aria-label="Fully supported">🟢 Supported</span>
</div>
<div class="flex flex-col items-center rounded-lg border border-[var(--ws-browser-support-border)] bg-[var(--ws-browser-support-bg)] p-6 text-center">
<span class="text-3xl" aria-hidden="true">🔥</span>
<p class="mt-3 text-lg font-semibold text-[var(--ws-browser-support-text)]">Firefox</p>
<p class="mt-1 text-sm text-[var(--ws-browser-support-text-soft)]">v121+</p>
<span class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600" aria-label="Fully supported">🟢 Supported</span>
</div>
<div class="flex flex-col items-center rounded-lg border border-[var(--ws-browser-support-border)] bg-[var(--ws-browser-support-bg)] p-6 text-center">
<span class="text-3xl" aria-hidden="true">🧭</span>
<p class="mt-3 text-lg font-semibold text-[var(--ws-browser-support-text)]">Safari</p>
<p class="mt-1 text-sm text-[var(--ws-browser-support-text-soft)]">v17.2+</p>
<span class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-amber-600" aria-label="Partially supported">🟡 Partial</span>
</div>
<div class="flex flex-col items-center rounded-lg border border-[var(--ws-browser-support-border)] bg-[var(--ws-browser-support-bg)] p-6 text-center">
<span class="text-3xl" aria-hidden="true">🪟</span>
<p class="mt-3 text-lg font-semibold text-[var(--ws-browser-support-text)]">Edge</p>
<p class="mt-1 text-sm text-[var(--ws-browser-support-text-soft)]">v120+</p>
<span class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600" aria-label="Fully supported">🟢 Supported</span>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
browser-supportcompatibilitybrowsersbaselinestatus
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| browsers | Yes | Array of browser items with name, version, and support status. |
Four-column browser support display with emoji status indicators, version numbers, and browser names. Responsive grid collapses to 2 columns on tablet and 1 on mobile.