Register

Scrollbar

Areas that scroll inside the page, with a thin scrollbar

Scrolling down

The area takes the focus, so it scrolls from the keyboard too.

  1. Leo Park signed in17:26 · Back office
  2. Mia Novak refunded R-04117116:33 · Back office
  3. Maya Kapoor changed the price of Cappuccino to $4.2015:40 · Back office
  4. Diego Reyes approved PO-105914:47 · Phone
  5. Grace Okafor exported customers.csv13:54 · Back office
  6. Ben Lopez added Pumpkin spice latte13:01 · Back office
  7. Sara Kapoor voided R-04116012:08 · Back office
  8. Daniel Reyes closed Till 2 with no variance11:15 · Back office
  9. Aisha Novak changed the tax rate for Merchandise to 5.5%10:22 · Phone
  10. Mia Chen invited Rachel Kim, CPA09:29 · Back office
Show the code
<div class="scroll-demo w-100" tabindex="0" role="region" aria-label="Activity">
<ol class="timeline">
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-login">
</i>
</span>
<div>
<b>Leo Park signed in</b>
<small>17:26 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-receipt-refund">
</i>
</span>
<div>
<b>Mia Novak refunded R-041171</b>
<small>16:33 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-tag">
</i>
</span>
<div>
<b>Maya Kapoor changed the price of Cappuccino to $4.20</b>
<small>15:40 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-file-check">
</i>
</span>
<div>
<b>Diego Reyes approved PO-1059</b>
<small>14:47 · Phone</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-download">
</i>
</span>
<div>
<b>Grace Okafor exported customers.csv</b>
<small>13:54 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-plus">
</i>
</span>
<div>
<b>Ben Lopez added Pumpkin spice latte</b>
<small>13:01 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-receipt-off">
</i>
</span>
<div>
<b>Sara Kapoor voided R-041160</b>
<small>12:08 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-cash">
</i>
</span>
<div>
<b>Daniel Reyes closed Till 2 with no variance</b>
<small>11:15 · Back office</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-percentage">
</i>
</span>
<div>
<b>Aisha Novak changed the tax rate for Merchandise to 5.5%</b>
<small>10:22 · Phone</small>
</div>
</li>
<li>
<span class="t-ico " aria-hidden="true">
<i class="ti ti-user-plus">
</i>
</span>
<div>
<b>Mia Chen invited Rachel Kim, CPA</b>
<small>09:29 · Back office</small>
</div>
</li>
</ol>
</div>

Scrolling sideways

A wide table in a narrow space.

Sunday: 7 am – 6 pm Monday: 7 am – 6 pm Tuesday: 7 am – 6 pm Wednesday: 7 am – 6 pm Thursday: 7 am – 6 pm Friday: 7 am – 6 pm Saturday: 7 am – 6 pm
Show the code
<div class="scroll-demo x w-100" tabindex="0" role="region" aria-label="Opening hours" data-allow-x>
<span class="badge">Sunday: 7 am – 6 pm</span> <span class="badge">Monday: 7 am – 6 pm</span> <span class="badge">Tuesday: 7 am – 6 pm</span> <span class="badge">Wednesday: 7 am – 6 pm</span> <span class="badge">Thursday: 7 am – 6 pm</span> <span class="badge">Friday: 7 am – 6 pm</span> <span class="badge">Saturday: 7 am – 6 pm</span>
</div>