Properties & Styling

Every component has a set of style properties that control its appearance and layout. These map directly to CSS properties, with a few AppFunnel-specific additions.

Layout

Containers (Stack, Grid) use flexbox or grid for layout. Child components have flex-child properties.

Container Properties

Property	Values	Description
`flexDirection`	`row`, `column`, `row-reverse`, `column-reverse`	Main axis direction.
`justifyContent`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	Alignment along the main axis.
`alignItems`	`flex-start`, `flex-end`, `center`, `stretch`, `baseline`	Alignment along the cross axis.
`flexWrap`	`nowrap`, `wrap`, `wrap-reverse`	Whether children wrap to new lines.
`gap`	CSS length	Space between children.

Flex Child Properties

Property	Description
`flexGrow`	How much the item grows relative to siblings.
`flexShrink`	How much the item shrinks relative to siblings.
`flexBasis`	Initial size before grow/shrink is applied.
`alignSelf`	Override parent’s `alignItems` for this child.
`order`	Visual order override.

Grid Properties

Property	Description
`gridTemplateColumns`	Column track sizes (e.g., `1fr 1fr`, `repeat(3, 1fr)`).
`gridTemplateRows`	Row track sizes.
`justifyItems`	Default alignment for all grid items: `start`, `end`, `center`, `stretch`.

Size

Property	Description
`width`	Explicit width.
`height`	Explicit height.
`minWidth` / `maxWidth`	Width constraints.
`minHeight` / `maxHeight`	Height constraints.

All size values accept any CSS length unit: px, %, vh, vw, rem, etc.

Spacing

Padding

Controls the internal space between a component’s border and its content.

Property	Description
`paddingTop`	Top padding.
`paddingRight`	Right padding.
`paddingBottom`	Bottom padding.
`paddingLeft`	Left padding.

Margin

Controls the external space around a component.

Property	Description
`marginTop`	Top margin.
`marginRight`	Right margin.
`marginBottom`	Bottom margin.
`marginLeft`	Left margin.
`margin`	Shorthand for all sides.

Virtual Properties

AppFunnel adds virtual spacing properties that set both sides of an axis at once:

Virtual Property	Sets
`paddingVertical`	`paddingTop` + `paddingBottom`
`paddingHorizontal`	`paddingLeft` + `paddingRight`
`marginVertical`	`marginTop` + `marginBottom`
`marginHorizontal`	`marginLeft` + `marginRight`

Individual side values always take precedence over virtual properties. If you set paddingVertical: 16px and paddingTop: 8px, the top will be 8px and the bottom will be 16px.

Typography

Property	Values	Description
`fontSize`	CSS length	Font size.
`fontWeight`	`100`–`900`, or named weights	Font weight.
`fontFamily`	Font name	Font family.
`lineHeight`	Number or CSS length	Line height.
`letterSpacing`	CSS length	Letter spacing.
`textAlign`	`left`, `center`, `right`, `justify`	Horizontal text alignment.
`textDecoration`	`none`, `underline`, `line-through`, etc.	Text decoration.
`textTransform`	`none`, `uppercase`, `lowercase`, `capitalize`	Text case transformation.
`fontStyle`	`normal`, `italic`, `oblique`	Font style.
`whiteSpace`	`normal`, `nowrap`, `pre`, `pre-line`, `pre-wrap`	Whitespace handling.

Colors

Property	Description
`color`	Text and icon color.
`background`	Background color, gradient, or image.
`borderColor`	Border color (all sides).
`borderTopColor` / `borderRightColor` / `borderBottomColor` / `borderLeftColor`	Per-side border colors.

All color properties accept any CSS color value: hex (#ff0000), rgb, rgba, hsl, named colors, or CSS variables (var(--color-primary)).

Funnel Color Variables

Colors defined in funnel settings are available as CSS custom properties: var(--color-{name}). Define a color named primary in settings, then reference it as var(--color-primary) in any color property or Custom CSS.

Borders

Property	Description
`borderWidth`	Border width (all sides).
`borderTopWidth` / `borderRightWidth` / `borderBottomWidth` / `borderLeftWidth`	Per-side border width.
`borderStyle`	`none`, `solid`, `dashed`, `dotted`, `double`.
`borderRadius`	Corner radius (all corners).
`borderTopLeftRadius` / `borderTopRightRadius` / `borderBottomRightRadius` / `borderBottomLeftRadius`	Per-corner radius.

Effects

Property	Description
`opacity`	0 (transparent) to 1 (opaque).
`boxShadow`	CSS box shadow (e.g., `0 4px 12px rgba(0,0,0,0.1)`).
`backdropFilter`	Backdrop effects (e.g., `blur(10px)`).
`filter`	CSS filters (e.g., `blur()`, `brightness()`, `grayscale()`).
`transform`	CSS transforms (e.g., `rotate(5deg)`, `scale(1.1)`).

Position

Mode	Behavior
`static`	Default document flow.
`relative`	Offset from normal position. Use `top`, `right`, `bottom`, `left` for offset.
`absolute`	Positioned relative to the nearest positioned ancestor. Removed from document flow.
`fixed`	Positioned relative to the viewport. Stays in place on scroll.
`sticky`	Sticks to a scroll position. Normal flow until the scroll threshold, then fixed.

When using absolute, fixed, or sticky, configure top, right, bottom, left, and zIndex to control placement.

Visibility & Display

Property	Values	Description
`display`	`flex`, `block`, `inline`, `none`, `grid`	Display mode. `none` hides the element.
`visibility`	`visible`, `hidden`	Hides the element but preserves its space in the layout.
`hidden`	`true`, `false`	AppFunnel-specific: completely removes the component from rendering.

The hidden property is the recommended way to conditionally show/hide components. Combine it with Dynamic Properties to toggle visibility based on variable values.

Overflow & Clipping

Property	Values	Description
`overflow`	`visible`, `hidden`, `scroll`, `auto`	How content that exceeds the component’s bounds is handled.
`overflowX` / `overflowY`	Same as `overflow`	Per-axis overflow control.

Object Fit (Images & Video)

Property	Values	Description
`objectFit`	`fill`, `contain`, `cover`, `none`, `scale-down`	How the media scales within its container.
`objectPosition`	CSS position (e.g., `center`, `top left`)	Alignment of the media within its container.
`aspectRatio`	Ratio string (e.g., `16/9`, `1/1`)	Fixed aspect ratio.