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

Scroll area

A box that scrolls on its own, with a thin bar

Vertical

Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 7
Tag 8
Tag 9
Tag 10
Tag 11
Tag 12
Tag 13
Tag 14
Tag 15
Tag 16
Tag 17
Tag 18
Tag 19
Tag 20
Tag 21
Tag 22
Tag 23
Tag 24
Tag 25
Tag 26
Tag 27
Tag 28
Tag 29
Tag 30
Code 
<div class="scroll-area" tabindex="0" role="region" aria-label="Tags">
  <div class="scroll-row">Tag 1</div>
  <div class="scroll-row">Tag 2</div>
  <div class="scroll-row">Tag 3</div>
  <div class="scroll-row">Tag 4</div>
  <div class="scroll-row">Tag 5</div>
  <div class="scroll-row">Tag 6</div>
  <div class="scroll-row">Tag 7</div>
  <div class="scroll-row">Tag 8</div>
  <div class="scroll-row">Tag 9</div>
  <div class="scroll-row">Tag 10</div>
  <div class="scroll-row">Tag 11</div>
  <div class="scroll-row">Tag 12</div>
  <div class="scroll-row">Tag 13</div>
  <div class="scroll-row">Tag 14</div>
  <div class="scroll-row">Tag 15</div>
  <div class="scroll-row">Tag 16</div>
  <div class="scroll-row">Tag 17</div>
  <div class="scroll-row">Tag 18</div>
  <div class="scroll-row">Tag 19</div>
  <div class="scroll-row">Tag 20</div>
  <div class="scroll-row">Tag 21</div>
  <div class="scroll-row">Tag 22</div>
  <div class="scroll-row">Tag 23</div>
  <div class="scroll-row">Tag 24</div>
  <div class="scroll-row">Tag 25</div>
  <div class="scroll-row">Tag 26</div>
  <div class="scroll-row">Tag 27</div>
  <div class="scroll-row">Tag 28</div>
  <div class="scroll-row">Tag 29</div>
  <div class="scroll-row">Tag 30</div>
</div>

Horizontal

ML Maya
TO Theo
IC Ines
RM Rahul
HS Hana
LM Lucas
AN Amara
EP Elena
DA Diego
NF Noah
PR Priya
SR Sofia
KM Kwame
LH Lina
Code 
<div class="scroll-area scroll-x" tabindex="0" role="region" aria-label="People">
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)">ML</span>
    <span class="fs-xs">Maya</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)">TO</span>
    <span class="fs-xs">Theo</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)">IC</span>
    <span class="fs-xs">Ines</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #FDBA5C, #D9480F)">RM</span>
    <span class="fs-xs">Rahul</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)">HS</span>
    <span class="fs-xs">Hana</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #C9A2FF, #7A3FD1)">LM</span>
    <span class="fs-xs">Lucas</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #7DD3C0, #2F6F8F)">AN</span>
    <span class="fs-xs">Amara</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #F9A8D4, #A21CAF)">EP</span>
    <span class="fs-xs">Elena</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #A3B4C8, #475569)">DA</span>
    <span class="fs-xs">Diego</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #FCD34D, #B45309)">NF</span>
    <span class="fs-xs">Noah</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #8E9AFF, #4645BB)">PR</span>
    <span class="fs-xs">Priya</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)">SR</span>
    <span class="fs-xs">Sofia</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)">KM</span>
    <span class="fs-xs">Kwame</span>
  </div>
  <div class="d-flex flex-column gap-1 align-items-center">
    <span class="avatar" style="background: linear-gradient(135deg, #FDBA5C, #D9480F)">LH</span>
    <span class="fs-xs">Lina</span>
  </div>
</div>
© Vitreo. All rights reserved.