Containers

Containers are layout components that help organize and structure elements within your Descope flow screens. They provide a way to group related components, control how children are arranged (row vs column, spacing, alignment), and styling options so you can match your brand and hierarchy.

Container Types

We offer both a standard and collapsible container option to add to your flow screens. The collapsible container allows users to expand or collapse sections of content, making forms and interfaces more manageable. You can set the collapsible container's default position to open or closed.

Layout and Structure

Containers can hold flow screen elements inside them, known as the container's children. Selecting a container in the Screen Builder lets you configure how those children are laid out:

• Direction: Lay out children in a row (horizontal) or column (vertical).
• Alignment: How children align on the cross axis (e.g. start, center, end, stretch) for the chosen direction.
• Justify: How children are distributed on the main axis (e.g. start, center, space-between).
• Spacing: Gap between child components inside the container.
• Padding: Internal space between the container's edges and its children (often exposed as horizontal/vertical padding in the builder).
• Width: How wide the container is relative to its parent (for example full width of the screen content area vs a narrower column).

Styling the Container

The Screen Builder includes a styling area for containers so you can customize their appearance.

• Fill: Background for the container (solid color, transparent, or an image).
• Shadow: Drop shadow around the box for depth or a flat card look.
• Border radius: Corner rounding for the whole container.
• Border: Whether an outline is shown (e.g. none vs visible).
• Border color: Outline color when a border is enabled.
• Border width: Outline thickness.