Open demo

CSS code

HTML 
<div class="dk stack">
<div><span class="lbl">Trend arrows</span>
<dl class="kpis">
<div><dt>Monthly revenue</dt><dd><span class="val">€48,210</span><span class="trend up good"><span class="sr-only">Up</span>12.4%</span><small>vs September</small></dd></div>
<div><dt>Customer churn</dt><dd><span class="val">2.1%</span><span class="trend down good"><span class="sr-only">Down</span>0.3 pts</span><small>vs September</small></dd></div>
<div><dt>First reply time</dt><dd><span class="val">3h 40m</span><span class="trend up bad"><span class="sr-only">Up</span>18%</span><small>vs September</small></dd></div>
</dl></div>
<div class="two">
<div><span class="lbl">Settings rows</span>
<ul class="menu">
<li><a href="#">Account<span>[email protected]</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
<li><a href="#">Notifications<span>Mentions only</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
<li><a href="#">Privacy<span>3 apps connected</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
<li><a href="#">Billing<span>Pro, yearly</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
</ul></div>
<div class="stack">
<div><span class="lbl">Glowing next link</span>
<a class="glow" href="#">Next lesson: Variables<i aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></i></a></div>
<div><span class="lbl">Gradient ring controls</span>
<div class="row" role="group" aria-label="Release notes">
<button type="button" class="ring prev" aria-label="Previous release"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button>
<button type="button" class="ring next" aria-label="Next release"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button>
</div></div>
<div><span class="lbl">Back to top</span>
<a class="totop" href="#"><i aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg></i>Back to top</a></div>
</div>
</div>
</div>
CSS 
/* Arrows for dark interfaces. Colours were picked for the near-black page: text and arrows stay above 4.5:1,
   and trend arrows always come with a written direction for screen readers. */
