analytics pages ranking top-pages traffic dashboard widget top pages page views ranking traffic breakdown popular pages show top pages list most visited pages display page rankings
Analytics Widget Top Pages
Fetch pattern JSON:
curl https://webspire.de/patterns/analytics-widget/top-pages.json top-pages.html
<section class="ws-analytics-widget bg-[var(--ws-analytics-widget-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-sm overflow-hidden rounded-2xl border border-[var(--ws-analytics-widget-border)] bg-[var(--ws-analytics-widget-bg)] shadow-md">
<div class="px-6 pt-6 pb-4">
<div class="flex items-center justify-between">
<p class="text-sm font-semibold text-[var(--ws-analytics-widget-text)]">Top Pages</p>
<span class="text-xs text-[var(--ws-analytics-widget-text-muted)]">This week</span>
</div>
</div>
<div class="px-6 pb-6">
<ul class="space-y-3" role="list">
<li class="flex items-center gap-3">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ws-analytics-widget-accent)]/10 text-xs font-bold text-[var(--ws-analytics-widget-accent)]">1</span>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-analytics-widget-text)]">/home</p>
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-[var(--ws-analytics-widget-border)]">
<div class="h-full rounded-full bg-[var(--ws-analytics-widget-accent)]" style="width: 100%"></div>
</div>
</div>
<div class="shrink-0 text-right">
<span class="text-sm font-semibold text-[var(--ws-analytics-widget-text)]">4,821</span>
<p class="text-[10px] text-[var(--ws-analytics-widget-positive)]">↑ 8%</p>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ws-analytics-widget-accent)]/10 text-xs font-bold text-[var(--ws-analytics-widget-accent)]">2</span>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-analytics-widget-text)]">/pricing</p>
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-[var(--ws-analytics-widget-border)]">
<div class="h-full rounded-full bg-[var(--ws-analytics-widget-accent)]" style="width: 72%"></div>
</div>
</div>
<div class="shrink-0 text-right">
<span class="text-sm font-semibold text-[var(--ws-analytics-widget-text)]">3,472</span>
<p class="text-[10px] text-[var(--ws-analytics-widget-positive)]">↑ 14%</p>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ws-analytics-widget-accent)]/10 text-xs font-bold text-[var(--ws-analytics-widget-accent)]">3</span>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-analytics-widget-text)]">/blog/getting-started</p>
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-[var(--ws-analytics-widget-border)]">
<div class="h-full rounded-full bg-[var(--ws-analytics-widget-accent)]" style="width: 48%"></div>
</div>
</div>
<div class="shrink-0 text-right">
<span class="text-sm font-semibold text-[var(--ws-analytics-widget-text)]">2,314</span>
<p class="text-[10px] text-[var(--ws-analytics-widget-positive)]">↑ 22%</p>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ws-analytics-widget-accent)]/10 text-xs font-bold text-[var(--ws-analytics-widget-accent)]">4</span>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-analytics-widget-text)]">/docs</p>
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-[var(--ws-analytics-widget-border)]">
<div class="h-full rounded-full bg-[var(--ws-analytics-widget-accent)]" style="width: 35%"></div>
</div>
</div>
<div class="shrink-0 text-right">
<span class="text-sm font-semibold text-[var(--ws-analytics-widget-text)]">1,687</span>
<p class="text-[10px] text-[var(--ws-analytics-widget-text-muted)]">↓ 3%</p>
</div>
</li>
<li class="flex items-center gap-3">
<span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--ws-analytics-widget-accent)]/10 text-xs font-bold text-[var(--ws-analytics-widget-accent)]">5</span>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-[var(--ws-analytics-widget-text)]">/contact</p>
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-[var(--ws-analytics-widget-border)]">
<div class="h-full rounded-full bg-[var(--ws-analytics-widget-accent)]" style="width: 22%"></div>
</div>
</div>
<div class="shrink-0 text-right">
<span class="text-sm font-semibold text-[var(--ws-analytics-widget-text)]">1,063</span>
<p class="text-[10px] text-[var(--ws-analytics-widget-positive)]">↑ 5%</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
analyticspagesrankingtop-pagestrafficdashboardwidget
A ranked list widget showing the five most-visited pages with view counts, proportional progress bars, and directional change indicators. Each row features a numbered rank badge, a truncated page path, and a mini bar reflecting relative traffic. Perfect for content-performance dashboards and SEO overviews.