public class DxStackLayoutItem :
    DxModelComponent,
    IModelWrapper<IStackLayoutItemModel>

<DxStackLayout CssClass="stack-layout">
    <Items>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-header stacklayout-item">
                    Item 1
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem Length="2fr">
            <Template>
                <div class="stacklayout-content stacklayout-item">
                    Item 2
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-left-side-bar stacklayout-item">
                    Item 3
                </div>
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-right-side-bar stacklayout-item">
                    Item 4
                </div> 
            </Template>
        </DxStackLayoutItem>
        <DxStackLayoutItem>
            <Template>
                <div class="stacklayout-footer stacklayout-item">
                    Item 5
                </div>
            </Template>
        </DxStackLayoutItem>
    </Items>
</DxStackLayout>

.stack-layout {
    height: 480px;
    width: 100%;
}
.stacklayout-item {
    font-size: 1.2em;
    font-weight: 500;
    height: 100%;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stacklayout-item:before {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.4;
}

.stacklayout-header:before {
    background-color: var(--dxds-color-surface-utility-red-default-rest);
}

.stacklayout-content:before {
    background-color: var(--dxds-color-surface-utility-yellow-default-rest);
}

.stacklayout-left-side-bar:before {
    background-color: var(--dxds-color-surface-utility-green-default-rest);
}

.stacklayout-right-side-bar:before {
    background-color: var(--dxds-color-surface-utility-purple-default-rest);
}

.stacklayout-footer:before {
    background-color: var(--dxds-color-surface-utility-blue-default-rest);
    opacity: 0.5;
}
@media (max-width: 575.98px) {
    .stacklayout-item {
        font-size: 0.9em;
    }
}