# Layers, components and data

A composition is layers of components. Each component is a graphic with its own elements, fields and events.

## Layers and components

**Layers** stack: one higher in the list draws over the ones below. Put graphics that share space on the same layer, such as every lower third, so you can take a whole layer off air at once.

**Components** are the graphics: a lower third, a score bug, a full-screen. Each goes on and off air on its own.

Every layer and component has an **ID**, shown at the top of the properties panel with a copy button. The control room and the [API](https://docs.airframe.tv/api/commands) use it, so give the ones you'll script against readable ids like `lower-third` before you publish.

## Elements

Elements are what you draw: text, rectangles, ellipses, images and groups. Each has a position, size and style, and can be bound to a field, so a text element shows the `name` field.

Images take a URL, or a key from the [asset library](https://docs.airframe.tv/guides/assets). Text can use an uploaded font.

## Data

Fields hold the values that change during a show. Each has a **key**, such as `homeScore`, which the API uses, and a type: text, number, true or false, colour, image or timer.

Fields live in one of three places:

- **Global** fields belong to the composition, for things every graphic shares, like team names.
- **Layer** fields belong to a layer and the components on it.
- **Component** fields belong to one component.

A field can **inherit** one further out, so a lower third's `team` shows the global `homeTeam` until it's given a value of its own.

## Events

Every component has three events, and you can add more:

| Event | Plays when |
| --- | --- |
| **In** | It goes to air. |
| **Out** | It comes off air. |
| **Change** | One of its trigger fields changes while it's on air, such as the score. |
| **Custom** | You fire it by name from the control room or with [invoke](https://docs.airframe.tv/api/commands#invoke), like `Goal`. |

On the timeline, each element in an event moves with a preset or with keyframes.

## Timers

A timer field shows a time that runs by itself: a **countdown**, a **count-up**, a countdown **to a time of day**, or a **clock**. Countdowns and count-ups are started, paused, reset and set from the control room or with the [timer command](https://docs.airframe.tv/api/commands#timer). A countdown can fire an event on a component when it reaches zero.