@use 'sprucecss/scss/spruce' as *;
.community-block {
padding-block: spacer-clamp('xl', 'xxl');
&__inner {
align-items: center;
display: grid;
gap: spacer-clamp('l', 'xl');
@include breakpoint('lg') {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
> * {
margin: 0 !important;
}
}
&__content {
display: flex;
flex-direction: column;
gap: spacer('l');
}
&__stats {
gap: spacer('m');
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
.number-card__data {
font-size: responsive-font-size(3rem, 30);
}
}
&__channels {
display: grid;
gap: spacer('s');
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
list-style: none;
margin: 0;
padding: 0;
li {
display: flex;
margin: 0;
}
> li {
margin-block: 0;
padding-block: 0;
}
}
&__channel {
--brand: #5865f2;
align-items: center;
background-color: color('surface');
border: config('border-width-base', $display) solid color('border');
border-radius: radius('lg');
color: color('muted');
display: flex;
font-size: config('font-size-sm', $typography);
gap: spacer('s');
inline-size: 100%;
padding: spacer('s') spacer('m');
text-decoration: none;
@include transition($property: 'border-color, box-shadow');
&--github {
--brand: #{color('heading')};
}
&:hover {
border-color: var(--brand);
box-shadow: 0 0 0 1px var(--brand);
}
strong {
color: color('heading');
display: block;
font-size: config('font-size-base', $typography);
}
}
&__brand {
block-size: 2rem;
color: var(--brand);
flex-shrink: 0;
inline-size: 2rem;
}
&__members {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: spacer('s');
p {
color: color('muted');
margin: 0;
}
}
}
<section class="community-block" aria-labelledby="community-title">
<div class="container">
<div class="community-block__inner">
<div class="community-block__content">
<header class="block-heading block-heading--start">
<p class="block-heading__eyebrow">Community</p>
<h2 class="block-heading__title" id="community-title">Built in the open, with 12,000 developers</h2>
<p class="block-heading__text">Ask questions, share what you build and help shape the roadmap.</p>
</header>
<ul class="number-card-list community-block__stats">
<li class="number-card">
<p class="number-card__data">
<span class="sr-only">12400+</span>
<span aria-hidden="true"><span data-countup="12400">12400</span>+</span>
</p>
<p class="number-card__caption">Members</p>
</li>
<li class="number-card">
<p class="number-card__data">
<span class="sr-only">860</span>
<span aria-hidden="true"><span data-countup="860">860</span></span>
</p>
<p class="number-card__caption">Contributors</p>
</li>
<li class="number-card">
<p class="number-card__data">
<span class="sr-only">98%</span>
<span aria-hidden="true"><span data-countup="98">98</span>%</span>
</p>
<p class="number-card__caption">Questions answered</p>
</li>
</ul>
<ul class="community-block__channels" role="list">
<li>
<a class="community-block__channel community-block__channel--discord" href="#">
<svg class="community-block__brand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
</svg>
<span><strong>Join the Discord</strong> Chat, help and weekly office hours</span>
</a>
</li>
<li>
<a class="community-block__channel community-block__channel--github" href="#">
<svg class="community-block__brand" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
<span><strong>Star on GitHub</strong> Issues, discussions and pull requests</span>
</a>
</li>
</ul>
<div class="community-block__members">
<ul class="avatar-group" role="list" aria-hidden="true">
<li><span class="avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="48" height="48" loading="lazy"></span></li>
<li><span class="avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="48" height="48" loading="lazy"></span></li>
<li><span class="avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="48" height="48" loading="lazy"></span></li>
<li><span class="avatar"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="48" height="48" loading="lazy"></span></li>
<li><span class="avatar"><img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="48" height="48" loading="lazy"></span></li>
<li><span class="avatar avatar--more">+12k</span></li>
</ul>
<p>Join the people who build with us every day.</p>
</div>
</div>
<section class="leaderboard" aria-labelledby="leaderboard-title">
<header class="leaderboard__header">
<h2 class="leaderboard__title" id="leaderboard-title">Top contributors</h2>
<p class="leaderboard__metric">Merged pull requests in 2026</p>
</header>
<ol class="leaderboard__list">
<li class="leaderboard__item leaderboard__item--top" style="--value: 100%;">
<span class="leaderboard__rank" aria-hidden="true">1</span>
<span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="40" height="40" loading="lazy"></span>
<span class="leaderboard__person">
<span class="leaderboard__name">Amelia Brooks</span>
<span class="leaderboard__team">Core team</span>
</span>
<span class="leaderboard__result">
<strong>148</strong>
<span class="leaderboard__change">–<span class="sr-only">No change</span></span>
</span>
<span class="leaderboard__bar" aria-hidden="true"></span>
</li>
<li class="leaderboard__item leaderboard__item--top" style="--value: 71%;">
<span class="leaderboard__rank" aria-hidden="true">2</span>
<span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="40" height="40" loading="lazy"></span>
<span class="leaderboard__person">
<span class="leaderboard__name">Noah Fischer</span>
<span class="leaderboard__team">Docs</span>
</span>
<span class="leaderboard__result">
<strong>105</strong>
<span class="leaderboard__change leaderboard__change--up">▲ 1<span class="sr-only"> places up</span></span>
</span>
<span class="leaderboard__bar" aria-hidden="true"></span>
</li>
<li class="leaderboard__item leaderboard__item--top" style="--value: 62%;">
<span class="leaderboard__rank" aria-hidden="true">3</span>
<span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="40" height="40" loading="lazy"></span>
<span class="leaderboard__person">
<span class="leaderboard__name">Priya Raman</span>
<span class="leaderboard__team">Components</span>
</span>
<span class="leaderboard__result">
<strong>92</strong>
<span class="leaderboard__change leaderboard__change--down">▼ 1<span class="sr-only"> places down</span></span>
</span>
<span class="leaderboard__bar" aria-hidden="true"></span>
</li>
<li class="leaderboard__item" style="--value: 44%;">
<span class="leaderboard__rank" aria-hidden="true">4</span>
<span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=96&h=96&q=70" alt="" width="40" height="40" loading="lazy"></span>
<span class="leaderboard__person">
<span class="leaderboard__name">Lucas Moreau</span>
<span class="leaderboard__team">Accessibility</span>
</span>
<span class="leaderboard__result">
<strong>65</strong>
<span class="leaderboard__change leaderboard__change--up">▲ 2<span class="sr-only"> places up</span></span>
</span>
<span class="leaderboard__bar" aria-hidden="true"></span>
</li>
</ol>
</section>
</div>
</div>
</section>
