---
title: FixedHeaderAndAsidesLayout
---

---

title: FixedHeaderAndAsidesLayout

---

# FixedHeaderAndAsidesLayout

Component for use as Layout to be filled with the rest of the components.

## Props

| Name                 | Description                                                                 | Type                 | Default       |
| -------------------- | --------------------------------------------------------------------------- | -------------------- | ------------- |
| <code>devMode</code> | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code></code> |

## Slots

| Name                       | Description                                                    | Bindings<br />(name - type - description) |
| -------------------------- | -------------------------------------------------------------- | ----------------------------------------- |
| <code>header</code>        | Slot that is be used for insert content into the Header.       | None                                      |
| <code>sub-header</code>    | Slot that can be used to insert content into below the header. | None                                      |
| <code>toolbar</code>       |                                                                | None                                      |
| <code>main</code>          | Slot that is be used for insert content into the Main.         | None                                      |
| <code>left-aside</code>    | Slot that is be used for insert content into the left aside.   | None                                      |
| <code>right-aside</code>   | Slot that is be used for insert content into the right aside.  | None                                      |
| <code>extra-aside</code>   |                                                                | None                                      |
| <code>scroll-to-top</code> |                                                                | None                                      |

## Layout

This component has the following layout with fixed headers and collapsible fixed asides:

|            |   header   |               |
| :--------: | :--------: | :-----------: |
| left-aside | sub-header |  right-aside  |
|            |  toolbar   |               |
|            |    main    |               |
|            |            | scroll-to-top |

Additionally it provides an empty slot `extra-aside` to be customized by the user.

## Design Tokens

The component has also the following `Design Tokens` to configure it:

|                    token                    | default value |
| :-----------------------------------------: | :-----------: |
|       --x-size-height-layout-backdrop       |     40vh      |
|         --x-size-width-layout-aside         |     300px     |
|         --x-size-min-margin-layout          |     20px      |
|      --x-size-max-height-layout-header      |     auto      |
|          --x-size-max-width-layout          |    1440px     |
| --x-color-background-layout-header-backdrop |     white     |
|     --x-color-background-layout-header      |  transparent  |
|     --x-size-border-color-layout-header     |  transparent  |
|     --x-size-border-width-layout-header     |      0px      |
|   --x-color-background-layout-sub-header    |  transparent  |
|   --x-size-border-color-layout-sub-header   |  transparent  |
|   --x-size-border-width-layout-sub-header   |      0px      |

|                    token                    |                    use                    |
| :-----------------------------------------: | :---------------------------------------: |
|       --x-size-height-layout-backdrop       |  The height for header gradient backdrop  |
|         --x-size-width-layout-aside         |          The width of the asides          |
|         --x-size-min-margin-layout          | The min horizontal margin for the Layout  |
|      --x-size-max-height-layout-header      |   The max height for the Layout Header    |
|          --x-size-max-width-layout          |       The max width for the Layout        |
| --x-color-background-layout-header-backdrop | The background color of the head backdrop |
|     --x-color-background-layout-header      |    The background color of the header     |
|     --x-size-border-color-layout-header     |      The border color of the header       |
|     --x-size-border-width-layout-header     |       The border with of the header       |
|   --x-color-background-layout-sub-header    |  The background color of the sub header   |
|   --x-size-border-color-layout-sub-header   |    The border color of the sub header     |
|   --x-size-border-width-layout-sub-header   |     The border with of the sub header     |