Layout

forceCommunity:layout

Enables a component to be used as a custom layout for creating pages in the Experience Builder.

For Use In

Experience Builder Sites

::::::tabset{tabs='["Develop", "Specifications"]'}

:::::tab

To appear in Experience Builder as a custom layout, a component must implement the forceCommunity:layout interface.

Here's the sample code for a simple two-column content layout.

<aura:component implements="forceCommunity:layout" description="Custom Content Layout" access="global">
    <aura:attribute name="column1" type="Aura.Component[]" required="false"></aura:attribute>
    <aura:attribute name="column2" type="Aura.Component[]" required="false"></aura:attribute>

    <div class="container">
        <div class="contentPanel">
            <div class="left">
                {!v.column1}
            </div>
            <div class="right">
                {!v.column2}
            </div>
        </div>
    </div>
</aura:component>

Mark your resources, such as a component, with access="global" to make the resource usable outside of your own org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Experience Builder user in another org.

Next, add a CSS resource to your component bundle to style the content layout. CSS resources must be named componentName.css.

.THIS .contentPanel:before,
.THIS .contentPanel:after {
  content: " ";
  display: table;
}
.THIS .contentPanel:after {
  clear: both;
}
.THIS .left {
  float: left;
  width: 50%;
}
.THIS .right {
  float: right;
  width: 50%;
}

Optionally, to define a custom icon for the content layout component, you can add an SVG resource to your component bundle.

For more information, see Using Components in the Lightning Aura Components Developer Guide.

:::::

:::::tab

:::::

::::::