Command Palette

Search for a command to run...

Overflow & Long Content

Demonstrate how Katalyst handles long text, content overflow, and scroll behavior gracefully.
Truncation with Tooltip
User Directory
ID
Name
Email
Notes
Status
1
John Doevery.long.email.address.that.exceeds.normal.column.width@extremely-long-domain-name.example.com
Active
2
Jane Smith with a Very Long Name That Exceeds Normal Widthjane@example.com
Pending
3
Bob Wilsonbob.wilson@company.com
Active
4
Alice Johnsonalice.johnson.manager@enterprise-solutions.example.com
Inactive
5
Charlie Browncharlie@example.com
Active
Cards with Overflow Handling
This is an extremely long title that would normally break the layout if not handled properly with truncation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Scrollable Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Line Clamp

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Category2 min read
Scroll Area with Affordances

Notifications

25

Item 1: This is an extremely long title that would normally break the layout if not handled properly with truncation

22h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 2: Regular item title 2

10h ago

Short description for this item.

Item 3: Regular item title 3

23h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 4: This is an extremely long title that would normally break the layout if not handled properly with truncation

19h ago

Short description for this item.

Item 5: Regular item title 5

22h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 6: Regular item title 6

19h ago

Short description for this item.

Item 7: This is an extremely long title that would normally break the layout if not handled properly with truncation

5h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 8: Regular item title 8

10h ago

Short description for this item.

Item 9: Regular item title 9

3h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 10: This is an extremely long title that would normally break the layout if not handled properly with truncation

3h ago

Short description for this item.

Item 11: Regular item title 11

12h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 12: Regular item title 12

11h ago

Short description for this item.

Item 13: This is an extremely long title that would normally break the layout if not handled properly with truncation

13h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Item 14: Regular item title 14

4h ago

Short description for this item.

Item 15: Regular item title 15

6h ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

1

Item 1: This is an extremely long title that would normally break the layout if not handled properly with truncation

22h ago

2

Item 2: Regular item title 2

10h ago

3

Item 3: Regular item title 3

23h ago

4

Item 4: This is an extremely long title that would normally break the layout if not handled properly with truncation

19h ago

5

Item 5: Regular item title 5

22h ago

6

Item 6: Regular item title 6

19h ago

7

Item 7: This is an extremely long title that would normally break the layout if not handled properly with truncation

5h ago

8

Item 8: Regular item title 8

10h ago

9

Item 9: Regular item title 9

3h ago

10

Item 10: This is an extremely long title that would normally break the layout if not handled properly with truncation

3h ago

11

Item 11: Regular item title 11

12h ago

12

Item 12: Regular item title 12

11h ago

Wide Table with Sticky Column
Order Management (12 columns)
Order IDCustomerEmailProductQtyUnit PriceDiscountTaxShippingTotalStatusDate
ORD-0001Customer 1customer1@example.comProduct Name 164$12.632%$39.14$13.35$125.01Pending1/1/2024
ORD-0002Customer 2customer2@example.comProduct Name 268$31.1514%$27.80$15.95$231.17Shipped2/2/2024
ORD-0003Customer 3customer3@example.comProduct Name 394$13.3418%$48.31$16.86$481.81Delivered3/3/2024
ORD-0004Customer 4customer4@example.comProduct Name 490$14.800%$7.29$19.33$471.65Cancelled4/4/2024
ORD-0005Customer 5customer5@example.comProduct Name 543$32.364%$45.07$16.75$219.85Pending5/5/2024
ORD-0006Customer 6customer6@example.comProduct Name 637$88.3614%$43.18$17.92$522.98Shipped6/6/2024
ORD-0007Customer 7customer7@example.comProduct Name 742$98.022%$31.32$0.12$242.55Delivered7/7/2024
ORD-0008Customer 8customer8@example.comProduct Name 89$95.1610%$44.83$4.76$224.03Cancelled8/8/2024
ORD-0009Customer 9customer9@example.comProduct Name 919$38.779%$27.21$4.21$115.84Pending9/9/2024
ORD-0010Customer 10customer10@example.comProduct Name 1099$46.139%$39.00$19.80$240.21Shipped10/10/2024

← Scroll horizontally to see all columns. First column is sticky.

Overflow Menu Pattern
Action Overflow Patterns

Document.pdf

2.4 MB • Updated 2 hours ago

Project Alpha

12 members • Active

Name
Status
Actions
Item A
Active
Item B
Draft
Item C
Draft
Form with Sticky Footer

Basic Information

Address

Preferences

All fields are required unless marked optional.