Basics

<button class="pw-btn">Default</button>
<button class="pw-btn pw-btn--primary">Primary</button>
<button class="pw-btn pw-btn--soft">Soft</button>
<button class="pw-btn pw-btn--ghost">Ghost</button>
<button class="pw-btn pw-btn--danger">Danger</button>
<button class="pw-btn" disabled>Disabled</button>
<button class="pw-btn pw-btn--primary is-loading" aria-label="Saving">Saving</button>
<button class="pw-btn pw-btn--sm">Small</button>
<button class="pw-btn pw-btn--lg">Large</button>
<span class="pw-btn-group" role="group" aria-label="View">
  <button class="pw-btn" aria-pressed="true">Day</button><button class="pw-btn" aria-pressed="false">Week</button><button class="pw-btn" aria-pressed="false">Month</button>
</span>

<span class="pw-badge">Draft</span>
<span class="pw-badge pw-badge--ok pw-badge--dot">Active</span>
<span class="pw-badge pw-badge--warn">Pending</span>
<span class="pw-badge pw-badge--bad">Failed</span>
<span class="pw-badge pw-badge--info">New</span>
<span class="pw-badge pw-badge--accent">Pro</span>
<span class="pw-chip"><span>design</span><button aria-label="Remove design"></button></span>

<div class="pw-alert pw-alert--info" role="status"><div><b>Heads up.</b> Maintenance is planned for Sunday at 02:00.</div></div><br>
<div class="pw-alert pw-alert--ok" role="status"><div><b>Payment received.</b> A receipt is on its way to your inbox.</div></div><br>
<div class="pw-alert pw-alert--warn" role="status"><div><b>Your trial ends in 3 days.</b> Add a card to keep your projects.</div></div><br>
<div class="pw-alert pw-alert--bad" role="alert"><div><b>We could not save.</b> Check your connection and try again.</div></div>

<div class="pw-card" style="width:260px">
  <div class="pw-card-body">
    <div class="pw-stat">
      <span class="pw-stat-label">Orders this week</span>
      <span class="pw-stat-value">1,284</span>
      <span class="pw-stat-note is-up">12% more than last week</span>
    </div>
  </div>
  <div class="pw-card-foot">
    <span class="pw-avatars">
      <span class="pw-avatar pw-avatar--sm">LF</span><span class="pw-avatar pw-avatar--sm">OH</span><span class="pw-avatar pw-avatar--sm">PN</span>
    </span>
  </div>
</div>
<span class="pw-avatar pw-avatar--lg">KM</span>
<span class="pw-avatar">TB</span>

<progress class="pw-progress" value="64" max="100" aria-label="Upload"></progress><br>
<span class="pw-spinner" role="status" aria-label="Loading"></span><br><br>
<span class="pw-skeleton" style="width:70%"></span><br>
<span class="pw-skeleton" style="width:45%"></span>

<div class="pw-table-wrap">
  <table class="pw-table">
    <thead><tr><th>Invoice</th><th>Customer</th><th>Status</th><th>Amount</th></tr></thead>
    <tbody>
      <tr><td>INV-1042</td><td>Northwind Ltd</td><td><span class="pw-badge pw-badge--ok">Paid</span></td><td>$1,200.00</td></tr>
      <tr><td>INV-1043</td><td>Blue Harbor</td><td><span class="pw-badge pw-badge--warn">Due</span></td><td>$340.00</td></tr>
      <tr><td>INV-1044</td><td>Juniper Studio</td><td><span class="pw-badge">Draft</span></td><td>$89.50</td></tr>
    </tbody>
  </table>
</div>

<ol class="pw-breadcrumb" aria-label="You are here">
  <li><a href="#main">Home</a></li><li><a href="#main">Projects</a></li><li><span aria-current="page">Website</span></li>
</ol><br>
<ol class="pw-timeline">
  <li class="is-done"><time>Monday</time><b>Order placed</b></li>
  <li class="is-done"><time>Tuesday</time><b>Packed</b></li>
  <li><time>Expected Thursday</time><b>Delivered</b></li>
</ol><br>
<div class="pw-empty"><b>No invoices yet</b>Create your first invoice to see it here.</div><br>
<p>Press <kbd class="pw-kbd">Ctrl</kbd> <kbd class="pw-kbd">K</kbd> to search.</p>
<div class="pw-divider">or</div>