Stack

Declaration

@Stack {
    @ContentAndMedia { ... }
}

Overview

Use the Stack directive to horizontally arrange between one and three groupings of text and media (images or videos) in a section on a tutorial page.

@Tutorial(time: 30) {
    
    ...
    
    @Section(title: "Add a customization view") {
        @ContentAndMedia {
            Add the ability for users to customize sloths and select their powers.
            
            @Image(source: 01-creating-section2.png, alt: "An outline of a sloth surrounded by four power type icons. The power type icons are arranged in the following order, clockwise from the top: fire, wind, lightning, and ice.")
        }
        
        @Stack {
            @ContentAndMedia {
                ...
            }

            @ContentAndMedia {            
                ...            
            }

            @ContentAndMedia {
                ...
            }
        
        }            
        ...
 
    }
}

Example of a 1-column stack:

[Image]

Example of a 2-column stack:

[Image]

Example of a 3-column stack:

[Image]

Contained Elements

A stack contains the following items:

ContentAndMedia

A grouping containing text and an image or a video. At least one is required ContentAndMedia element is required. (optional)

Containing Elements

The following items can include a stack:

• Section

Topics

Optional Directives

• ContentAndMedia

See Also

Customizing Page Layout

• ContentAndMedia