School of Gains · Presented by PaperGains

Carousel dots

Square arrows at each end, dots in the middle with the active dot as a wider pill (Discord purple for Headlines, green elsewhere), and a "2 / 10" counter in the card header.

nav

Headlines2 / 10

View HTML

<div class="sog-card" style="max-width:380px"><div style="display:flex;justify-content:space-between;margin-bottom:40px"><span class="sog-label-sm sog-label-sm--amber">Headlines</span><span class="sog-count">2 / 10</span></div>
<div class="sog-carousel-nav"><button class="sog-arrow" aria-label="Previous">‹</button><div class="sog-dots"><i></i><i class="is-active"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><button class="sog-arrow" aria-label="Next">›</button></div></div>
<div class="sog-dots sog-dots--green" style="margin-top:16px"><i class="is-active"></i><i></i><i></i></div>