Image label

Added in 1.7.0

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.

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.

<div class="img-labeled">
  <img src="/static/photos/book-on-the-grass.jpg" class="rounded" width="240" alt="A book on the grass" />
  <span class="img-label">AI</span>
</div>

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.

Top start

Top end

Bottom start

Bottom end

<div class="d-flex flex-wrap gap-3">
  <div class="img-labeled">
    <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="rounded" width="160" alt="A woman working on a laptop" />
    <span class="img-label img-label-top-start">Top start</span>
  </div>
  <div class="img-labeled">
    <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="rounded" width="160" alt="A woman working on a laptop" />
    <span class="img-label img-label-top-end">Top end</span>
  </div>
  <div class="img-labeled">
    <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="rounded" width="160" alt="A woman working on a laptop" />
    <span class="img-label img-label-bottom-start">Bottom start</span>
  </div>
  <div class="img-labeled">
    <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="rounded" width="160" alt="A woman working on a laptop" />
    <span class="img-label">Bottom end</span>
  </div>
</div>

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.

1:24

<div class="d-flex flex-wrap gap-3">
  <div class="img-labeled">
    <img src="/static/photos/brainstorming-session-with-creative-designers.jpg" class="rounded" width="200" alt="A brainstorming session" />
    <span class="img-label">
      <!-- Download SVG icon from http://tabler.io/icons/icon/player-play -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M7 4v16l13 -8l-13 -8" />
      </svg> 1:24
    </span>
  </div>
  <div class="img-labeled">
    <img src="/static/photos/blond-using-her-laptop-at-her-bedroom.jpg" class="rounded" width="200" alt="A woman using a laptop" />
    <span class="img-label img-label-icon">
      <!-- Download SVG icon from http://tabler.io/icons/icon/crown -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M12 6l4 6l5 -4l-2 10h-14l-2 -10l5 4l4 -6" />
      </svg>
      <span class="visually-hidden">Premium</span>
    </span>
  </div>
</div>

Colors

Change the color with a background utility and its matching text color, for example .bg-red with .text-red-fg.

New

-20%

Free

<div class="d-flex flex-wrap gap-3">
  <div class="img-labeled">
    <img src="/static/photos/a-visit-to-the-bookstore.jpg" class="rounded" width="160" alt="A visit to the bookstore" />
    <span class="img-label bg-primary text-primary-fg">New</span>
  </div>
  <div class="img-labeled">
    <img src="/static/photos/a-visit-to-the-bookstore.jpg" class="rounded" width="160" alt="A visit to the bookstore" />
    <span class="img-label bg-red text-red-fg">-20%</span>
  </div>
  <div class="img-labeled">
    <img src="/static/photos/a-visit-to-the-bookstore.jpg" class="rounded" width="160" alt="A visit to the bookstore" />
    <span class="img-label bg-green text-green-fg">Free</span>
  </div>
</div>

Multiple labels

Put several labels on one image, each in its own corner.

Live Members4K

<div class="img-labeled">
  <img src="/static/photos/brainstorming-session-with-creative-designers-2.jpg" class="rounded" width="320" alt="Designers at a brainstorming session" />
  <span class="img-label img-label-top-start bg-red text-red-fg">Live</span>
  <span class="img-label img-label-top-end">
    <!-- Download SVG icon from http://tabler.io/icons/icon/lock -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
      <path d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6" />
      <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" />
      <path d="M8 11v-4a4 4 0 1 1 8 0v4" />
    </svg> Members
  </span>
  <span class="img-label">4K</span>
</div>

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.

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.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

`img-labeled`	component	Wrapper around the image that the labels are positioned in
`img-label`	part	The label, in the bottom end corner by default
`img-label-icon`	modifier	Square label for a single icon, with equal padding on all sides
`img-label-top-start`	direction	Moves the label to the top start corner
`img-label-top-end`	direction	Moves the label to the top end corner
`img-label-bottom-start`	direction	Moves the label to the bottom start corner
`bg-{color}`	color	Any base color, for example bg-red, used with the matching text-red-fg

CSS

Variables

The component uses local CSS variables on .img-label for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_images.scss.

--img-label-offset: #{$img-label-offset};
--img-label-padding-y: #{$img-label-padding-y};
--img-label-padding-x: #{$img-label-padding-x};
--img-label-gap: #{$img-label-gap};
--img-label-font-size: #{$img-label-font-size};
--img-label-font-weight: #{$img-label-font-weight};
--img-label-color: #{$img-label-color};
--img-label-bg: #{$img-label-bg};
--img-label-border-radius: #{$img-label-border-radius};
--img-label-backdrop-filter: #{$img-label-backdrop-filter};
--img-label-icon-size: #{$img-label-icon-size};

Sass variables

Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.

$img-label-offset: 0.375rem;
$img-label-padding-y: 0.25rem;
$img-label-padding-x: 0.375rem;
$img-label-gap: 0.25rem;
$img-label-font-size: $h5-font-size;
$img-label-font-weight: var(--font-weight-medium);
$img-label-color: $white;
$img-label-bg: rgba($black, 0.6);
$img-label-border-radius: var(--border-radius-sm);
$img-label-backdrop-filter: blur(4px);
$img-label-icon-size: 0.75rem;

Menu

Image label

Default markup

Position

With an icon

Colors

Multiple labels

Custom look

Accessibility

Class reference

CSS

Variables

Sass variables

On this page

Menu

Image label

Default markup

Position

With an icon

Colors

Multiple labels

Custom look

Accessibility

Class reference

CSS

Variables

Sass variables

Related

On this page

Get Admin Template, Icons, Illustrations and Emails in one bundle.