Entry Component

List item container with centered text and optional side media (icons, images, checkboxes). Supports single-line truncation, multi-line expansion, states, shapes, variants, and sizes.

Notes

Basic usage

Simple entry

Basic entry item
With arrow
→
🔍
With icon on left

With icons + side info

📁
Documents
12 items
🖼️
Images
8 items

With checkbox

Option 1
Option 2 (checked)
Option 3 (disabled)

States

.entry-placeholder

Disabled item
🔒
No access

.entry-selected

Selected item
⭐
Favorited

.entry-checked

Checked item
📄
Selected file

Comparison

Default
Selected
Checked
Disabled

Shapes

Square (default)

Square item

.entry-rounded

Rounded item

.entry-pill (pill)

Pill item

Variants

Default (no bg/border)

Default

.entry-muted (border)

Muted

.entry-outline (dark border)

Outline

.entry-subtle (background)

Subtle

.entry-ghost (hover bg)

Ghost (hover me)

Text features

.entry-nowrap (single-line truncation)

This is a very long text that will be truncated with ellipsis when it exceeds the container width.

.entry-multiline (wrap)

Multi-line text that wraps automatically. Height adapts to content. Useful for longer descriptions in list items.

.entry-padded (extra padding)

Padded item
Padded subtle

.entry-hoverable (hover color)

Hover me to see color change

Sizes (entry-4 ~ entry-15)

entry-4
entry-5
entry-6
entry-7
entry-8
entry-9
entry-10
entry-11
entry-12
entry-13
entry-14
entry-15