open-source github stars community transparency stats open-source github stars contributors issues community transparency open source CTA with GitHub stats community trust section with star counter
CTA Open Source
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/open-source.json open-source.html
<section class="ws-cta bg-[var(--ws-cta-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="overflow-hidden rounded-2xl border border-[var(--ws-cta-border)]">
<div class="grid md:grid-cols-2">
<!-- Left: Copy -->
<div class="p-10">
<div class="mb-4 inline-flex items-center gap-2 rounded-full border border-[var(--ws-cta-border)] px-3 py-1.5 text-xs font-semibold text-[var(--ws-cta-text)]">
<svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
</svg>
Open Source
</div>
<h2 class="mb-4 text-3xl font-bold tracking-tight text-[var(--ws-cta-text)]">
Built in public, for everyone
</h2>
<p class="mb-8 text-[var(--ws-cta-text-soft)]">
Every line of code is open. Audit it, fork it, contribute to it. We believe great software is built with the community.
</p>
<a href="#" class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-cta-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-cta-action-text)] transition hover:bg-[var(--ws-cta-action-bg-hover)]">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
</svg>
Star on GitHub
</a>
</div>
<!-- Right: Stats -->
<div class="border-t border-[var(--ws-cta-border)] bg-[var(--ws-cta-bg)] p-10 md:border-l md:border-t-0">
<dl class="space-y-8">
<div>
<dt class="text-sm font-medium uppercase tracking-widest text-[var(--ws-cta-text-soft)]">GitHub Stars</dt>
<dd class="mt-1 text-5xl font-bold tabular-nums text-[var(--ws-cta-text)]">
42,000<span class="text-2xl text-[var(--ws-cta-action-bg)]">+</span>
</dd>
</div>
<div>
<dt class="text-sm font-medium uppercase tracking-widest text-[var(--ws-cta-text-soft)]">Open Issues</dt>
<dd class="mt-1 text-5xl font-bold tabular-nums text-[var(--ws-cta-text)]">1,240</dd>
</div>
<div>
<dt class="text-sm font-medium uppercase tracking-widest text-[var(--ws-cta-text-soft)]">Contributors</dt>
<dd class="mt-1 text-5xl font-bold tabular-nums text-[var(--ws-cta-text)]">
280<span class="text-2xl text-[var(--ws-cta-action-bg)]">+</span>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
open-sourcegithubstarscommunitytransparencystats
Slots
| Name | Required | Description |
|---|---|---|
| badge | No | Label-Badge oben links (z. B. "Open Source"). |
| heading | Yes | Hauptüberschrift des CTA-Blocks. |
| description | Yes | Beschreibungstext zur Open-Source-Philosophie. |
| cta-button | Yes | Primärer CTA-Button (z. B. "Star on GitHub"). |
| stats | Yes | Drei Statistiken (Stars, Issues, Contributors) als Definition List. |
Open-Source-CTA-Sektion in zweigeteiltem Card-Layout: Links Überschrift, Beschreibungstext und GitHub-CTA-Button; rechts drei prominente Stats (Stars, Issues, Contributors). Responsiv: auf Mobile Border-Trennung horizontal, auf md vertikal.