Back to Docs

Elements & Containers

Container Model

RAVENCIBuilder uses a nested container model:

  • Section — The outermost wrapper. Full-width by default.
  • Column — Lives inside a section. Controls width distribution.
  • Container — A generic wrapper for grouping elements.

All containers support Flexbox and CSS Grid layout modes.

Built-in Elements

RAVENCIBuilder ships with 60+ elements out of the box:

Layout

  • Section, Column, Container

Content

  • Heading, Text Editor, Image, Video, Icon, Icon List, Separator, Spacer

Interactive

  • Button, Icon Button, Tabs, Accordion, Counter, Progress Bar, Alert

Media

  • Image, Gallery, Video, Image Slider

Navigation

  • Menu, Breadcrumbs, Search Form

Element Options

Every element has three option panels:

  1. General — Element-specific content settings
  2. Styling — Visual properties (colours, spacing, borders, typography, shadows, transforms)
  3. Advanced — CSS ID, CSS classes, custom CSS, animations, visibility conditions (Pro)

Nesting

Elements can be nested inside containers to any depth. The tree view helps manage complex structures.