FLIN App

Basic Card

A simple content container with padding, border, and rounded corners.

Card Title

Cards provide an elevated surface for grouping related content and actions together.

Profile Card

Combine Card with Avatar, Badge, and Row for user profiles.

Juste A.

CEO, ZeroSuite

Admin

Structured Card

Use CardHeader, CardBody, and CardFooter for well-organized sections.

Account Settings

Manage your account preferences, notification settings, and security options.

Stats Card

Display metrics and KPIs in a card layout with grid columns.

Monthly Overview

Revenue

$24,500

Orders

342

Customers

1,205

Growth

+8.2%

Feature Cards Grid

Cards work great in grids for feature highlights, landing pages, and dashboards.

Fast

Built for speed with a custom bytecode VM

Secure

CSRF, input validation, and SQL protection built in

Simple

One language for frontend, backend, and database

Usage

<Card> <h3>Card Title</h3> <p>Card content goes here.</p></Card><Card> <CardHeader>Title</CardHeader> <CardBody>Content here.</CardBody> <CardFooter> <Button>Cancel</Button> <Button type="gold">Save</Button> </CardFooter></Card>

Props

Prop	Type	Description
`children`	content	Any nested content

Card

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

Card Title

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

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

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

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

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