> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dogebot.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Layers

> The pieces your card is made of: text, avatars, pictures, shapes, badges, bars and grids.

A card is made of **layers**. Each layer is one piece of the card, like a line of text or a picture. Layers sit on top of each other, like paper cut-outs on a table.

## Kinds of layers

> **Text**
>
> Words on your card. Text can show values, like `{user_displayName}`.
>
> Add text from the **Text** tab: headings, subheadings, ready-made pairs and **Seasonal headings**.

> **Avatar**
>
> Someone's profile picture, in a circle or a square. On a welcome card, this is the new member's picture.

> **Picture**
>
> Any picture you uploaded, like a background or your logo. See [Templates and your pictures](/card-studio/templates-and-your-pictures).

> **Shape**
>
> A rectangle, circle or line. Add shapes from the **Shapes** tab.

> **Badge**
>
> A small label, like a rank.

> **Bar**
>
> A progress bar, like XP to the next level.

> **Grid**
>
> A table, like a leaderboard.

## The Layers tab

Open the **Layers** tab on the left. It lists every item on your card, in order.

* The layer at the **top** of the list is in **front** of the others.
* Click a layer in the list to select it.

## Working with a layer

Select a layer. The quick-edit bar above the card shows these buttons:

| Button | What it does |
| - | - |
| **Forward and back** | Moves the layer in front of, or behind, other layers. |
| **Lock** | Stops the layer from moving by mistake. |
| **Duplicate** | Makes a copy. Shortcut: **Ctrl + D**. |
| **Delete** | Removes the layer. Shortcut: **Delete**. |
| **Line up** | Lines it up with the edges or the middle of the card. |

The right side of the editor has every setting for the selected layer: colours, fades, borders, roundness, shadows and more.

## Values in layers

Text, pictures, bars and grids can all show values. Press the **insert a value** button next to a box.

> **Example: a rank card**
>
> * A **text** layer: `{user_displayName}`
> * An **avatar** layer: the person's picture
> * A **text** layer: `Coins: {DBVAR_coins}`
> * A **bar** layer that shows how close they are to the next level

See [Built-in variables](/variables/built-in-variables) for values you can use.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.