<Card title="Account Balances">
<Stat label="Checking" value="$1,250" change="0.00%" note="Available" tone="info" />
<Stat label="Savings" value="$8,750" change="2.30%" note="Earned interest" tone="info" />
<Stat label="Credit" value="$5,000" change="-150.00" note="Utilization 30%" tone="warning" />
</Card>

<Card title="Recent Transactions">
<Steps>
<Step title="Starbucks – $45.67" status="done" />
<Step title="Amazon – $120.00" status="done" />
<Step title="GasStation – $58.40" status="done" />
<Step title="Restaurant – $73.25" status="done" />
<Step title="Netflix – $15.99" status="done" />
</Steps>
</Card>

<Card title="Spending Split">
<Chart type="pie" title="Spending split this month" x="Category" y="Amount">
| Category | Amount |
|---|---|
| Food | $1,200 |
| Transport | $300 |
| Entertainment | $150 |
| Utilities | $100 |
| Shopping | $250 |
</Chart>
</Card>

<Card title="Bills Due Soon">
Rent – Due 5/1 – $1,500<br>
Utilities – Due 5/5 – $150<br>
Credit Card – Due 5/10 – $200<br>
Insurance – Due 5/15 – $90
</Card>

<Card title="Vacation Savings Goal">
<Progress value="75" max="100" label="Vacation savings" tone="info" />
<Stat label="Goal Amount" value="$2,000" change="0" note="Target" tone="info" />
</Card>

<Card title="Credit Score">
<Stat label="Credit Score" value="785" change="0" note="Excellent" tone="success" />
</Card>

<Card title="Transfer Money">
<Form name="transfer">
<Input label="Amount" placeholder="Enter amount" name="amount" type="number" step="0.01" min="0" required="true" />
<Select label="From Account" placeholder="Select account" name="from" value="Checking" options="Checking | Savings | Credit" required="true" />
<Select label="To Account" placeholder="Select account" name="to" value="Savings" options="Checking | Savings | Credit" required="true" />
<Button variant="primary" href="#">Transfer</Button>
<Button variant="secondary" href="#">Cancel</Button>
</Form>
</Card>

<Card title="Freeze Credit Line">
<Switch label="Freeze credit line" name="freeze_credit" value="false" />
</Card>

<Card title="Statement Period">
<Select label="Statement period" placeholder="Select period" name="statement_period" value="Last 30 days" options="Last 30 days | Last 90 days | Custom" hint="Choose timeframe" required="false" />
</Card>

<Card title="Alert Triggers">
<Checkboxes label="Alert triggers" options="Low balance | Large transaction | Upcoming bill" name="alert_triggers" value="Low balance | Large transaction | Upcoming bill" hint="Select which events should send alerts" required="false" />
</Card>

<Card title="Dispute Transaction">
<Button variant="danger" href="#">Dispute transaction</Button>
</Card>