FLIN App

Text Content

Simple text content with proper spacing and typography.

Welcome Back

Your dashboard is ready. You have 5 tasks due today and 12 notifications waiting.

Stats Content

Use CardBody to display metrics in a grid layout.

Monthly Overview

Revenue

$24,500

Orders

342

Form Content

CardBody wraps form inputs with consistent padding.

Settings

List Content

Embed lists, avatars, and badges inside CardBody.

Team

Juste A.

CEO

Admin

Claude

CTO

Usage

<Card> <CardBody> <h3>Welcome Back</h3> <p>Your dashboard is ready.</p> </CardBody></Card><Card> <CardHeader>Settings</CardHeader> <CardBody> <Input placeholder="Display name" /> <Input placeholder="Email" /> </CardBody> <CardFooter><Button type="gold">Save</Button></CardFooter></Card>

Props

Prop	Type	Description
`children`	content	Main card content (any elements)

CardBody

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

Welcome Back

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

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

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