> For the complete documentation index, see [llms.txt](https://docs.incari.com/incari-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.incari.com/incari-studio/2023.1/objects-and-types/scene2d-objects/frame.md).

# Frame

A **Frame** is a **Scene2D Object** in **Incari** that acts as a 'container' to its *children* and has rigid boundaries. It is the only **Object** in **Scene2Ds** which can be a *parent*.

## Create

When a **Frame** is created, its boundaries are displayed in green, an example of which can be seen in the image below. It can then be populated with other **Objects**.

The dimensions of the **Frame** are provided in its **Attributes**.

Without any **Objects** as *children*, a **Frame** doesn't look like much:

![Frame Object Before.](/files/PIy7lWwOBJBGsSfMAbpv)

An **Ellipse** and **Rectangle** are now added as *children*. Notice the `Position` and `Size` describe these boundaries numerically. The top-left corner starts at `0,0` and it extends 100 units in both the X and Y-axes. **Objects**, however, will still appear in full outside the boundaries of the **Frame** if they happen to not be entirely encapsulated.

![Frame with Objects.](/files/6dRUJNseFJePKenEARKl)

## Attributes

![Frame Attributes.](/files/JmdYdDCEWmpKKifZn7qm)

Find a description of a **Frame's** crucial **Attributes** in the sections below.

### Hug Content

When `Hug Content` is toggled on, the size of the **Frame** is always automatically recalculated to perfectly fit all its elements. If a `Layout` is used on the **Frame** and then an **Object** is added while `Hug Content` is on, the size of the **Frame** will increase. The same happens when a `Gap` or `Padding` is added.

![Hug Content in Frames.](/files/KftjSPThM7QMd7Bka5nP)

### Layout

The `Layout` of the **Frame** can be adjusted to display its *children* horizontally or vertically. Please note that changing the `Layout` causes **Objects** to be placed at their default positions in the **Frame**. Here the gap between the **Ellipse** and **Rectangle** disappears when it is first changed to vertical.

![Frame Layout.](/files/g8wl2LWU9oqMvAx5ti04)

### Gap

This **Attribute** adds a gap between each of the **Objects** placed in the frame, with the specified distance given by the user.

![Gaps in Frames.](/files/3Zl7TGFeHepNJCe1fPFI)

### Padding

This **Attribute** adds *padding* to a **Frame** depending on what sizes are specified and for which sides. The options are `t` for top, `r` for right, `b` for bottom, and `l` for left. [Padding](https://www.w3schools.com/cssref/pr_padding.php) is often seen in the context of *CSS*. Similarly, in **Incari**, it is the extra space around elements within the confines of the **Frame**.

![Padding in Frames.](/files/QmZuL8A3kmrCi1Q7YBYZ)

### Crop

`Crop` cuts off all content which is outside of the **Frame**. However, this only applies to its *children* and not any unrelated **Objects** in the **Scene2D**.

If a *child* **Object** (or part of a *child* **Object**) is moved outside the boundary of the **Frame** and `Crop` is toggled on, the **Object** (or part of it) will no longer be visible.