# Morning Weather Brief – Bengaluru

<Card title="Current Conditions">
<Columns>
<div>
<Stat label="Temperature" value="24°C" icon="thermometer" tone="info" />
<Stat label="Conditions" value="Partly Cloudy" icon="cloud-sun" />
<Stat label="Humidity" value="68%" icon="droplet" />
<Stat label="Wind" value="12 km/h" icon="wind" />
</div>
<div>
<Stat label="Feels Like" value="26°C" icon="thermometer-simple" />
<Stat label="Visibility" value="8 km" icon="eye" />
<Stat label="UV Index" value="Moderate" icon="sun" tone="warning" />
<Stat label="Air Quality" value="AQI 82" icon="smiley" tone="success" />
</div>
</Columns>
</Card>

<Card title="Next 3 Days Outlook">
<Chart type="line" x="Day" y="°C">
| Day | High | Low |
|---|---|---|
| Today | 28 | 21 |
| Tomorrow | 29 | 22 |
| Day 3 | 27 | 20 |
</Chart>

| Day | Conditions | High / Low | Precipitation |
|---|---|---|---|
| Today | <Badge tone="info">Partly Cloudy</Badge> | 28° / 21° | 10% |
| Tomorrow | <Badge tone="success">Sunny Intervals</Badge> | 29° / 22° | 5% |
| Day 3 | <Badge tone="warning">Thunderstorms</Badge> | 27° / 20° | 60% |
</Card>

<Card title="Sunrise & Sunset">
<Columns>
<div>
<Stat label="Sunrise" value="6:12 AM" icon="sunrise" />
</div>
<div>
<Stat label="Sunset" value="6:48 PM" icon="sunset" />
</div>
</Columns>
<Progress value="45" max="100" label="Daylight elapsed" tone="info" />
</Card>

<Card title="Today's Brief">
<Callout tone="info" title="Morning Note">Carry a light jacket for the early commute; it'll warm up by noon.</Callout>
<Callout tone="warning" title="Day 3 Alert">Possible thunderstorms late afternoon on Day 3 — plan indoor activities.</Callout>
</Card>

<Button variant="primary">Refresh forecast</Button>
<Button variant="secondary">See hourly details</Button>