Components

Container

Structure Your Content with Flexible Control.

The Container component is a flexible layout wrapper designed to help you group, organize, and space your content blocks in a clean and consistent way. Whether you’re building complex layouts or just need a reliable way to nest components, Containers give you the control to manage structure and semantics effortlessly.

From semantic HTML tagging to anchor naming and component theming, every Container is built to empower clean composition, accessibility, and visual coherence across your pages.

Smart structure made simple

  1. Flexible Wrapping with HTML tag types.
    From <div> to <nav>, pick what fits best.

  2. Group blocks into logical sections.
    Perfect for breaking up content logically.

  3. Add names for internal navigation anchors.
    Anchors to enable scroll-to functionality.

Every block, styled your way

  1. Theming Options Built In.
    Style content wrappers to your liking.

  2. Ensure alignment across devices.
    Keep your layout clean, modular, and tidy.

  3. Nesting Friendly.
    Great for structuring complex layouts.

Use Cases

The Container component is the backbone of flexible layout management. It’s used to wrap, group, and visually structure content sections, giving you full control over both layout and semantics without requiring code changes.

Common scenarios include:

  • Wrapping sections like hero blocks, CTA rows, footers, or body content

  • Structuring nested elements with spacing between them

  • Setting up navigable anchors for scroll-based navigation

  • Applying consistent layout rules across pages

  • Maintaining proper document structure with semantic tags (e.g., <section>, <nav>, etc.)

  • Enhancing accessibility with proper HTML tagging

In projects built with Vertex Forge, Containers help content editors and designers create professional layouts that scale and remain clean, regardless of how complex the page becomes.

Configuration Options & Features

The Container component is your layout Swiss Army knife, allowing for semantic structure, spacing, styling, and internal navigation.

Whether you’re wrapping major page sections or fine-tuning nested layouts, Containers ensure your content stays organized, scalable, and easy to manage.

Build flexible layouts. Enhance structure. Keep your content clean.

Name

A custom identifier for the Container. This serves two primary purposes:

  • Helps you visually identify and manage sections in the Visual Editor

  • Allows the section to be referenced in anchor links for internal navigation

The name must be URL-safe (no spaces or special characters).

Type

Choose the semantic HTML element the Container should render as. This adds structure and meaning to your output, improving both accessibility and SEO by ensuring clean and accessible markup that reflects your page’s structure and intent.

Available types include:

  • Div – generic container

  • Section – content grouping

  • Ordered List / Unordered List – structured list containers

  • List Item – use within a list

  • Navigation – semantic wrapper for navigation items

  • Cite – quote or citation area

  • Header / Footer – semantic layout elements

  • Aside – for complementary content (e.g., sidebars)

Content

This is the core of your Container, the actual content blocks nested inside. You can add any other components here (e.g., labels, images, accordions, rich text, etc.).

Use this field to structure your layouts by combining, stacking, or spacing multiple blocks together.

Component Theme

Apply styling options to the Container using Component Theme settings. These allow you to adjust appearance, spacing, and layout behavior visually.

You can also inherit or override theme presets for complete control.