🔒 Premium Site Page

Stat Card With 7-Day Chart — Weekly Summary Module

A clean stat card that pairs a single hero number with a seven-bar weekly chart and per-day tooltip, designed for at-a-glance weekly summaries; pilots a trail crew distance tracker but the pattern fits any program that publishes a weekly recap number.

Best for: Dashboards, member portals, and homepage modules where one weekly number plus a tiny trend chart needs to land instantly without overwhelming the layout.

Live preview — scroll inside the frame to see the full page.

What it does

  • Hero stat number — one large, confident weekly total sits at the top of the card and reads as the headline
  • Seven-bar weekly chart — a compact bar chart shows each day of the past seven so the visitor sees the shape of the week at a glance
  • Per-day tooltip — pointing at any bar reveals that day's number and label without cluttering the default layout
  • Subtle trend cue — a short caption or small arrow shows whether the week is up or down versus the previous one
  • Compact, embeddable footprint — the card is sized to live inside a dashboard grid or homepage stat strip without breaking the layout
  • Quiet, light-mode register — clean background, soft gridlines, and modern type make the card feel premium rather than busy

Best use cases

  • Fitness programs — weekly distance, workout count, or active minutes for a training cohort
  • Habit and productivity coaches — weekly streak counts, deep-work hours, or sessions completed
  • SaaS customer dashboards — weekly active sessions, ticket volume, or feature usage summaries
  • Membership communities — weekly engagement numbers like posts, replies, or check-ins
  • Course creators — weekly lesson completions or active learners for a member dashboard
  • Wellness and nutrition programs — weekly logged meals, water intake, or check-in counts

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

  • Colors — slots for card background, hero number text, chart bar fill, hover highlight, label text, and a single accent used on the trend indicator
  • Fonts — two roles: a strong display font for the hero number and a clean body font for day labels and tooltips
  • Copy — card title, hero number label (e.g. 'Total miles this week'), seven day labels, tooltip format, and an optional comparison caption
  • Images — minimal; an optional small icon or logo lock-up sits alongside the title
  • Behavior — tune bar animation on first view, tooltip behavior on hover vs tap, and whether the comparison caption updates dynamically

How remixing works

From "swiped it" to "shipped it" in three steps.

01

Pick a remix

Browse the library, find one that fits — like this one.

02

Run it through your DNA

The remix skill uses your CCOS DNA to swap colors, fonts, copy, and structure so it lands as yours.

03

Ship it

Paste the finished HTML into Thinkific, Kajabi, WordPress, or any platform that takes embed code.