mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
89 lines
3.4 KiB
Plaintext
89 lines
3.4 KiB
Plaintext
---
|
|
// .card-gradient + .card-gradient-{preset} come from core/scss/ui/_cards.scss
|
|
// (bundled in the base tabler.css — no cssPlugins needed here).
|
|
// Composition: one hero card that carries the gradient as emphasis — the
|
|
// workspace's plan, with price, what it includes and the upgrade action — and
|
|
// under it three small KPI cards from the same story, each on a different
|
|
// preset. The accent colors are picked per card rather than derived from the
|
|
// preset, so icons and bars stay legible on the tinted surface in dark mode.
|
|
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
|
|
import Subheader from '@ui/Subheader.astro'
|
|
import Avatar from '@ui/Avatar.astro'
|
|
import Progress from '@ui/Progress.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import Icon from '@ui/Icon.astro'
|
|
import Badge from '@ui/Badge.astro'
|
|
|
|
const plan = {
|
|
name: 'Pro',
|
|
price: '$29',
|
|
period: 'per seat / month',
|
|
includes: ['Unlimited projects', 'Advanced reports', 'Priority support'],
|
|
}
|
|
|
|
const kpis = [
|
|
{ preset: 'sun', accent: 'orange', icon: 'users', label: 'Seats', value: '48 / 60', progress: 80 },
|
|
{ preset: 'snow', accent: 'cyan', icon: 'database', label: 'Storage', value: '1.2 TB', progress: 60 },
|
|
{ preset: 'gold', accent: 'yellow', icon: 'calendar', label: 'Renews in', value: '12 days', progress: 35 },
|
|
]
|
|
---
|
|
|
|
<ScreenshotLayout title="Card gradient" columns={2}>
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<div class="card card-gradient card-gradient-ocean">
|
|
<div class="card-body">
|
|
<div class="row g-4 align-items-center">
|
|
<div class="col">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<Subheader as="h4" class="mb-0">Current plan</Subheader>
|
|
<Badge text="Active" color="azure" />
|
|
</div>
|
|
<div class="d-flex align-items-baseline gap-2 mb-3">
|
|
<div class="h1 mb-0">{plan.name}</div>
|
|
<div class="h2 mb-0 fw-normal">{plan.price}</div>
|
|
<div class="text-secondary">{plan.period}</div>
|
|
</div>
|
|
<ul class="list-unstyled space-y-1 mb-0">
|
|
{
|
|
plan.includes.map((item) => (
|
|
<li class="d-flex align-items-center gap-2">
|
|
<Icon name="check" class="text-azure" />
|
|
<span>{item}</span>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
<div class="col-auto text-end">
|
|
<Button text="Upgrade to Business" color="azure" icon="arrow-up-right" />
|
|
<div class="text-secondary small mt-2">Next invoice: $1,392 on Oct 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
kpis.map((kpi) => (
|
|
<div class="col-4">
|
|
<div class={`card card-gradient card-gradient-${kpi.preset}`}>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<Avatar icon={kpi.icon} color={kpi.accent} />
|
|
<div>
|
|
<Subheader as="h4" class="mb-0">
|
|
{kpi.label}
|
|
</Subheader>
|
|
<div class="h3 mb-0">{kpi.value}</div>
|
|
</div>
|
|
</div>
|
|
<Progress value={kpi.progress} color={kpi.accent} size="sm" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</ScreenshotLayout>
|