Vitreo
Components
NotificationsView all
TOTheo Okafor approved the Q3 release plan2 min agoNew order #4821 for $1,240 from Clara Jensen18 min agoHSHana Sato mentioned you in Ticket #20931 hour agoStorage at 82% of the team plan3 hours agoMCMei Chen shared Roadmap 2.0 with youYesterday
MLMaya Lindqvistmaya@northwind.test
ProfileSettingsBillingHelp center
Sign out

Lists

Rows of related things

Simple

Code 
<ul class="list list-divided list-flush">
  <li>
    <a class="list-row" href="#">
      <span>Inbox</span>
      <svg class="icon muted list-end" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    </a>
  </li>
  <li>
    <a class="list-row" href="#">
      <span>Drafts</span>
      <svg class="icon muted list-end" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    </a>
  </li>
  <li>
    <a class="list-row" href="#">
      <span>Sent</span>
      <svg class="icon muted list-end" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    </a>
  </li>
  <li>
    <a class="list-row" href="#">
      <span>Archive</span>
      <svg class="icon muted list-end" viewBox="0 0 24 24" aria-hidden="true">…</svg>
    </a>
  </li>
</ul>

With people

  • TO
    Theo OkaforEngineering Lead
  • IC
    Ines CarvalhoAccount Executive
  • RM
    Rahul MehtaData Analyst
Code 
<ul class="list list-flush">
  <li>
    <div class="list-row">
      <div class="media">
        <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)">TO</span>
        <div class="media-body"><span class="media-title">Theo Okafor</span><span class="media-sub">Engineering Lead</span></div>
      </div>
      <button type="button" class="btn btn-tinted btn-sm">Follow</button>
    </div>
  </li>
  <li>
    <div class="list-row">
      <div class="media">
        <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)">IC</span>
        <div class="media-body"><span class="media-title">Ines Carvalho</span><span class="media-sub">Account Executive</span></div>
      </div>
      <button type="button" class="btn btn-tinted btn-sm">Follow</button>
    </div>
  </li>
  <li>
    <div class="list-row">
      <div class="media">
        <span class="avatar avatar-sm" style="background: linear-gradient(135deg, #FDBA5C, #D9480F)">RM</span>
        <div class="media-body"><span class="media-title">Rahul Mehta</span><span class="media-sub">Data Analyst</span></div>
      </div>
      <button type="button" class="btn btn-tinted btn-sm">Follow</button>
    </div>
  </li>
</ul>

With figures

  • Aero Wireless HeadphonesAudio
    $249124 left
  • Pulse Smart WatchWearables
    $3298 left
  • Lumen Desk LampHome
    $8956 left
Code 
<ul class="list list-flush">
  <li>
    <div class="list-row">
      <div class="media">
        <span class="thumb thumb-sm" style="--h: 265" role="img" aria-label="Aero Wireless Headphones"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
        <div class="media-body"><span class="media-title">Aero Wireless Headphones</span><span class="media-sub">Audio</span></div>
      </div>
      <span class="list-end"><b>$249</b><small>124 left</small></span>
    </div>
  </li>
  <li>
    <div class="list-row">
      <div class="media">
        <span class="thumb thumb-sm" style="--h: 200" role="img" aria-label="Pulse Smart Watch"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
        <div class="media-body"><span class="media-title">Pulse Smart Watch</span><span class="media-sub">Wearables</span></div>
      </div>
      <span class="list-end"><b>$329</b><small>8 left</small></span>
    </div>
  </li>
  <li>
    <div class="list-row">
      <div class="media">
        <span class="thumb thumb-sm" style="--h: 45" role="img" aria-label="Lumen Desk Lamp"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
        <div class="media-body"><span class="media-title">Lumen Desk Lamp</span><span class="media-sub">Home</span></div>
      </div>
      <span class="list-end"><b>$89</b><small>56 left</small></span>
    </div>
  </li>
</ul>
© Vitreo. All rights reserved.