---
title: "Page Elements"
description: "Overview on Global Elements such as Section, Grid, and navigational Elements which are used for all Pages. "
path: https://www.eonshowroom.eon.com/en/page-elements.html
lastModified: 2025-01-07T11:51:39.124Z
---

# Page Elements

![Rocks](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/GettyImages-1213205087%3A2-1?fmt=webp)

## Page Elements

##### These Components are adding Structure to Pages and helps Users to orientate!

- Sections, Grids, Boxes, & Spacers
- Navigation and Footer
- Micro Navigations

## Section

Structure, Pages

![Section](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A2-1?fmt=webp)

The Section is used to devide a Page into different Parts and provide the Background Colors, Images, or Videos.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/content-section.html)

## Grid

Structure, Pages

The Grid Control Component features different Grid Layouts for structuring a Page. The characteristic depends on Viewport.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/grid.html)

## Box

Pages, Structure, Teaser

The Box Component features colored Background for Components and can be used for structuring and highlighting Content.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/box.html)

## Spacer

Structure, Pages

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/spacer%3A2-1?fmt=webp)

The Spacer Component is used to create Space between Components for Structuring a Page.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/spacer.html)

## Web Navigation

Structure, Navigation, Experience Fragments

![Web Navigation](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/new-web-navigation_composition%3A2-1?fmt=webp)

The Web Navigation itself consists of three Parts. One is the Web Meta Navigation, one is the Web Toolbar Navigation, and another one is the Web Main Navigation.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/new-web-navigation.html)

## Third Level Navigation

Experience Fragments, Structure, Navigation

The Third Level Navigation Component can be used to offer an additional Navigation on a Page.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/3rd-level-navigation.html)

## Breadcrumb

Structure, Navigation

![Bread­crumb](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/breadcrumb_edit-pagetemplate%3A2-1?fmt=webp)

The Breadcrumb Component can be used as Secondary Navigation.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/breadcrumb.html)

## Anchor Navigation

Navigation

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/anchor-nav%3A2-1?fmt=webp)

The Anchor Navigation Component can be used to provide an optional Navigation e.g for better Orientation on very long Pages.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/anchor-navigation.html)

## Contact Bar

Structure, Navigation

The Contact Bar Component can be used to offer User the Option to have the Contact Details directly at Hand.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/contact-bar.html)

## Footer

Structure, Navigation

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/footer-area-clickable%3A2-1?fmt=webp)

The Footer can consists of three Components: Footer Section, Footer Grid (with Site Links and Contactlist), and Footer Bar.

[Have a look?](https://www.eonshowroom.eon.com/en/page-elements/footer.html)