Container Element

The Container element is a fundamental structural component used to group child elements together, managing their layout and visual appearance through CSS.

Live Preview

Container Preview

Specifications

Containers provide a flexible way to structure your page content:

  • Content Nesting: A container acts as a parent for any other Canvas Elements, effectively grouping them.
  • Text Direction: Optionally set the Direction (LTR or RTL) to support diverse language structures.
  • Visual Styling: Use the Style object or custom Tailwind Classes to apply backgrounds, padding, borders, and shadows.
  • Layout Management: Containers are frequently used with flexbox or grid classes to align their child elements correctly.
  • Animated Entrance: Apply entrance animations directly to the container for grouped motion effects.

AI Guidance

How to prompt for Containers:

  • Add a centered container with a white background and soft shadows.
  • Create a flex container that groups a heading and a button together.
  • Insert a container with LTR text direction and a gray border.