> ## Documentation Index
> Fetch the complete documentation index at: https://docs.janet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Views

> Customizable dashboards built from widgets

A **view** is a board of draggable, resizable widgets showing live workspace data. Create as many as you need, switch between them with tabs, and share them with your team.

<div className="img-showcase">
  <div className="vd-mock vd-mock-animated">
    <div className="vd-grid">
      <div className="vd-widget vd-w-tickets">
        <div className="vd-w-head">
          <span className="vd-w-icon">
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z" />

              <path d="M13 5v2M13 17v2M13 11v2" />
            </svg>
          </span>

          <span className="vd-w-title">Tickets</span>
        </div>

        <div className="vd-ticket-row"><span className="vd-prio vd-prio-high" /><span className="vd-tid">MOB-42</span><span className="vd-ttitle">Auth token refresh loop</span><span className="vd-status-dot vd-st-progress" /></div>
        <div className="vd-ticket-row"><span className="vd-prio vd-prio-med" /><span className="vd-tid">MOB-38</span><span className="vd-ttitle">Push notification settings</span><span className="vd-status-dot vd-st-todo" /></div>
        <div className="vd-ticket-row"><span className="vd-prio vd-prio-low" /><span className="vd-tid">MOB-51</span><span className="vd-ttitle">Onboarding empty states</span><span className="vd-status-dot vd-st-done" /></div>
        <div className="vd-ticket-row"><span className="vd-prio vd-prio-med" /><span className="vd-tid">MOB-29</span><span className="vd-ttitle">CSV export timeout</span><span className="vd-status-dot vd-st-progress" /></div>
      </div>

      <div className="vd-widget vd-w-owners">
        <div className="vd-w-head">
          <span className="vd-w-icon">
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />

              <path d="M9.0 7.0m-4.0 0a4.0 4.0 0 1 0 8.0 0a4.0 4.0 0 1 0 -8.0 0" />

              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
            </svg>
          </span>

          <span className="vd-w-title">Workload by owner</span>
        </div>

        <div className="vd-owners-body">
          <div className="vd-donut" />

          <div className="vd-legend">
            <div className="vd-legend-row"><span className="vd-swatch" style={{background:'rgb(139,92,246)'}} /><span>Will</span><span className="vd-legend-meta">9 open</span></div>
            <div className="vd-legend-row"><span className="vd-swatch" style={{background:'rgba(139,92,246,0.55)'}} /><span>Adhit</span><span className="vd-legend-meta">6 open</span></div>
            <div className="vd-legend-row"><span className="vd-swatch" style={{background:'rgba(139,92,246,0.3)'}} /><span>Maya</span><span className="vd-legend-meta">3 open</span></div>
          </div>
        </div>
      </div>

      <div className="vd-widget vd-w-metrics">
        <div className="vd-w-head">
          <span className="vd-w-icon">
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="m12 14 4-4" />

              <path d="M3.34 19a10 10 0 1 1 17.32 0" />
            </svg>
          </span>

          <span className="vd-w-title">Metrics</span>
        </div>

        <div className="vd-dotbars">
          <div className="vd-dotcol"><span className="vd-dotval">24</span><div className="vd-dottrack"><div className="vd-dotfill" style={{height:'78%'}} /></div><span className="vd-dotlbl">Open</span></div>
          <div className="vd-dotcol"><span className="vd-dotval">9</span><div className="vd-dottrack"><div className="vd-dotfill" style={{height:'34%'}} /></div><span className="vd-dotlbl">In prog</span></div>
          <div className="vd-dotcol"><span className="vd-dotval">17</span><div className="vd-dottrack"><div className="vd-dotfill" style={{height:'58%'}} /></div><span className="vd-dotlbl">Done</span></div>
          <div className="vd-dotcol"><span className="vd-dotval">3</span><div className="vd-dottrack"><div className="vd-dotfill vd-dotfill-warn" style={{height:'14%'}} /></div><span className="vd-dotlbl">Overdue</span></div>
        </div>
      </div>

      <div className="vd-widget vd-w-sprints">
        <div className="vd-w-head">
          <span className="vd-w-icon">
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12.0 12.0m-10.0 0a10.0 10.0 0 1 0 20.0 0a10.0 10.0 0 1 0 -20.0 0" />

              <path d="M12 6v6l4 2" />
            </svg>
          </span>

          <span className="vd-w-title">Sprints</span>
        </div>

        <div className="vd-inset"><div className="vd-inset-top"><span>Sprint 14</span></div><span className="vd-inset-meta">Jun 16 – Jun 30 · 12 tickets</span></div>
        <div className="vd-inset"><div className="vd-inset-top"><span>Sprint 15</span></div><span className="vd-inset-meta">Jun 30 – Jul 14 · 8 tickets</span></div>
      </div>

      <div className="vd-widget vd-w-heatmap">
        <div className="vd-w-head">
          <span className="vd-w-icon">
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" />

              <path d="M3 9h18M3 15h18M9 3v18M15 3v18" />
            </svg>
          </span>

          <span className="vd-w-title">Ticket activity</span>
        </div>

        <div className="vd-heatmap" aria-hidden>
          <span data-l="1" />

          <span data-l="0" />

          <span data-l="2" />

          <span data-l="3" />

          <span data-l="1" />

          <span data-l="0" />

          <span data-l="2" />

          <span data-l="4" />

          <span data-l="2" />

          <span data-l="1" />

          <span data-l="3" />

          <span data-l="0" />

          <span data-l="1" />

          <span data-l="2" />

          <span data-l="0" />

          <span data-l="3" />

          <span data-l="4" />

          <span data-l="2" />

          <span data-l="1" />

          <span data-l="0" />

          <span data-l="2" />

          <span data-l="1" />

          <span data-l="3" />

          <span data-l="2" />

          <span data-l="0" />

          <span data-l="4" />

          <span data-l="1" />

          <span data-l="2" />

          <span data-l="3" />

          <span data-l="1" />

          <span data-l="0" />

          <span data-l="2" />

          <span data-l="1" />

          <span data-l="4" />

          <span data-l="2" />

          <span data-l="3" />

          <span data-l="0" />

          <span data-l="1" />

          <span data-l="2" />

          <span data-l="1" />

          <span data-l="3" />

          <span data-l="2" />
        </div>

        <div className="vd-heatmap-legend"><span>Less</span><span className="vd-hl" data-l="0" /><span className="vd-hl" data-l="1" /><span className="vd-hl" data-l="2" /><span className="vd-hl" data-l="3" /><span className="vd-hl" data-l="4" /><span>More</span></div>
      </div>
    </div>
  </div>
