Layout Components

The skeleton of your page. Master Frames to create professional, responsive designs.

Frame

The universal building block. Frames are flexible containers that can hold any content and be styled in countless ways. Every element in BrilliantNode is a Frame.

Preview

Basic Frame Container

When to use it

  • As a container for grouping other elements.
  • To create custom layouts with precise control.
  • When you need a styled box with background, borders, and spacing.

Configurable Settings

Display ModeChoose between Flex, Grid, Block, or Inline modes to control how content flows.
SizeSet width, height, min/max dimensions, and aspect ratio for precise sizing.
SpacingControl padding (inside) and margin (outside) spacing.
FillApply solid colors, gradients, or images as backgrounds.
HTML TagChoose semantic HTML tags like div, section, article, header, footer, or nav for better SEO.

Flex Row

A Frame preset configured for horizontal layouts. Items are arranged side-by-side with flexible spacing and alignment options.

Preview

Item 1
Item 2
Item 3

When to use it

  • For navigation bars and horizontal menus.
  • To place elements side-by-side (text next to image).
  • When building button groups or toolbars.

Configurable Settings

GapSpace between child elements.
AlignVertical alignment of items (start, center, end, stretch).
JustifyHorizontal distribution (start, center, end, space-between, space-around).
WrapAllow items to wrap to multiple lines when space is limited.

Flex Column

A Frame preset configured for vertical stacking. Items are arranged top-to-bottom, perfect for content sections.

Preview

Item 1
Item 2
Item 3

When to use it

  • For vertical content sections.
  • To stack cards or content blocks.
  • When building forms or vertical navigation.

Configurable Settings

GapSpace between stacked elements.
AlignHorizontal alignment of items (start, center, end, stretch).
JustifyVertical distribution of items.

Grid Layouts

Frame presets configured with CSS Grid for complex multi-column layouts. Available in 2, 3, and 4-column variations, plus a modern Bento Grid.

Preview

1
2
3
4
5
6

When to use it

  • For feature grids and card layouts.
  • Photo galleries and image grids.
  • Dashboard-style layouts with multiple sections.
  • Modern bento-style hero sections.

Configurable Settings

ColumnsDefine column structure (e.g., "repeat(3, 1fr)" for 3 equal columns).
RowsDefine row structure for precise grid control.
GapSpace between grid items.
Grid Area (Child)Make child elements span multiple columns or rows.

Centered Container

A Frame preset with max-width and auto margins, perfect for centering content on wide screens.

Preview

Centered Content (max-width: 1200px)

When to use it

  • For main content areas that should not stretch too wide.
  • To create readable text columns.
  • When building centered page sections.

Configurable Settings

Max WidthMaximum width before content stops growing (e.g., 1200px).
PaddingInner spacing to prevent content from touching edges.