.kpis,.menu,.glow,.ring,.totop{--bg:#0d0c16;--surface:#17152a;--edge:#2c2948;--text:#ecebf5;--muted:#a19fbd;--accent:#8b7dff;--up:#4ade80;--down:#f87171}
.dk svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 1. Trend arrows */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.kpis div{padding:18px 18px 16px;border:1px solid var(--edge);border-radius:14px;background:var(--surface)}
.kpis dt{font-size:.8rem;color:var(--muted)}
.kpis dd{margin:0}
.kpis .val{display:block;margin:6px 0 10px;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trend{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;font-size:.8rem;font-weight:650}
.trend::before{content:"";width:9px;height:8px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.trend.down::before{rotate:180deg}
.trend.good{color:var(--up);background:rgba(74,222,128,.12)}
.trend.bad{color:var(--down);background:rgba(248,113,113,.12)}
.kpis small{margin-left:4px;font-size:.76rem;color:var(--muted)}
/* 2. Settings rows with sliding chevrons */
.menu{margin:0;padding:6px;list-style:none;border:1px solid var(--edge);border-radius:16px;background:var(--surface)}
.menu a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:11px;color:var(--text);font-size:.92rem;text-decoration:none;transition:background-color .2s}
.menu a span{margin-left:auto;font-size:.82rem;color:var(--muted)}
.menu svg{color:var(--muted)}
.menu a:hover{background:#221f3b}
.menu a:hover svg,.menu a:focus-visible svg{transform:translateX(3px);color:var(--accent)}
.menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* 3. Glowing next button */
.glow{display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;border:1px solid #4b3fb8;border-radius:999px;background:#1e1a3d;color:var(--text);
  font:inherit;font-size:.92rem;font-weight:650;text-decoration:none;box-shadow:0 0 0 0 rgba(139,125,255,0);transition:box-shadow .25s,border-color .25s}
.glow i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--bg)}
.glow:hover,.glow:focus-visible{border-color:var(--accent);box-shadow:0 0 24px -2px rgba(139,125,255,.55)}
.glow:hover svg,.glow:focus-visible svg{transform:translateX(3px)}
.glow:focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* 4. Gradient-ring prev / next */
.ring{display:inline-grid;place-items:center;width:46px;height:46px;padding:0;border:1.5px solid transparent;border-radius:50%;cursor:pointer;color:var(--text);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,#8b7dff,#38bdf8) border-box;transition:color .2s}
.ring:hover{color:var(--accent)}
.ring:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.ring.prev:hover svg{transform:translateX(-3px)}.ring.next:hover svg{transform:translateX(3px)}
/* 5. Back to top */
.totop{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border:1px solid var(--edge);border-radius:999px;background:var(--surface);
  color:var(--muted);font-size:.84rem;font-weight:600;text-decoration:none;transition:color .2s,border-color .2s}
.totop i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,#8b7dff,#38bdf8);color:var(--bg)}
.totop:hover,.totop:focus-visible{color:var(--text);border-color:#4b3fb8}
.totop:hover svg,.totop:focus-visible svg{transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media (max-width:700px){.kpis{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dk svg,.menu a,.glow,.ring,.totop{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="dk d-flex flex-column gap-5">
<div><span class="lbl">Trend arrows</span>
<dl class="kpis d-grid gap-2 gap-md-3 mb-0">
<div class="card card-body"><dt>Monthly revenue</dt><dd class="mb-0"><span class="val d-block fw-bold">€48,210</span><span class="trend up good badge rounded-pill d-inline-flex align-items-center"><span class="visually-hidden">Up</span>12.4%</span><small class="ms-1">vs September</small></dd></div>
<div class="card card-body"><dt>Customer churn</dt><dd class="mb-0"><span class="val d-block fw-bold">2.1%</span><span class="trend down good badge rounded-pill d-inline-flex align-items-center"><span class="visually-hidden">Down</span>0.3 pts</span><small class="ms-1">vs September</small></dd></div>
<div class="card card-body"><dt>First reply time</dt><dd class="mb-0"><span class="val d-block fw-bold">3h 40m</span><span class="trend up bad badge rounded-pill d-inline-flex align-items-center"><span class="visually-hidden">Up</span>18%</span><small class="ms-1">vs September</small></dd></div>
</dl></div>
<div class="row gx-4 gy-5">
<div class="col-md-6"><span class="lbl">Settings rows</span>
<div class="menu list-group">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2">Account<span class="ms-auto">[email protected]</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2">Notifications<span class="ms-auto">Mentions only</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2">Privacy<span class="ms-auto">3 apps connected</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2">Billing<span class="ms-auto">Pro, yearly</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
</div></div>
<div class="col-md-6 d-flex flex-column gap-4">
<div><span class="lbl">Glowing next link</span>
<a class="glow btn rounded-pill d-inline-flex align-items-center gap-2" href="#">Next lesson: Variables<i class="d-grid rounded-circle" aria-hidden="true"><svg class="m-auto" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></i></a></div>
<div><span class="lbl">Gradient ring controls</span>
<div class="d-flex gap-3" role="group" aria-label="Release notes">
<button type="button" class="ring prev btn rounded-circle d-grid" aria-label="Previous release"><svg class="m-auto" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button>
<button type="button" class="ring next btn rounded-circle d-grid" aria-label="Next release"><svg class="m-auto" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button>
</div></div>
<div><span class="lbl">Back to top</span>
<a class="totop btn rounded-pill d-inline-flex align-items-center gap-2" href="#"><i class="d-grid rounded-circle" aria-hidden="true"><svg class="m-auto" viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg></i>Back to top</a></div>
</div>
</div>
</div>
CSS 
/* Bootstrap in data-bs-theme="dark": .card, .list-group, .badge and .btn recoloured through --bs-* variables.
   Trend arrows are a clip-path triangle plus a visually hidden direction word. */
.dk{--bg:#0d0c16;--surface:#17152a;--edge:#2c2948;--text:#ecebf5;--muted:#a19fbd;--accent:#8b7dff;--up:#4ade80;--down:#f87171;
  --bs-body-color:var(--text);--bs-border-color:var(--edge)}
.dk svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.dk .card{--bs-card-bg:var(--surface);--bs-card-border-color:var(--edge);--bs-card-border-radius:14px;--bs-card-spacer-x:18px;--bs-card-spacer-y:18px}
/* 1. Trend arrows */
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767.98px){.kpis{grid-template-columns:1fr}}
.kpis dt{font-size:.8rem;font-weight:400;color:var(--muted)}
.kpis .val{margin:6px 0 10px;font-size:1.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.trend{--bs-badge-padding-x:9px;--bs-badge-padding-y:4px;--bs-badge-font-size:.8rem;--bs-badge-font-weight:650;gap:6px;padding-left:7px}
.trend::before{content:"";width:9px;height:8px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.trend.down::before{rotate:180deg}
.trend.good{color:var(--up);background:rgba(74,222,128,.12)}
.trend.bad{color:var(--down);background:rgba(248,113,113,.12)}
.kpis small{font-size:.76rem;color:var(--muted)}
/* 2. Settings rows with sliding chevrons */
.menu{--bs-list-group-bg:transparent;--bs-list-group-border-width:0;--bs-list-group-color:var(--text);--bs-list-group-action-color:var(--text);
  --bs-list-group-action-hover-color:var(--text);--bs-list-group-action-hover-bg:#221f3b;--bs-list-group-action-active-bg:#221f3b;
  --bs-list-group-action-active-color:var(--text);--bs-list-group-item-padding-x:12px;--bs-list-group-item-padding-y:12px;
  padding:6px;border:1px solid var(--edge);border-radius:16px;background:var(--surface)}
.menu .list-group-item{border-radius:11px;font-size:.92rem;transition:background-color .2s}
.menu .list-group-item span{font-size:.82rem;color:var(--muted)}
.menu svg{color:var(--muted)}
.menu .list-group-item:hover svg,.menu .list-group-item:focus-visible svg{transform:translateX(3px);color:var(--accent)}
.menu .list-group-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;z-index:2}
/* 3. Glowing next button */
.glow{--bs-btn-color:var(--text);--bs-btn-bg:#1e1a3d;--bs-btn-border-color:#4b3fb8;--bs-btn-hover-color:var(--text);--bs-btn-hover-bg:#1e1a3d;
  --bs-btn-hover-border-color:var(--accent);--bs-btn-active-bg:#1e1a3d;--bs-btn-active-color:var(--text);--bs-btn-active-border-color:var(--accent);
  --bs-btn-font-size:.92rem;--bs-btn-font-weight:650;padding:6px 6px 6px 20px;transition:box-shadow .25s,border-color .25s}
.glow i{width:34px;height:34px;background:var(--accent);color:var(--bg)}
.glow:hover,.glow:focus-visible{box-shadow:0 0 24px -2px rgba(139,125,255,.55)}
.glow:hover svg,.glow:focus-visible svg{transform:translateX(3px)}
.glow:focus-visible{outline:2px solid var(--text);outline-offset:3px}
/* 4. Gradient-ring prev / next */
.ring{--bs-btn-color:var(--text);--bs-btn-hover-color:var(--accent);--bs-btn-active-color:var(--accent);--bs-btn-border-width:1.5px;
  width:46px;height:46px;padding:0;border-color:transparent!important;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(140deg,#8b7dff,#38bdf8) border-box!important;transition:color .2s}
.ring:focus-visible{outline:2px solid var(--text);outline-offset:3px;box-shadow:none}
.ring.prev:hover svg{transform:translateX(-3px)}.ring.next:hover svg{transform:translateX(3px)}
/* 5. Back to top */
.totop{--bs-btn-color:var(--muted);--bs-btn-bg:var(--surface);--bs-btn-border-color:var(--edge);--bs-btn-hover-color:var(--text);
  --bs-btn-hover-bg:var(--surface);--bs-btn-hover-border-color:#4b3fb8;--bs-btn-active-bg:var(--surface);--bs-btn-active-color:var(--text);
  --bs-btn-font-size:.84rem;--bs-btn-font-weight:600;padding:8px 16px 8px 8px}
.totop i{width:32px;height:32px;background:linear-gradient(140deg,#8b7dff,#38bdf8);color:var(--bg)}
.totop:hover svg,.totop:focus-visible svg{transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid var(--text);outline-offset:3px;box-shadow:none}
@media (prefers-reduced-motion:reduce){.dk svg,.menu .list-group-item,.glow,.ring,.totop{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex flex-col gap-11">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-muted uppercase">Trend arrows</span>
<dl class="grid grid-cols-1 gap-3 md:grid-cols-3">
<div class="rounded-[14px] border border-edge bg-surface px-[18px] pt-[18px] pb-4"><dt class="text-[.8rem] text-muted">Monthly revenue</dt><dd><span class="mt-1.5 mb-2.5 block text-[1.6rem] font-bold tracking-[-.02em] tabular-nums">€48,210</span><span class="inline-flex items-center gap-1.5 rounded-full py-[3px] pr-[9px] pl-[7px] text-[.8rem] font-[650] text-up bg-up/12 before:h-2 before:w-[9px] before:bg-current before:content-[''] before:[clip-path:polygon(50%_0,100%_100%,0_100%)]"><span class="sr-only">Up</span>12.4%</span><small class="ml-1 text-[.76rem] text-muted">vs September</small></dd></div>
<div class="rounded-[14px] border border-edge bg-surface px-[18px] pt-[18px] pb-4"><dt class="text-[.8rem] text-muted">Customer churn</dt><dd><span class="mt-1.5 mb-2.5 block text-[1.6rem] font-bold tracking-[-.02em] tabular-nums">2.1%</span><span class="inline-flex items-center gap-1.5 rounded-full py-[3px] pr-[9px] pl-[7px] text-[.8rem] font-[650] text-up bg-up/12 before:h-2 before:w-[9px] before:bg-current before:content-[''] before:[clip-path:polygon(50%_0,100%_100%,0_100%)] before:rotate-180"><span class="sr-only">Down</span>0.3 pts</span><small class="ml-1 text-[.76rem] text-muted">vs September</small></dd></div>
<div class="rounded-[14px] border border-edge bg-surface px-[18px] pt-[18px] pb-4"><dt class="text-[.8rem] text-muted">First reply time</dt><dd><span class="mt-1.5 mb-2.5 block text-[1.6rem] font-bold tracking-[-.02em] tabular-nums">3h 40m</span><span class="inline-flex items-center gap-1.5 rounded-full py-[3px] pr-[9px] pl-[7px] text-[.8rem] font-[650] text-down bg-down/12 before:h-2 before:w-[9px] before:bg-current before:content-[''] before:[clip-path:polygon(50%_0,100%_100%,0_100%)]"><span class="sr-only">Up</span>18%</span><small class="ml-1 text-[.76rem] text-muted">vs September</small></dd></div>
</dl></div>
<div class="grid grid-cols-1 gap-x-7 gap-y-10 md:grid-cols-2">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-muted uppercase">Settings rows</span>
<ul class="rounded-2xl border border-edge bg-surface p-1.5">
<li><a href="#" class="group flex items-center gap-3 rounded-[11px] p-3 text-[.92rem] text-text transition-colors duration-200 hover:bg-[#221f3b] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none">Account<span class="ml-auto text-[.82rem] text-muted">[email protected]</span><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none text-muted group-hover:translate-x-[3px] group-hover:text-accent group-focus-visible:translate-x-[3px] group-focus-visible:text-accent" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
<li><a href="#" class="group flex items-center gap-3 rounded-[11px] p-3 text-[.92rem] text-text transition-colors duration-200 hover:bg-[#221f3b] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none">Notifications<span class="ml-auto text-[.82rem] text-muted">Mentions only</span><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none text-muted group-hover:translate-x-[3px] group-hover:text-accent group-focus-visible:translate-x-[3px] group-focus-visible:text-accent" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
<li><a href="#" class="group flex items-center gap-3 rounded-[11px] p-3 text-[.92rem] text-text transition-colors duration-200 hover:bg-[#221f3b] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none">Privacy<span class="ml-auto text-[.82rem] text-muted">3 apps connected</span><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none text-muted group-hover:translate-x-[3px] group-hover:text-accent group-focus-visible:translate-x-[3px] group-focus-visible:text-accent" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
<li><a href="#" class="group flex items-center gap-3 rounded-[11px] p-3 text-[.92rem] text-text transition-colors duration-200 hover:bg-[#221f3b] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none">Billing<span class="ml-auto text-[.82rem] text-muted">Pro, yearly</span><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none text-muted group-hover:translate-x-[3px] group-hover:text-accent group-focus-visible:translate-x-[3px] group-focus-visible:text-accent" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a></li>
</ul></div>
<div class="flex flex-col gap-7">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-muted uppercase">Glowing next link</span>
<a class="group inline-flex items-center gap-3 rounded-full border border-[#4b3fb8] bg-[#1e1a3d] py-1.5 pr-1.5 pl-5 text-[.92rem] font-[650] text-text transition-[box-shadow,border-color] duration-[250ms] hover:border-accent hover:shadow-[0_0_24px_-2px_rgba(139,125,255,.55)] focus-visible:border-accent focus-visible:shadow-[0_0_24px_-2px_rgba(139,125,255,.55)] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-text motion-reduce:transition-none" href="#">Next lesson: Variables<span class="grid size-[34px] place-items-center rounded-full bg-accent text-bg" aria-hidden="true"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none group-hover:translate-x-[3px] group-focus-visible:translate-x-[3px]" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-muted uppercase">Gradient ring controls</span>
<div class="flex flex-wrap items-center gap-[18px]" role="group" aria-label="Release notes">
<button type="button" class="group grid size-[46px] cursor-pointer place-items-center rounded-full border-[1.5px] border-transparent text-text transition-colors duration-200 [background:linear-gradient(var(--color-surface),var(--color-surface))_padding-box,linear-gradient(140deg,#8b7dff,#38bdf8)_border-box] hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-text motion-reduce:transition-none" aria-label="Previous release"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none group-hover:-translate-x-[3px]" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button>
<button type="button" class="group grid size-[46px] cursor-pointer place-items-center rounded-full border-[1.5px] border-transparent text-text transition-colors duration-200 [background:linear-gradient(var(--color-surface),var(--color-surface))_padding-box,linear-gradient(140deg,#8b7dff,#38bdf8)_border-box] hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-text motion-reduce:transition-none" aria-label="Next release"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none group-hover:translate-x-[3px]" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button>
</div></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-muted uppercase">Back to top</span>
<a class="group inline-flex items-center gap-2.5 rounded-full border border-edge bg-surface py-2 pr-4 pl-2 text-[.84rem] font-semibold text-muted transition-[color,border-color] duration-200 hover:border-[#4b3fb8] hover:text-text focus-visible:border-[#4b3fb8] focus-visible:text-text focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-text motion-reduce:transition-none" href="#"><span class="grid size-8 place-items-center rounded-full bg-linear-[140deg] from-[#8b7dff] to-[#38bdf8] text-bg" aria-hidden="true"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[2.2] transition-transform duration-[250ms] ease-[cubic-bezier(.3,.7,.4,1)] motion-reduce:transition-none group-hover:-translate-y-[3px] group-focus-visible:-translate-y-[3px]" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg></span>Back to top</a></div>
</div>
</div>
</div>
CSS 
/* Dark palette. Trend triangles are a before: pseudo-element with clip-path; the direction is sr-only text. */
@theme {
  --color-bg: #0d0c16;
  --color-surface: #17152a;
  --color-edge: #2c2948;
  --color-text: #ecebf5;
  --color-muted: #a19fbd;
  --color-accent: #8b7dff;
  --color-up: #4ade80;
  --color-down: #f87171;
}

About this set

Arrows for dark dashboards and apps, where thin grey arrows from a light theme tend to vanish. The trend arrows sit on three KPI tiles: a clip-path triangle in a tinted pill that points up or down, coloured by whether the change is good or bad rather than by its direction, so falling churn is green and a rising reply time is red. Each pill includes a visually hidden Up or Down, so the direction is not carried by colour or shape alone. The settings rows are a list of links with a value and a chevron that slides and turns violet on hover or focus. The glowing next link has an arrow chip and a soft violet glow on hover. The gradient ring controls are icon buttons whose border is a gradient drawn with two backgrounds and padding-box and border-box. The back-to-top button pairs an up arrow in a gradient circle with a label. Colours were chosen on a near-black page: body text, muted text and the trend colours all reach 4.5:1 on the tile surface. The Bootstrap version runs in data-bs-theme=”dark” with .card, .badge, .list-group and .btn.

What’s included

  • Trend arrows coloured by meaning, with a hidden Up or Down
  • Settings rows with sliding chevrons
  • Glowing next link and gradient ring icon buttons
  • Back-to-top button with a gradient arrow chip
  • Bootstrap version in data-bs-theme="dark"

Accessibility

Trend pills include visually hidden direction text, so the change is announced and is not shown by colour alone. Icon-only buttons have aria-label, and all arrows are aria-hidden. Every link and button shows a 2px light or violet focus outline, and all text meets 4.5:1 on its dark surface. Transitions are removed under prefers-reduced-motion.

Customise it

Edit --bg, --surface, --edge, --text, --muted, --accent, --up and --down on the components. In Bootstrap the same variables sit on .dk next to the --bs-card-*, --bs-list-group-* and --bs-btn-* variables; in Tailwind they are colours in @theme.