Components
Bookmark tile
A compact icon and short label make each saved destination recognizable.
On this page
Purpose and placement
A compact icon and short label make each saved destination recognizable.
Anatomy
- 64px accent square
- Icon or uppercase initial
- Truncated label
- Full label title / accessible link role
Contract
| Input or boundary | Behavior |
|---|---|
| link | id, label, url, optional icon, boardId, position |
| Normal mode | role=link and tabIndex=0 |
| Edit mode | Disable link activation; add control handles |
States and feedback
- Icon-backed tile
- Initial fallback
- Hover lift
- Edit affordances
- Dragging opacity
Interaction and composition
Normal mode handles Enter and Space and navigates via window.location.href. Edit mode disables navigation so management controls can be used. A saved tile is a div with link behavior rather than a native anchor; the public-board variant is a native anchor.
Responsive behavior
The icon size stays constant while auto-fit changes column count. Labels truncate at 88px and remain part of the full tile title.
Accessibility contract
Normal mode is focusable and keyboard-activated. Keep decorative icon hidden. A native anchor would improve context-menu/open-new-tab behavior; that is a recommendation, not the implemented contract.
Known implementation gaps
The API checks nonempty URL strings but does not consistently enforce HTTP(S) schemes at save time. Do not claim all stored destinations are safe or valid.
Source references
| Repository file | Responsibility |
|---|---|
| app/(home)/AppHome.tsx | SortableLinkIcon |
| app/api/links/route.ts | Save validation |
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0