Container

The Container component is a layout component used to organize content into columns or rows. Each item acts as a section where available components can be placed.

Preview

Fields

  • container (default: columns) - A switchable field to define layout direction:

    • columns - Lays out content in vertical columns.

    • rows - Lays out content in horizontal rows.

  • count (required, default: 3) - Number of layout sections:

    • Radio buttons from 1 to 5.

    • Represents the number of columns or rows based on the value of the container field.

Behavior

  • User must select either rows or columns.

  • Based on the selected layout direction:

    • If columns is selected, child components will be displayed in equally divided vertical columns.

    • If rows is selected, child components will be stacked horizontally in equal rows.

  • Components can be added to each column or row area individually.

Creating the component

To create this component in your project, run:

npm run mgnl -- create-component Container -p container
This command adds a local copy of the component to your project. You can fully customize it afterward.

Available in

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules