---
title: "Box"
description: "The Box Component features colored Background for Components and can be used for structuring and highlighting Content."
path: https://www.eonshowroom.eon.com/en/page-elements/box.html
lastModified: 2024-11-06T15:06:57.754Z
---

# Box

# Box

### I am a Headline in a Box

Add whatever Content is wanted.
 Box Component will highlight it.

| Category | 2016 | 2017 | 2018 |
| --- | --- | --- | --- |
| Philadelphia became the first city we know of to introduce squirrels ¹ | 43.930 | 24.080 | 11.600 |
| The squirrels that we all [inline link](https://www.google.com) take for granted A cream-colored giant squirrel (Ratufa affinis) photographed at Omaha's Henry Doorly Zoo and Aquarium in Nebraska | 10.100 | 32.000 | 10.020 |
| Squirrels were put into parks where they were fed and sheltered ² | 29.100 | 16.100 | 12.290 |
| Eastern grey squirrels were captured from forested areas³ | 32.120 | 24.100 | 10.290 |

¹ This is some random footnote as an example (31st of December, 2019: 10.571 Mio €)

² Another footenote to show that more than one can be added (see: www.eon.com: 31st of December, 2020)

³ Another footenote to show that more than one can be added (see: www.eon.com: 31st of December, 2020)

[How to Configure](#how-to)

### Description

The Box Component can be used for Structuring and Highlighting Content.

- Can contain any Content
- Can be placed inside a Grid
- Helps to structure and highlight Content

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-box--interactive)

### Inspirations

#### Our Offers

Just use our Showroom to get Information about all of our Components. It will get updated at least after every new Release:

[Go to Showroom](https://www.eonshowroom.eon.com/en.html)

Try out our Video Trainings:

[Watch our Videos](https://www.eonshowroom.eon.com/en/aem-basics/video-trainings.html)

We are also offering some Trainings.
 Just register for it:

[Register to our Waiting List for General AEM Training](https://connect.eon.com/workspaces/ws-aem-e-on-digital-working-group/apps/form/aem-editor-training-waitlist)

[Register to our Waiting List for AEM Form Editing Training](https://connect.eon.com/workspaces/ws-aem-e-on-digital-working-group/apps/form/aem-webforms-training-waitlist)

Also we providing Answers for our most Frequently asked Questions:

[Check out the FAQs](https://www.eonshowroom.eon.com/en/aem-basics/faq.html)

### Box with vertical bottom Position

The Content of a Box can be vertically top, center, or bottom aligned if it is used in a Grid with same Height Option active. Default is top Alignment.

This is an Example of a vertically bottom aligned Box.

### Box with vertical center Position

The Content of a Box can be vertically top, center, or bottom aligned if it is used in a Grid with same Height Option active. Default is top Alignment.

This is an Example of a vertically center aligned Box.

### Box with vertical top Position

The Content of a Box can be vertically top, center, or bottom aligned if it is used in a Grid with same Height Option active. Default is top Alignment.

This is an Example of a vertically top aligned Box.

![First Image in a Carousel](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A2-1?fmt=webp)

### Usage Rules & Features

##### Features

- Can contain any Content

##### Properties

- Horizontal and vertical Alignment is possible

##### Design

- Structure and highlight Content with a colored Background

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | yes |
| 4 | yes |
| 5 | yes |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | yes |
| 12 | yes |

##### DO's

- Use it for Structuring and Highlighting

##### DONT's

- Don't use it to often on a Page, better keep it rarely

## Configuration

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

![Editor Dialog of Box Component](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/box_dialog%3A4-3?fmt=webp)

### Configure Box

For a Box Component there are only three different Configuration Options:

- Box Color
- Alignment (Left or Center)
- Vertical Content Position (Top, Center, or Bottom)

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

### Add Content

In Parsys of the Box Component, Editor can add any Content. All Components that can be added in a Grid can also be added inside a Box.