---
schema_version: "1"
id: b64c8da8b3c3bb5a3cb8a3928c14c7519ac558174270b155152eca4b69e55181
title: Layout
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/aura/components/forceCommunity/layout/forceCommunity-layout.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/forceCommunity-layout.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: f7ebfe719c6425a0d5c392d2b7f5dc9cc6dacb3fae6ab115787d7c1a0d639c37
products:
  - Lightning Component Reference
---
# 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.

```xml
<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`.

```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](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_intro.htm) in the Lightning Aura Components Developer Guide.


:::::

:::::tab

![No specifications to show](https://developer.salesforce.com/media/no-specs.png)


:::::

::::::