# Design and placeholders - Labelline 1.x documentation

> Shapes, colours, size, position and offset, the {discount}, {saving} and {price} placeholders, and text for screen readers.

## Text and placeholders

A label's **Text** is what shoppers read. Placeholders in curly brackets are filled in for each product:

| Placeholder | Shows | Example |
|---|---|---|
| `{discount}` | The percentage off the regular price | "25%". A variable product whose variations save different amounts (or only some of them are on sale) shows the most: "up to 30%". |
| `{saving}` | The amount off | "$10.00", or "up to $15.00" |
| `{price}` | The price shoppers pay | "$30.00", or "from $20.00" when it varies |

Click a placeholder under the text box to insert it where the cursor is.

- A text that starts with a placeholder gets a capital first letter: `{discount} off` shows "Up to 30% off".
- A label whose placeholder has nothing to show for a product, such as a `{discount}` on a product that isn't on sale, is **left off that product** rather than shown with a gap. So `{discount} off` works as a sale label even without an "On sale" condition (adding one makes your intent clear, and controls WooCommerce's sale badge the same way).
- Amounts use your store's currency format and follow its tax display setting.
- With Extendiment's Discountline active, its product discounts count too: see **Stockline, Discountline and the sale badge**.

> [!TIP]
> For variable products, `{discount} off` reads better than `−{discount}`, which would show "−up to 30%".

## Text for screen readers

Optional. When set, screen readers read this instead of the label's text: "25% off the regular price" for a label that shows "−25%", for example. Placeholders work here too. Leave it empty and screen readers read the label's text, which is real text, never only a colour.

## Shapes

| Shape | Looks like |
|---|---|
| Rectangle | Square corners |
| Rounded | Slightly rounded corners |
| Pill | Fully rounded ends |
| Circle | A round badge; the text wraps inside it. Keep it to a word or two. |
| Corner ribbon | A band across the image's corner. In the top or bottom centre position, a band across the image. |
| Tag | A label with a point, aimed at the middle of the image |

A **corner ribbon** takes its corner by itself: other labels in the same position would sit under it, so give them another position. If two ribbons share a position, only the first (by priority) shows.

## Colours and size

- **Background colour** and **Text colour**: pick from the colour picker or type a hex code.
- **Text size** in pixels (8–48). The label's padding grows with it, and a circle grows to fit.

## Position and offset

**Position** puts the label in one of six places on the image: the four corners, or the top or bottom centre. **Distance from the edge** moves it in from the side and from the top or bottom, in pixels.

Several labels in the same position stack: the first by priority sits nearest the corner, the next below it (or above it, at the bottom). The distance of a stack is that of its first label.

In right-to-left languages, left and right swap, so a "top left" label sits where the reading starts.

Labels sit on top of the image and never move anything on the page: the image keeps its size, product titles stay lined up, and clicking a label clicks the image's link as usual.

Source: https://extendiment.com/plugins/labelline/docs/1.x/design-and-placeholders