--- title: "Content Section" description: "The Section is used to devide a Page into different Parts and provide the Background Colors, Images, or Videos." path: https://www.eonshowroom.eon.com/en/page-elements/content-section.html lastModified: 2025-01-29T12:26:04.969Z --- # Content Section # Section [How to Configure](#how-to) ### Description The Component Component can be used to divide a Page into different Parts and provide the Background for Components to feature the Background Sensitivity of the Components. - Helps to divide Page into Content Parts (Sections) - Background Color can be configured, which is affecting any Component in Section - Instead of a Background Color, an Image or Video as Background is also possible - Anchor Text can be added and used for Anchor Navigation or deep Links - Parent for Grid Component, different Grids can be combined in a Section [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-section--interactive) ### Inspirations Find Inspiration also on all other Showroom Pages. ### Background Video Section ##### Only decorative Videos should be used as Background as the shown Image or Video Part will differ per Viewport. #### Be Aware! Configure Components to have white Color Scheme if used on Image Section. Not all Components might have that Scheme available. Manual Adjustment in Color Configuration of the Components is needed. Video type: file Video source: https://www.eonshowroom.eon.com/content/dam/foundationNG/videos/EON_Pattern_4_Moving_1920x1080.mp4 ### Usage Rules & Features ##### Features - Helps to divide Page into Content Parts (Sections) - Parent for Grid Component, different Grids can be combined in a Section ##### Properties - Anchor Text can be added and used for Anchor Navigation or deep Links - Section ID can be configured - Parent for Grid Component, different Grids can be combined in a Section - Span contained Content over full Width - Remove top and / or bottom Margins - Remove Grid Margins ##### Design - Background Color can be configured, which is affecting any Component in Section - Instead of a Background Color, an Image or Video as Background is also possible ##### In which Grid Columns does it fit? **Never put a Section in a Grid !**Section is the Parant Component of a Grid. ##### DO's - Use it as Parent Component of Grid - Use Span over full Width and remove Grid Margins Options only for special Cases, e.g. for Multi Content Stage on it ##### DONT's - Do not use Section with Image or Video Background with much Content on it - Do not use YouTube Video as Section Background as it will not look good ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_prop_id-anchor%3A3-4?fmt=webp) ### Configure Section ID & Anchor Text Editor can enter a Section ID. This allows the Editor to set an Anchor Link elsewhere on the Page to directly jump to this Section. Moreover, Editor can decide that it should appear in Anchor Navigation by checking corresponding Checkbox and entering an Anchor Text to a Section. This Text will be displayed in [Anchor Navigation](/content/foundationNG/en/page-elements/anchor-navigation.html) if configured. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_prop_placement%3A3-4?fmt=webp) ### Options for Placement inside Section A Section itself covers full Width of Viewport. But contained Grids by default have some Space to left and right, as well as to top and bottom of the Section. These Spaces can be removed by checking the corresponding Checkboxes: - Span over full Width This removes all Space on outer left and outer right of a Section. Using this Option makes Content fill the full Width of the Section. - Remove Grid Margins This removes space between all Component inside a Section. - Remove Top-Space This removes all Space in Top of a Section. Therefore, it puts Content directly in Top with no Spacing to previous Section. - Remove Bottom-Space This removes all Space in Bottom of a Section. Therefore, it puts Content directly on Bottom with no Spacing to the next Section. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section-spacings%3A2-1?fmt=webp) [Check also Spacing Options of Grid](https://www.eonshowroom.eon.com/en/page-elements/grid.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_back-selection%3A3-4?fmt=webp) ### Choose a Background Type Editor can select between Color, Image, or Video to be used as Background Type. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_back-color%3A3-4?fmt=webp) If Editor has choosen Color as Background Type, the Color Scheme can be selected. **Depending** on the Color Scheme the Color for the Components in it will adjust automatically, if not set manually. Available Color Scheme are: - Neutral 100 - Neutral 300 - Red 500 - Transparent ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_back-image%3A3-4?fmt=webp) If Editor has choosen Image as Background Type, three more Tabs will appear: 1. Image Desktop 2. Image Tablet 3. Image Mobile In these Tabs, Editor can add Images in same Way as for [Image Component](/content/foundationNG/en/content-elements/image.html). Furthermore, Editor can choose if it is a Dark Image or a Bright Image and choose to Darken or Lighten it or leave it is for better Readability. Beside this, Editor can change the default Color Setting. But he / she needs to make sure to select the right surrounding Background Color to achieve correct Results. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_back-video%3A3-4?fmt=webp) If Editor has choosen Video as Background Type, one more Tabs will appear: 1. Video In this Tab, Editor can add a DAM or Moving Image Video in same Way as for [Video Component](/content/foundationNG/en/content-elements/video-player.html). YouTube Video should not be used as Section Background. Furthermore, Editor can choose to Darken or Lighten the Video or leave it is for better Readability. Beside this, Editor can change the default Color setting. But he / she needs to make sure to select the right surrounding Background Color to achieve correct Results. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/section_grid-inside%3A2-1?fmt=webp) ### Add Content inside Section In Parsys of Section a first Grid is already added. Inside this Grid, Content can be added. But also additional Grids can be added to the Section. [Read more about Grids](https://www.eonshowroom.eon.com/en/page-elements/grid.html)