<Card title="Delivery tracking" subtitle="Order #1042 · 3 items · 5.2 kg">
  <Columns>
    <Stat label="Current status" value="In transit" icon="truck" tone="info" />
    <Stat label="Estimated delivery" value="Fri, Mar 14" icon="calendar" note="by 8:00 PM" />
    <Stat label="Shipped from" value="Portland, OR" icon="map-pin" />
    <Stat label="Progress" value="68%" icon="chart-line" tone="success" />
  </Columns>
</Card>

<Card title="Package location" subtitle="Updated 12 minutes ago">
  <Columns>
    <div>
      <Callout tone="info" title="Current location">
        **Boise, ID — USPS regional facility**  
        Arrived at sort facility. Package is moving through the network.
      </Callout>
      <Chart type="line" x="Day" y="Distance (km)">
| Day | Distance |
|---|---|
| Mon | 0 |
| Tue | 420 |
| Wed | 890 |
| Thu | 1340 |
| Fri | 1780 |
      </Chart>
    </div>
    <div>
      <Steps>
        <Step title="Label created" status="done" subtitle="Mon, Mar 10 · 9:14 AM" />
        <Step title="Picked up by carrier" status="done" subtitle="Mon, Mar 10 · 4:32 PM" />
        <Step title="Departed Portland facility" status="done" subtitle="Tue, Mar 11 · 2:05 AM" />
        <Step title="Arrived in Boise, ID" status="current" subtitle="Today · 10:48 AM" />
        <Step title="Out for delivery" status="todo" subtitle="Expected Fri, Mar 14" />
        <Step title="Delivered" status="todo" subtitle="Estimated by 8:00 PM" />
      </Steps>
    </div>
  </Columns>
</Card>

<Card title="Delivery estimate" subtitle="Based on current carrier schedule">
  <Columns>
    <Stat label="Estimated delivery date" value="Friday, March 14" icon="calendar" note="by 8:00 PM" />
    <Stat label="Delivery window" value="6:00 – 8:00 PM" icon="clock" />
    <Stat label="Days remaining" value="2" icon="hourglass" />
  </Columns>
  <Callout tone="success" title="On track">
    Your package is moving on schedule. No delays expected at this time.
  </Callout>
</Card>

<Card title="Report a problem" subtitle="We'll investigate and get back to you within 24 hours">
  <Form name="delivery-issue">
    <Select label="Issue type" placeholder="Select an issue" options="Package is delayed | Package is damaged | Package is lost | Wrong address | Other" required="true" />
    <TextArea label="Describe the issue" placeholder="Tell us what happened…" rows="4" hint="Include any details that can help us locate your package" required="true" />
    <Input label="Contact email" type="email" placeholder="you@email.com" hint="We'll send updates to this address" required="true" />
    <Checkboxes label="Preferred contact method" options="Email | SMS | Phone call" name="contact-method" />
    <Button>Submit report</Button>
    <Button variant="secondary">Cancel</Button>
  </Form>
</Card>

<Card title="Need more help?">
  <Columns>
    <Button variant="secondary" icon="chat-circle">Chat with support</Button>
    <Button variant="tertiary" icon="phone">Call 1-800-555-0199</Button>
  </Columns>
</Card>