Sections, Containers, and Bricks

Every Sellrn page is built from three nested levels: Sections, Containers, and Bricks. Understanding this hierarchy is the key to building clean, responsive layouts.

Sections

A Section (core.section) is a full-width horizontal stripe that spans the entire page width. It is the outermost layer of every page region. Think of sections as rows on your page — a hero section, a features section, a testimonials section, and so on.

Sections control:

• Background — solid color, gradient, or image background that fills the full width.
• Padding — vertical spacing above and below the section content. You can use the theme rhythm (which respects your design system spacing) or set a custom size (Small, Medium, Large, X-Large).

To add a new section, click the + button that appears between sections when you hover the canvas, or drag a Section brick from the left panel.

Containers

A Container (core.container) sits inside a Section and controls the maximum width and layout of your content. Containers center your content and prevent it from stretching uncomfortably wide on large screens.

Container controls:

• Max width — Narrow (640px), Default (1280px), Wide (1536px), or Full (edge-to-edge). Default is right for most content.
• Layout — Vertical stack (column) or Horizontal row. Row layout lets you place bricks side by side.
• Gap — spacing between the bricks inside the container.
• Alignment — left, center, or right (in row mode) and top, middle, or bottom (vertical alignment in row mode).
• Columns — when in row layout, set how many columns the bricks should span (auto, 2, 3, 4 columns).

Bricks

A Brick is the smallest unit of content. It is a single visual component — a heading, a paragraph, a button, a product grid, an image, a testimonial block, etc. Every brick has its own set of properties editable in the Inspector panel.

Bricks are grouped by category in the left panel:

• Layout — Section, Container, Spacer, Divider, Tabs, Accordion, Modal, Drawer.
• Content — Heading, Paragraph, Button, Image, Badge, CTA, Rich Text, Card, Alert.
• Marketing — Hero, Testimonial, Pricing Table, FAQ, Feature Grid, Stats, Social Links, Steps, Icon List, Marquee, Logo Cloud, Carousel.
• Commerce — Product Grid, Product Card, Add to Cart, Product Hero, Cart Drawer, Category Grid, Wishlist, RFQ Form, Product Slider.
• Media — Video, Image Gallery, Map.
• Forms — Contact Form, Newsletter Signup, Generic Form.

The hierarchy in practice

Here is how a typical hero section is structured:

Section (full-width, dark background, large padding)
  └── Container (max-width: 1280px, centered, column layout)
        ├── Heading ("The future of retail is here")
        ├── Paragraph ("Start selling in minutes...")
        └── Button ("Get started →")

And a two-column features row:

Section (light background, medium padding)
  └── Container (max-width: 1280px, row layout, 2 columns, gap: lg)
        ├── Card (icon + title + description)
        └── Card (icon + title + description)

Responsive behaviour

Sections are always full-width on every screen size. Containers collapse from multi-column to a single column on mobile automatically based on the breakpoint settings in your theme. Individual bricks also have responsive prop overrides — select a brick, switch to Tablet or Mobile view in the toolbar, and change properties only for that viewport without affecting the desktop layout.