PageLayout_Template.cmp

PageLayout_Template.cmp

<!--
 - Use this component as a template for custom page layouts
 - siteforceContentArea, slds-col_padded & com-layout-column are Customer Service (Napili) classes that match
 - page layout classes in that OTB theme
 -->

<aura:component description="Peak_PageLayout_Template" implements="forceCommunity:layout" access="global">

    <aura:attribute name="ContentHeader" type="Aura.Component[]" />
    <aura:attribute name="ContentSubHeader" type="Aura.Component[]" />
    <aura:attribute name="Content" type="Aura.Component[]" />
    <aura:attribute name="Content2" type="Aura.Component[]" />
    <aura:attribute name="Sidebar" type="Aura.Component[]" />
    <aura:attribute name="Sidebar2" type="Aura.Component[]" />
    <aura:attribute name="ContentSubFooter" type="Aura.Component[]" />
    <aura:attribute name="ContentFooter" type="Aura.Component[]" />

    <section>

        {!v.ContentHeader}

        <div class="slds-container_center slds-container_x-large siteforceContentArea slds-p-vertical_medium">
            <lightning:layout multipleRows="true">
                <lightning:layoutItem size="12" class="slds-col_padded comm-layout-column">
                    {!v.ContentSubHeader}
                </lightning:layoutItem>
                <lightning:layoutItem size="12" mediumDeviceSize="8" class="slds-col_padded comm-layout-column">
                    {!v.Content}
                </lightning:layoutItem>
                <lightning:layoutItem size="12" mediumDeviceSize="4" class="slds-col_padded comm-layout-column">
                    {!v.Sidebar}
                </lightning:layoutItem>
                <lightning:layoutItem size="12" mediumDeviceSize="4" class="slds-col_padded comm-layout-column">
                    {!v.Sidebar2}
                </lightning:layoutItem>
                <lightning:layoutItem size="12" mediumDeviceSize="8" class="slds-col_padded comm-layout-column">
                    {!v.Content2}
                </lightning:layoutItem>
                <lightning:layoutItem size="12" class="slds-col_padded comm-layout-column">
                    {!v.ContentSubFooter}
                </lightning:layoutItem>
            </lightning:layout>
        </div>

        {!v.ContentFooter}

    </section>
</aura:component>