<div class="ui vertical stripe segment [[+background]]">
    <div class="ui [[+container_type]] [[+alignment]] container">
        [[+main]]
    </div>
</div>
Source

<div class="ui vertical stripe segment [[+background]]">
    <div class="ui [[+container_type]] container">
        <div class="ui two column stackable doubling [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
            </div>
        </div>
    </div>
</div>
Source

<div class="ui vertical stripe segment [[+background]]">
    <div class="ui [[+container_type]] container">
        <div class="ui three column stackable doubling [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
                <div class="column">[[+col_3]]</div>
            </div>
        </div>
    </div>
</div>
Source

<div class="ui vertical stripe segment [[+background]]">
    <div class="ui [[+container_type]] container">
        <div class="ui four column stackable doubling [[+padding]] [[+alignment]] [[+divider]] grid">
            <div class="row">
                <div class="column">[[+col_1]]</div>
                <div class="column">[[+col_2]]</div>
                <div class="column">[[+col_3]]</div>
                <div class="column">[[+col_4]]</div>
            </div>
        </div>
    </div>
</div>
Source

<div class="ui vertical stripe segment [[+background]]">
    <div class="ui [[+container_type]] container">
        <div class="ui stackable doubling [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="column">[[+main]]</div>
                <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
            </div>
        </div>
    </div>
</div>
Source

<div class="ui vertical stripe segment [[+background]]">
    <div class="ui [[+container_type]] container">
        <div class="ui stackable doubling [[+padding]] [[+alignment]] [[+divider]] equal width grid">
            <div class="row">
                <div class="[[+sidebar_width]] wide column">[[+sidebar]]</div>
                <div class="column">[[+main]]</div>
            </div>
        </div>
    </div>
</div>
Source

<div class="ui vertical stripe pattern segment [[+background]]">
    <div class="ui [[+container_type]] [[+alignment]] container">
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonField`
            &then=`setPatternPlaceholders? &cbField=`[[+pattern_name]]` &prefix=`cf_[[+idx]]_[[+unique_idx]]``
        ]]]]
        [[[[If?
            &subject=`[[+pattern_template]]`
            &operator=`EQ`
            &operand=`patternLayoutBosonLayout`
            &then=`setPatternPlaceholders? &cbLayout=`[[+pattern_name]]` &prefix=`cl_[[+idx]]_[[+unique_idx]]``
        ]]]]

        [[!$cbLayoutPatternPreview:toPlaceholder=`preview_[[+idx]]_[[+unique_idx]]`?
            &preview=`[[+preview]]`
            &code=`[[+code]]`
            &sidebar_width=`[[+sidebar_width]]`
            &pattern_name=`[[+pattern_name]]`
            &pattern_template=`[[+pattern_template]]`
            &raw_tags=`[[+raw_tags]]`
            &rendered_tags=`[[+rendered_tags]]`
            &idx=`[[+idx]]`
            &unique_idx=`[[+unique_idx]]`
        ]]

        [[[[modifiedIf?
            &subject=`[[+pattern_template]]`
            &operator=`contains`
            &operand=`Electron`
            &then=`
                $toolbarPatternElectron?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_status=`[[+pattern_status]]`
                `
            &else=`
                $toolbarPattern?
                    &pattern_name=`[[+pattern_name]]`
                    &pattern_template=`[[+pattern_template]]`
                    &pattern_status=`[[+pattern_status]]`
                    &idx=`[[+idx]]`
                    &unique_idx=`[[+unique_idx]]`
                `
        ]]]]

        [[[[modifiedIf?
            &subject=`[[+pattern_template]]`
            &operator=`containsnot`
            &operand=`Electron`
            &then=`+preview_[[+idx]]_[[+unique_idx]]`
        ]]]]

        [[+info]]
    </div>
</div>
Source

[[+main]]

<div class="ui vertical backyard segment secondary">
    <div class="ui container">
        <div class="ui accordion">
            <div class="title">
                <button class="ui small primary circular icon button" tabindex="[[+idx]]">
                    <i class="plus icon"></i>
                </button>
            </div>
            <div class="content">
                <div class="ui stackable relaxed equal width grid">
                    <section class="column">
                        <h2>[[+layout_title]]</h2>
                        [[+info]]
                    </section>
                    <aside class="[[+sidebar_width]] wide column">
                        <div class="ui nested middle aligned equal width toolbar grid">
                            <div class="nine wide column">
                                <a href="[[++site_url]]manager/?a=resource/update&id=[[*id]]" class="ui tiny basic button">
                                    Edit in MODX
                                </a>
                            </div>
                            <div class="right aligned column">
                                <i class="disabled heart outline link icon with popup"
                                   data-content="[[%romanesco.patterns.comment_tooltip]]"
                                   data-position="top center"></i>
                                <i class="disabled comment outline link icon with popup"
                                   data-content="[[%romanesco.patterns.comment_tooltip]]"
                                   data-position="top center"></i>
                            </div>
                        </div>

                        <div class="ui divider"></div>

                        <h5 class="ui disabled header">ContentBlocks used</h5>

                        <div class="ui list">
                            [[+meta]]
                        </div>
                    </aside>
                </div>
            </div>
        </div>
    </div>
</div>
Source