FLIN App

Basic Usage

Box adds configurable padding around any content.

Content with 1.5rem padding

Padding Sizes

Compare different padding values from small to large.

0.5rem

1rem

2rem

Nested in Card

Add extra padding inside a Card for emphasis or visual separation.

Box adds extra padding inside a Card

Section Wrapper

Use Box to create padded sections within a page layout.

Settings

Usage

<Box padding="1.5rem"> <p>Content with 1.5rem padding around it</p></Box><Box padding="0.5rem">Small</Box><Box padding="1rem">Medium</Box><Box padding="2rem">Large</Box>

Props

Prop	Type	Default	Description
`padding`	string	`"0"`	CSS padding value
`children`	content	-	Content to wrap

Box

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

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

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

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