Chart Card Base

Fetch pattern JSON: curl https://webspire.de/patterns/chart-card/base.json

base.html

<section class="ws-chart-card bg-[var(--ws-chart-card-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-md overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] shadow-md">
      <div class="flex items-center justify-between border-b border-[var(--ws-chart-card-border)] px-6 py-4">
        <div>
          <h3 class="text-lg font-semibold text-[var(--ws-chart-card-text)]">Overview</h3>
          <p class="text-sm text-[var(--ws-chart-card-text-soft)]">Last 7 days</p>
        </div>
        <span class="inline-flex items-center rounded-full border border-[var(--ws-chart-card-border)] px-2.5 py-0.5 text-xs font-medium text-[var(--ws-chart-card-text-soft)]">Weekly</span>
      </div>

      <div class="relative px-6 py-8">
        <div class="absolute inset-x-6 top-8 flex flex-col justify-between" style="height: calc(100% - 4rem)" aria-hidden="true">
          <div class="border-t border-[var(--ws-chart-card-border)]"></div>
          <div class="border-t border-[var(--ws-chart-card-border)]"></div>
          <div class="border-t border-[var(--ws-chart-card-border)]"></div>
          <div class="border-t border-[var(--ws-chart-card-border)]"></div>
        </div>

        <div class="relative flex h-40 items-end gap-3" role="img" aria-label="Bar chart showing weekly data">
          <div class="flex-1 rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 45%"></div>
          <div class="flex-1 rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 70%"></div>
          <div class="flex-1 rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 55%"></div>
          <div class="flex-1 rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 85%"></div>
          <div class="flex-1 rounded-t-md bg-[var(--ws-chart-card-accent)]" style="height: 60%"></div>
        </div>
      </div>

      <div class="border-t border-[var(--ws-chart-card-border)] px-6 py-4">
        <a href="#" class="text-sm font-semibold text-[var(--ws-chart-card-accent)] hover:underline">View details &rarr;</a>
      </div>
    </div>
  </div>
</section>

Details

Family

chart-card

Tier

base

Kind

section

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

chartdatavisualizationdashboardreporting

Slots

Name	Required	Description
header	Yes	Card title and subtitle area.
content	Yes	Chart content area with bar visualization.

Simple chart container card with a header (title + subtitle), horizontal grid lines, a 5-bar CSS chart, and a footer with a “View details” link. All colors via CSS custom properties for easy theming.