FLIN App

Basic Items

Plain text, starred, and completed items.

Plain text item

Starred item

Completed item

With Avatars

ListItems with Avatar components for contact lists.

Juste A. - CEO

Claude - CTO

Ada L. - Engineer

With Badges

ListItems with Badge components for counts and status.

Inbox 12

Sent 3

Archive 89

Trash 2

Navigation

ListItems styled as navigation links with icons.

Dashboard

Analytics

Team

Settings

Usage

<List> <ListItem>Plain text item</ListItem> <ListItem><Icon name="star" size="16" /> Starred item</ListItem> <ListItem><Avatar name="Juste" size="28" /> Juste A.</ListItem> <ListItem><Icon name="inbox" size="16" /> Inbox <Badge type="info">12</Badge></ListItem></List>

Props

Prop	Type	Description
`children`	content	Row content (text, icons, avatars, badges)

ListItem

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Basic Items

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Avatars

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } With Badges

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Navigation