</div>

## Start from a template

An empty view offers preset layouts. Pick a template below to preview it, then **Use template** builds the board instantly.

<input type="radio" name="vt" id="vt-my" className="vt-radio" defaultChecked />

<input type="radio" name="vt" id="vt-team" className="vt-radio" />

<input type="radio" name="vt" id="vt-project" className="vt-radio" />

<input type="radio" name="vt" id="vt-org" className="vt-radio" />

<input type="radio" name="vt" id="vt-sprint" className="vt-radio" />

<input type="radio" name="vt" id="vt-triage" className="vt-radio" />

<div className="vt-gallery">
  <div className="vt-pills">
    <label htmlFor="vt-my" className="vt-pill vt-pill-my">My View</label>
    <label htmlFor="vt-team" className="vt-pill vt-pill-team">Team View</label>
    <label htmlFor="vt-project" className="vt-pill vt-pill-project">Project View</label>
    <label htmlFor="vt-org" className="vt-pill vt-pill-org">Organization View</label>
    <label htmlFor="vt-sprint" className="vt-pill vt-pill-sprint">Sprint View</label>
    <label htmlFor="vt-triage" className="vt-pill vt-pill-triage">Triage View</label>
  </div>

  <div className="vt-panel vt-panel-my" style={{"--vt-accent":'99 102 241'}}>
    <div className="vt-stage">
      <div className="vt-orbs" aria-hidden />

      <div className="vt-board" style={{paddingTop:'65%'}}>
        <div className="vt-w" style={{left:'0.000%',top:'0.000%',width:'50.000%',height:'38.462%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Assigned to me</span></div>

            <div className="vt-body vt-body-metrics">
              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'50.000%',top:'0.000%',width:'50.000%',height:'38.462%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">My open tickets</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'38.462%',width:'33.333%',height:'30.769%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Blocking me</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'33.333%',top:'38.462%',width:'50.000%',height:'46.154%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">My calendar</span></div>

            <div className="vt-body vt-body-cal">
              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'69.231%',width:'33.333%',height:'30.769%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Scratchpad</span></div>

            <div className="vt-body vt-body-cards">
              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="vt-footer">
      <span className="vt-footer-icon">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />

          <path d="M12.0 7.0m-4.0 0a4.0 4.0 0 1 0 8.0 0a4.0 4.0 0 1 0 -8.0 0" />
        </svg>
      </span>

      <div className="vt-footer-info"><span className="vt-footer-name">My View</span><span className="vt-footer-desc">Everything assigned to you and what needs your attention today.</span></div>
      <span className="vt-cta">Use template</span>
    </div>
  </div>

  <div className="vt-panel vt-panel-team" style={{"--vt-accent":'14 165 233'}}>
    <div className="vt-stage">
      <div className="vt-orbs" aria-hidden />

      <div className="vt-board" style={{paddingTop:'60%'}}>
        <div className="vt-w" style={{left:'0.000%',top:'0.000%',width:'25.000%',height:'41.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Team</span></div>

            <div className="vt-body vt-body-owners">
              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'52%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'34%'}} />
                </span>
              </div>

              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'46%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'30%'}} />
                </span>
              </div>

              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'40%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'26%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'25.000%',top:'0.000%',width:'25.000%',height:'33.333%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Tickets</span></div>

            <div className="vt-body vt-body-metrics">
              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'50.000%',top:'0.000%',width:'25.000%',height:'50.000%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Ticket activity</span></div>

            <div className="vt-body vt-body-cal">
              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'75.000%',top:'0.000%',width:'25.000%',height:'50.000%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Objectives</span></div>

            <div className="vt-body vt-body-obj">
              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'72%'}} />
                </span>
              </div>

              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'58%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'48%'}} />
                </span>
              </div>

              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'50%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'90%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'41.667%',width:'50.000%',height:'58.333%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Tickets by assignee</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'50.000%',top:'50.000%',width:'50.000%',height:'41.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Workload by status</span></div>

            <div className="vt-body vt-body-status">
              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'68%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'44%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'86%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'30%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="vt-footer">
      <span className="vt-footer-icon">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />

          <path d="M9.0 7.0m-4.0 0a4.0 4.0 0 1 0 8.0 0a4.0 4.0 0 1 0 -8.0 0" />

          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />

          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
        </svg>
      </span>

      <div className="vt-footer-info"><span className="vt-footer-name">Team View</span><span className="vt-footer-desc">See how work is spread across your team and who's loaded up.</span></div>
      <span className="vt-cta">Use template</span>
    </div>
  </div>

  <div className="vt-panel vt-panel-project" style={{"--vt-accent":'16 185 129'}}>
    <div className="vt-stage">
      <div className="vt-orbs" aria-hidden />

      <div className="vt-board" style={{paddingTop:'75%'}}>
        <div className="vt-w" style={{left:'0.000%',top:'0.000%',width:'66.667%',height:'46.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Board</span></div>

            <div className="vt-body vt-body-board">
              <div className="vt-bcol">
                <span className="vt-bar vt-bar-strong" style={{width:'60%'}} />

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'70%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'58%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'46%'}} />
                </span>
              </div>

              <div className="vt-bcol">
                <span className="vt-bar vt-bar-strong" style={{width:'60%'}} />

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'70%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'58%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'46%'}} />
                </span>
              </div>

              <div className="vt-bcol">
                <span className="vt-bar vt-bar-strong" style={{width:'60%'}} />

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'70%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'58%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'46%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'66.667%',top:'0.000%',width:'33.333%',height:'26.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Project health</span></div>

            <div className="vt-body vt-body-metrics">
              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'66.667%',top:'26.667%',width:'33.333%',height:'20.000%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Team</span></div>

            <div className="vt-body vt-body-owners">
              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'52%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'34%'}} />
                </span>
              </div>

              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'46%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'30%'}} />
                </span>
              </div>

              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'40%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'26%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'46.667%',width:'66.667%',height:'26.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Sprint time range</span></div>

            <div className="vt-body vt-body-sprints">
              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'4%',width:'38%'}} />
                </span>
              </div>

              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'26%',width:'50%'}} />
                </span>
              </div>

              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'12%',width:'30%'}} />
                </span>
              </div>

              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'44%',width:'42%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'66.667%',top:'46.667%',width:'33.333%',height:'26.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Objectives</span></div>

            <div className="vt-body vt-body-obj">
              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'72%'}} />
                </span>
              </div>

              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'58%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'48%'}} />
                </span>
              </div>

              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'50%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'90%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'73.333%',width:'50.000%',height:'26.667%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Meeting notes</span></div>

            <div className="vt-body vt-body-cards">
              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="vt-footer">
      <span className="vt-footer-icon">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="3" width="7" height="9" rx="1" />

          <rect x="14" y="3" width="7" height="5" rx="1" />

          <rect x="14" y="12" width="7" height="9" rx="1" />

          <rect x="3" y="16" width="7" height="5" rx="1" />
        </svg>
      </span>

      <div className="vt-footer-info"><span className="vt-footer-name">Project View</span><span className="vt-footer-desc">Keep tabs on a single project, from its board to its sprints.</span></div>
      <span className="vt-cta">Choose project</span>
    </div>
  </div>

  <div className="vt-panel vt-panel-org" style={{"--vt-accent":'168 85 247'}}>
    <div className="vt-stage">
      <div className="vt-orbs" aria-hidden />

      <div className="vt-board" style={{paddingTop:'65%'}}>
        <div className="vt-w" style={{left:'0.000%',top:'0.000%',width:'50.000%',height:'38.462%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Metrics</span></div>

            <div className="vt-body vt-body-metrics">
              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'50.000%',top:'0.000%',width:'50.000%',height:'38.462%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Tickets by status</span></div>

            <div className="vt-body vt-body-status">
              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'68%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'44%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'86%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'30%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'38.462%',width:'33.333%',height:'30.769%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Projects</span></div>

            <div className="vt-body vt-body-cards">
              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>

              <span className="vt-card">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-bar vt-bar-dim" style={{width:'44%'}} />
              </span>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'33.333%',top:'38.462%',width:'25.000%',height:'23.077%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Objectives</span></div>

            <div className="vt-body vt-body-obj">
              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'66%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'72%'}} />
                </span>
              </div>

              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'58%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'48%'}} />
                </span>
              </div>

              <div className="vt-objrow">
                <span className="vt-bar" style={{width:'50%'}} />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'90%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'58.333%',top:'38.462%',width:'25.000%',height:'23.077%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">People</span></div>

            <div className="vt-body vt-body-owners">
              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'52%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'34%'}} />
                </span>
              </div>

              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'46%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'30%'}} />
                </span>
              </div>

              <div className="vt-orow">
                <span className="vt-avatar" />

                <span className="vt-ocol">
                  <span className="vt-bar" style={{width:'40%'}} />

                  <span className="vt-bar vt-bar-dim" style={{width:'26%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'33.333%',top:'61.538%',width:'50.000%',height:'38.462%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Signals & risks</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'69.231%',width:'33.333%',height:'30.769%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Hottest tickets</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="vt-footer">
      <span className="vt-footer-icon">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" />

          <path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" />

          <path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" />

          <path d="M10 6h4M10 10h4M10 14h4M10 18h4" />
        </svg>
      </span>

      <div className="vt-footer-info"><span className="vt-footer-name">Organization View</span><span className="vt-footer-desc">A high-level read on how the whole organization is doing.</span></div>
      <span className="vt-cta">Use template</span>
    </div>
  </div>

  <div className="vt-panel vt-panel-sprint" style={{"--vt-accent":'245 158 11'}}>
    <div className="vt-stage">
      <div className="vt-orbs" aria-hidden />

      <div className="vt-board" style={{paddingTop:'80%'}}>
        <div className="vt-w" style={{left:'0.000%',top:'0.000%',width:'100.000%',height:'31.250%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Sprints</span></div>

            <div className="vt-body vt-body-sprints">
              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'4%',width:'38%'}} />
                </span>
              </div>

              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'26%',width:'50%'}} />
                </span>
              </div>

              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'12%',width:'30%'}} />
                </span>
              </div>

              <div className="vt-gantt">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-gtrack">
                  <span className="vt-gspan" style={{left:'44%',width:'42%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'31.250%',width:'66.667%',height:'43.750%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Sprint board</span></div>

            <div className="vt-body vt-body-board">
              <div className="vt-bcol">
                <span className="vt-bar vt-bar-strong" style={{width:'60%'}} />

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'70%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'58%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'46%'}} />
                </span>
              </div>

              <div className="vt-bcol">
                <span className="vt-bar vt-bar-strong" style={{width:'60%'}} />

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'70%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'58%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'46%'}} />
                </span>
              </div>

              <div className="vt-bcol">
                <span className="vt-bar vt-bar-strong" style={{width:'60%'}} />

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'70%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'58%'}} />
                </span>

                <span className="vt-bcard">
                  <span className="vt-bar" style={{width:'46%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'66.667%',top:'31.250%',width:'33.333%',height:'25.000%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Metrics</span></div>

            <div className="vt-body vt-body-metrics">
              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>

              <div className="vt-metric">
                <span className="vt-metric-block" />

                <span className="vt-bar" style={{width:'72%'}} />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'66.667%',top:'56.250%',width:'33.333%',height:'31.250%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Sprint load</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'75.000%',width:'33.333%',height:'25.000%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Blockers</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'33.333%',top:'75.000%',width:'33.333%',height:'25.000%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Timeline</span></div>

            <div className="vt-body vt-body-cal">
              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />

              <span className="vt-cell vt-cell-hot" />

              <span className="vt-cell" />

              <span className="vt-cell" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="vt-footer">
      <span className="vt-footer-icon">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12.0 12.0m-10.0 0a10.0 10.0 0 1 0 20.0 0a10.0 10.0 0 1 0 -20.0 0" />

          <path d="M12 6v6l4 2" />
        </svg>
      </span>

      <div className="vt-footer-info"><span className="vt-footer-name">Sprint View</span><span className="vt-footer-desc">Follow a sprint's progress and see what's left to ship.</span></div>
      <span className="vt-cta">Choose sprint</span>
    </div>
  </div>

  <div className="vt-panel vt-panel-triage" style={{"--vt-accent":'239 68 68'}}>
    <div className="vt-stage">
      <div className="vt-orbs" aria-hidden />

      <div className="vt-board" style={{paddingTop:'70%'}}>
        <div className="vt-w" style={{left:'0.000%',top:'0.000%',width:'50.000%',height:'35.714%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Overdue</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'50.000%',top:'0.000%',width:'50.000%',height:'35.714%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Blocked</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'35.714%',width:'50.000%',height:'35.714%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Recently updated</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'50.000%',top:'35.714%',width:'50.000%',height:'35.714%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Load by assignee</span></div>

            <div className="vt-body vt-body-list">
              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'49%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'38%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'54%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'33%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>

              <div className="vt-lrow">
                <span className="vt-dot" />

                <span className="vt-bar" style={{width:'44%'}} />

                <span className="vt-bar vt-bar-dim vt-bar-end" />
              </div>
            </div>
          </div>
        </div>

        <div className="vt-w" style={{left:'0.000%',top:'71.429%',width:'33.333%',height:'28.571%'}}>
          <div className="vt-w-inner">
            <div className="vt-w-head"><span className="vt-w-title">Tickets by status</span></div>

            <div className="vt-body vt-body-status">
              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'68%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'44%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'86%'}} />
                </span>
              </div>

              <div className="vt-srow">
                <span className="vt-bar vt-bar-lbl" />

                <span className="vt-track">
                  <span className="vt-fill" style={{width:'30%'}} />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="vt-footer">
      <span className="vt-footer-icon">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 12h-6l-2 3h-4l-2-3H2" />

          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
        </svg>
      </span>

      <div className="vt-footer-info"><span className="vt-footer-name">Triage View</span><span className="vt-footer-desc">Catch what's overdue or slipping before it falls through the cracks.</span></div>
      <span className="vt-cta">Use template</span>
    </div>
  </div>
</div>

**Project View** and **Sprint View** ask which project or sprint to build around. A templated view behaves like any other afterward.

## Add and arrange widgets

<Steps>
  <Step title="Add">
    Click **Add widget** and pick from the menu.
  </Step>

  <Step title="Move">
    Drag a widget by the grip in its header.
  </Step>

  <Step title="Resize">
    Drag any edge or corner.
  </Step>

  <Step title="Remove">
    Right click the widget and choose **Remove**.
  </Step>
</Steps>

Right click a widget to configure it -- title, filters, project, time range, and more. Options vary by widget type.

## Widget catalog

| Category | Widgets                                                  |
| -------- | -------------------------------------------------------- |
| Work     | Tickets, High-context tickets, Signals, Activity heatmap |
| Planning | Objectives, Sprints, Calendar                            |
| Team     | Owners, Projects                                         |
| Content  | Summary card, Meeting notes, Documents                   |
| Advanced | Custom (AI)                                              |

The **Tickets** widget has four presentations -- list, board, status chart, and metrics -- switchable from its menu. **Custom (AI)** opens a chat where you describe the widget you want and Janet builds it.