Skip to main content
OptiTech

Layout

Section Settings

Display settings on OT_LandingSection control content width, vertical padding, background color, section overlap, and entrance animation. Width and spacing together define the breathing room of every page region.

01

Content width

fullFull

Edge-to-edge — no container, no padding. Use for full-bleed images, sliders, and banner backgrounds.

defaultDefault

Standard container with responsive max-width and horizontal padding. The correct choice for most content sections.

wideWide

Slightly wider than default. Useful for data-dense grids or feature-rich layout areas.

narrowNarrow

Constrained to 56rem — forces reading focus for text-primary sections like long-form copy or single CTAs.

02

Vertical spacing

verticalSpacing adds padding top and bottom to the section content area. Use Large (64px) as the default; step up to XL for hero moments, down to Small for tight utility rows like nav or banners.

None0
Small16px
Medium32px
Large64px
XL128px

03

Section background

noneNone (transparent)Inherits the page or outer background. Default.
canvasCanvasExplicit base page color — useful when surrounding context might override.
surfaceSurfaceSlightly elevated from canvas — creates a visual break without strong contrast.
brandBrandFull brand-color fill. Forces dark theme on nested tokens.
brandDeepBrand deepDeeper shade for anchoring sections. Pairs well as a footer or closing section.
glassGlassTranslucent dark overlay. Works over image or video backgrounds.

04

Settings reference

gridWidthfull · default · wide · narrow
verticalSpacingnone · small · medium · large · xl
backgroundColornone · canvas · surface · brand · brandDeep · glass
sectionOverlapnone · shallow (16px) · mid (32px) · deep (64px) · full (128px)
entranceAnimationnone · fade · slide · parallax