# Defining layouts

Each app has some components that repeat on every page. For example, this may be the header or the footer component. In order to make the `app.component.html` file generic across all applications layouts should be used.

> Full list of components and their properties is available in [component storybook](https://webapp-framework.developers.kasko.io/).

## Usage

In root level of the manifest the full list of layouts can be defined. Each layout must use a unique name. The `default` layout can be also overridden.

Example:

```js
{
  // ...
  "layout": {
    "default": {
      "components": [
        { "type": "header" },
        { "type": "flow" }
      ],
    },
    "custom": {
      "components": [
        { "type": "header" },
        { "type": "flow" },
        { "type": "footer" }
      ]
    }
  },
  "flow": [
    {
      "path": "first",
      "components": []
    },
    {
      "path": "second",
      "layout": "custom"
      "components": []
    }
  ]
}
```

The component with type `flow` will be replaced with whatever is defined in the screen the customer is on.

Component type `flow` can also be nested:

```js
{
  // ...
  "layout": {
    "default": {
      "components": [
        { "type": "header" },
        {
          "type": "container",
          "config": {
            "components": [
              { "type": "flow" },
            ],
          },
        },
      ],
    }
  },
  "flow": [
    {
      "path": "first",
      "components": []
    }
  ]
}
```