Skip to main content
OptiTech

Layout

Row Settings

Display settings on OT_LandingRow control spacing, alignment, background, column ordering, and entrance animation. Most settings correspond directly to flex CSS properties on the row container.

01

Column gap

The columnGap setting maps directly to the flex gap between columns. Applies at every breakpoint.

None0

Small8px

Medium16px

Large32px

XL64px

02

Align items

Start

Default. Short columns sit at the top of the row.

Tall
Short
Mid

Center

All columns center vertically. Useful for text-beside-image pairs.

Tall
Short
Mid

End

Columns anchor to the bottom — rare but useful for baseline grids.

Tall
Short
Mid

Stretch

Columns fill to the tallest sibling — natural flex default.

Tall
Short
Mid

03

Row background

No bg

None

Transparent — inherits section background

canvas

Canvas

Base page background

surface

Surface

Slightly raised from canvas

brand

Brand

Full brand color fill

brandDeep

Brand deep

Deeper brand shade

glass

Glass

Translucent dark overlay

04

Reverse column order

reverseColumns applies flex-row-reverseat the row's breakpoint — DOM order stays the same (accessible), only visual presentation flips. Use for alternating text/image pairs across sections.

Normal

Image
Text

Reversed

Image
Text

05

Settings reference

columnGapnone · small · medium · large · xl
alignItemsstart · center · end · stretch
justifyContentstart · center · end · between
backgroundColornone · canvas · surface · brand · brandDeep · glass
reverseColumnsfalse · true
verticalPaddingnone · small · medium · large · xl
columnRhythmnone · gentle · moderate · bold
breakpointsm · md · lg · xl (when columns go side-by-side)
entranceAnimationnone · fade · slide · parallax