The list-table hybrid GitHub uses everywhere: rows are bordered list items inside one rounded container, the first cell is a bold link, and metadata hangs off the right edge in muted gray.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a GitHub-style repo list table.
1. Container: one rounded box — 1px #E2E8F0 border, 6px radius. Rows divide it with the same 1px border; no outer-less floating rows.
2. Header row: #F8FAFC background with 12px #64748B labels and result counts.
3. Primary cell: the name as a 16px semibold link in #4F46E5 that underlines on hover; description below at 14px #64748B.
4. Metadata (language dot, stars, updated time) right-aligned, 12px #64748B, with 16px octicon-style icons.
5. Row hover: no background change on the row itself — only the link responds. Rows are containers, not buttons.
6. Labels/badges: 12px, 1px border in #E2E8F0, 2em radius, e.g. "Public".The list-table hybrid GitHub uses everywhere: rows are bordered list items inside one rounded container, the first cell is a bold link, and metadata hangs off the right edge in muted gray.
Click headers to sort, rows to select — hover styling matches the exported rules.
Click headers to sort, rows to select — hover styling matches the exported rules.