function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Cory IlerCory Iler 

Custom Home Page Template with Header

I am looking at creating a custom home page template in Lighting but I can't seem to get a header added into this. I currently have the three regions displaying fine but for some reason am a bit lost on how to add a header that spans all three regions accross the top.

Here is my component markup:
<aura:component implements="lightning:homeTemplate" 
                description="A home page you always dreamed of, 3 columns." >
    <aura:attribute name="region_header" type="Aura.Component[]" />
    <aura:attribute name="column1" type="Aura.Component[]" />
    <aura:attribute name="column2" type="Aura.Component[]" />
    <aura:attribute name="column3" type="Aura.Component[]" />
    
    <div>
        <lightning:layout horizontalAlign="spread" pullToBoundary="small">
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column1}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">         
                {!v.column2}
            </lightning:layoutItem>
            <lightning:layoutItem size="4" flexibility="grow" 
                                  padding="around-small">
                {!v.column3}
            </lightning:layoutItem>
        </lightning:layout>
    </div> 
</aura:component>

And here is the design markup:
<design:component label="3 Column Page">
    <flexipage:template >
        <flexipage:region name="region_header"    defaultWidth="Medium" />
      <flexipage:region name="column1" defaultWidth="Medium" />
      <flexipage:region name="column2" defaultWidth="Medium" />
      <flexipage:region name="column3" defaultWidth="Medium" />
  </flexipage:template>
</design:component>
steve nabors 7steve nabors 7

Add this before your first lightning:layout line,  after the first div

<div class="slds-m-bottom_small">{!v.region_header}</div>