# Page layouts
> Page layouts describe the structure of a page. It defines how the content is positioned, sized and how to work with sections and different areas of content.

## Dashboard

Example for a dashboard with 4 widgets.

Example for a dashboard with 4 widgets with a different grid.

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use a dashboard to show a comprehensive overview of data from different
      sources. Dashboards are useful for monitoring, measuring, and analyzing
      relevant data in key areas. They often serve as the main view of an
      application.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The dashboard shows a number of widgets that are positioned on a grid. You
      can choose your grid corresponding to your requirements. However we
      recommend to reduce the amount of widgets on a dashboard to appr. 6,
      otherwise widgets might become too small to read.
      <br />
      Each widget can be used to display different information. Often they also
      offer access to specific landing pages to see more details.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Usually the dashboard should be one page without any page scrolling.
      Instead the widgets may get scrollbars when their content does not fit.
      The widgets should have flexible heights and width to be responsive
      towards the viewport.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/card">Card</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Regular landing page

Example for a landing page

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use a landing page to show specific content and/or allow specific
      interactions. Landing pages are often combined with a tab navigation or a
      sidebar navigation.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      In contrast to the dashboard which accumulates data from different topics,
      a landing page should have a clear focus on one topic.
      <br />A landing page should have a prominent title at the top. Underneath
      you may position the content, such as tables, text blocks, forms, etc. It
      is also valid to use widgets here.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Landing pages may exceed the viewport height and offer vertical page
      scrolling.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/card">Card</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

### Landing page with centered layout

Example for a page with a centered layout

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use a page with a centered layout if you have a landing page with very
      little content.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      A landing page with a centered layout offers a nice way to show little
      content. It creates a nice focus on it and makes use of the space.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The content is horizontally centered. Vertically scrolling might occur.
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Map based layout

Example for a map based layout

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use this layout when your central element is a map.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      This is a very specific layout where data is visualized on a map. This is
      often combined with a sidebar layout, since that offers the most space for
      the map.
      <br />
      Sometimes cards are place on top of the map to display important key
      values or other information.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The map scrolls to each side while going underneath elements like the
      sidebar or the header.
    </DataList.Value>
  </DataList.Row>
</DataList.Root>