Browser Support Compact

Fetch pattern JSON: curl https://webspire.de/patterns/browser-support/compact.json

compact.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">Works Everywhere</h2>
    </div>
    <div class="mt-12 flex flex-wrap items-center justify-center gap-6 rounded-lg border border-[var(--ws-browser-support-border)] bg-[var(--ws-browser-support-bg)] px-8 py-5">
      <div class="flex items-center gap-2" aria-label="Chrome supported">
        <span class="text-xl" aria-hidden="true">&#x1F310;</span>
        <span class="text-sm font-medium text-[var(--ws-browser-support-text)]">Chrome</span>
        <span class="text-emerald-500" aria-hidden="true">&#x2713;</span>
      </div>
      <div class="hidden h-5 w-px bg-[var(--ws-browser-support-border)] sm:block" aria-hidden="true"></div>
      <div class="flex items-center gap-2" aria-label="Firefox supported">
        <span class="text-xl" aria-hidden="true">&#x1F525;</span>
        <span class="text-sm font-medium text-[var(--ws-browser-support-text)]">Firefox</span>
        <span class="text-emerald-500" aria-hidden="true">&#x2713;</span>
      </div>
      <div class="hidden h-5 w-px bg-[var(--ws-browser-support-border)] sm:block" aria-hidden="true"></div>
      <div class="flex items-center gap-2" aria-label="Safari supported">
        <span class="text-xl" aria-hidden="true">&#x1F9ED;</span>
        <span class="text-sm font-medium text-[var(--ws-browser-support-text)]">Safari</span>
        <span class="text-emerald-500" aria-hidden="true">&#x2713;</span>
      </div>
      <div class="hidden h-5 w-px bg-[var(--ws-browser-support-border)] sm:block" aria-hidden="true"></div>
      <div class="flex items-center gap-2" aria-label="Edge supported">
        <span class="text-xl" aria-hidden="true">&#x1FA9F;</span>
        <span class="text-sm font-medium text-[var(--ws-browser-support-text)]">Edge</span>
        <span class="text-emerald-500" aria-hidden="true">&#x2713;</span>
      </div>
    </div>
  </div>
</section>

Details

Family

browser-support

Tier

enhanced

Kind

component

Extends

browser-support/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

browser-supportcompactinlineiconscheckmarksminimal

Slots

Name	Required	Description
heading	No	Section title and subtitle.
browsers	Yes	Inline browser items with icon and checkmark.

Minimal single-row variant of the browser support display. Shows browser icons with checkmarks in a compact inline layout, ideal for tight spaces like sidebars or footers.