<Card title="Good morning, Bengaluru" subtitle="Tuesday, 14 October 2025 · 6:30 AM IST">
<Columns>
<div>
<Stat label="Current temperature" value="22°C" icon="thermometer" />
<Stat label="Conditions" value="Partly cloudy" icon="cloud-sun" />
<Stat label="Humidity" value="64%" icon="drop" />
<Stat label="Wind" value="12 km/h NW" icon="wind" />
</div>
<div>
<Stat label="Feels like" value="23°C" icon="user" />
<Stat label="Air quality" value="AQI 52 · Good" icon="leaf" />
<Stat label="UV index" value="Low (2)" icon="sun" />
<Stat label="Visibility" value="8 km" icon="eye" />
</div>
</Columns>
</Card>

<Card title="Next 3 days outlook">
<Chart type="line" x="Day" y="Temperature (°C)">
| Day | High | Low |
|---|---|---|
| Tue | 28 | 19 |
| Wed | 29 | 20 |
| Thu | 30 | 21 |
</Chart>

<Columns>
<div>
<Badge>Tuesday</Badge> — Partly cloudy, 28° / 19° · 20% rain
</div>
<div>
<Badge>Wednesday</Badge> — Mostly sunny, 29° / 20° · 10% rain
</div>
<div>
<Badge>Thursday</Badge> — Sunny, 30° / 21° · 5% rain
</div>
</Columns>
</Card>

<Card title="Sun & moon times">
<Columns>
<div>
<Stat label="Sunrise" value="6:12 AM" icon="sunrise" />
<Stat label="Sunset" value="6:02 PM" icon="sunset" />
</div>
<div>
<Stat label="Daylight" value="11h 50m" icon="clock" />
<Stat label="Moon phase" value="Waning crescent" icon="moon" />
</div>
</Columns>
</Card>

<Callout tone="info" title="Morning tip">
Light jacket not needed — mild start, warming up by noon. Great day for a morning walk.
</Callout>