---json
{
    "aliases": [
        { "path": ":docs:theme:element:docs:theme:element:element" }
    ],
    "featured-raster-image": ":docs:layout:component:undraw_website_builder_re_ii6e.png",
    "name": "Layout Elements",
    "page_id": "ifvw8jwovcnrkth0di8h2",
    "template": "index-median"
}
---


<box align="text-center">
====== Template Layout Elements ======
<text lead>The beauty's design</text>

{{docs:layout:component:undraw_website_builder_re_ii6e.png?0x250&ratio=21:9}}


Every [[:docs:theme:template:template|template]] is composed of elements that create a ''layout'' design.


They can use:
<box width="fit-content" align="text-start center">
  * All elements (ie the [[:docs:theme:template:holy|holy template]])
  * to no element at all (ie the [[docs:theme:template:minimal|blank template]])
</box>
\\
\\

{{:docs:theme:element:layout_element.svg?0x250 }}

</box>



^ Element ^ Description ^
| [[:docs:theme:element:main|Main Content]] | The main content element is where the content of the page is rendered |
| [[:docs:theme:element:main-header|Main header]] | The [[main|content]] header |
| [[:docs:theme:element:main-footer|Main footer]] | The [[main|content]] footer |
| [[:docs:theme:element:page-side|Page side (or sidebar)]] | The sidebar is located at the side of the ''main area'' (all main elements) |
| [[:docs:theme:element:page-header|Page header]] | The page header (known as a fat header) is located at the top of your page |
| [[:docs:theme:element:page-footer|Page footer]] | The page footer (known as a fat footer) is located at the bottom of your page |
| [[docs:theme:element:railbar|Railbar]] | The action menu is located at the end/right side of your page |
| [[docs:theme:element:toc|Table of content]] | The Table of Content |