# Image label > An image label is a short text or an icon pinned to a corner of an image, such as "AI", "New" or a video length. Pin a short label to a corner of an image with the image label component. Change the corner and the color, or add an icon. Source: https://docs.tabler.io/ui/components/image-label --- ## Default markup Wrap the image in an `.img-labeled` element and put an `.img-label` next to the image. The label sits in the bottom end corner, on a dark, see-through background that stays readable on any photo. ```html
A book on the grass AI
``` ## Position Move the label to another corner with `.img-label-top-start`, `.img-label-top-end` or `.img-label-bottom-start`. The corners follow the text direction, so start and end swap in right-to-left layouts. ```html
A woman working on a laptop Top start
A woman working on a laptop Top end
A woman working on a laptop Bottom start
A woman working on a laptop Bottom end
``` ## With an icon A label can hold an icon, a text, or both. The icon is scaled down to match the label text. Add `.img-label-icon` to a label with only an icon to make it a square. ```html
A brainstorming session 1:24
A woman using a laptop
``` ## Colors Change the color with a background utility and its matching text color, for example `.bg-red` with `.text-red-fg`. ```html
A visit to the bookstore New
A visit to the bookstore -20%
A visit to the bookstore Free
``` ## Multiple labels Put several labels on one image, each in its own corner. ```html
Designers at a brainstorming session Live Members 4K
``` ## Custom look Set the `--tblr-img-label-*` variables on the label to change its offset, size or background. Set `--tblr-img-label-backdrop-filter` to `none` to turn off the blur. ```html
A book on the grass Sponsored
``` ## Accessibility - The label is real text, so screen readers read it after the image. For a short form such as "AI", add the full meaning in a `.visually-hidden` element, for example "AI generated". - A label with only an icon needs a `.visually-hidden` text that names it. - The label does not take clicks. When the image is a link, a click on the label goes to the link.