---
title: "Uppercase Label Image API — Eyebrow-style labels | Imejis"
description: "Render spaced-out uppercase labels for eyebrows, badges and section headers — copy and colors swapped on every API call. Create label images free."
url: "https://www.imejis.io/components/text/uppercase-label"
---

# Uppercase Label Image API — Eyebrow-style labels | Imejis

A letter-spaced uppercase eyebrow label for badges and section headers.

## Use cases

- Eyebrow labels above OG image headlines
- Category badges on blog and social cards
- "New" and "Limited offer" tags on promo creatives

## Properties

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | — | The text content to display. |
| `fontSize` | `number` (min 1) | `24` | Font size in pixels. |
| `fontFamily` | `string` | `"Inter"` | Font family name (Google Fonts supported). |
| `fontWeight` | `number \| string` | `400` | Font weight (100-900 or a keyword like "bold"). |
| `color` | `color` | `"#000000"` | Text color. |
| `textAlignment` | `'left' \| 'center' \| 'right' \| 'justify'` | `"left"` | Horizontal text alignment. |
| `verticalAlignment` | `'top' \| 'center' \| 'bottom'` | `"top"` | Vertical alignment of text within its box. |
| `textDirection` | `'ltr' \| 'rtl'` | `"ltr"` | Text direction (left-to-right or right-to-left). |
| `lineHeight` | `number \| string` | `"normal"` | Line height (unitless multiplier or CSS value). |
| `letterSpacing` | `number \| string` | `"normal"` | Spacing between characters (pixels or CSS value). |
| `backgroundColor` | `color` | `"transparent"` | Background color of the whole text container. |
| `textBackgroundColor` | `color` | `"transparent"` | Background color behind the text glyphs only (highlight effect). |
| `padding` | `string` | — | CSS padding inside the text container, e.g. "8px 12px". |
| `autoResize` | `boolean` | — | Automatically shrink/grow the font size to fit the box. |
| `minFontSize` | `number` (min 1) | `8` | Lower font-size bound when autoResize is on. |
| `maxFontSize` | `number` (min 1) | `200` | Upper font-size bound when autoResize is on. |
| `strokeWidth` | `number` (min 0) | `0` | Outline stroke width around the glyphs in pixels. |
| `strokeColor` | `color` | `"transparent"` | Outline stroke color around the glyphs. |
| `textDecoration` | `'none' \| 'underline' \| 'overline' \| 'line-through' \| 'underline overline'` | `"none"` | Text decoration line(s). |
| `textTransform` | `'none' \| 'uppercase' \| 'lowercase' \| 'capitalize'` | `"none"` | Case transformation applied to the text. |
| `constraint` | `'tl' \| 'tr' \| 'tc' \| 'cc' \| 'cl' \| 'cr' \| 'bl' \| 'br' \| 'bc'` | — | Legacy per-component anchor point (prefer the component-level anchor field). |
| `autoWidth` | `boolean` | — | Let the box grow horizontally to fit the text. |
| `autoHeight` | `boolean` | — | Let the box grow vertically to fit the text. |
| `textPatterns` | `object[]` | — | Delimiter-based inline styling rules ({ startDelimiter, endDelimiter, textColor, backgroundColor, paddingX, paddingY, border* }). |
| `textShadow` | `string` | — | CSS text-shadow, e.g. "2px 2px 4px rgba(0,0,0,0.5)". |
| `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). |
| `borderWidth` | `number` | `0` | Border thickness in pixels around the component. |
| `borderColor` | `color` | `"transparent"` | Border color (any CSS color). |
| `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. |
| `borderRadius` | `number` | `0` | Corner radius in pixels. |
| `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |

## Design JSON (this variant)

```json
{
  "title": "Text sample",
  "description": "A centered dynamic headline",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-text",
      "key": "title",
      "type": "text",
      "position": {
        "x": 220,
        "y": 182
      },
      "rotation": 0,
      "size": {
        "width": 360,
        "height": 56
      },
      "dynamic": true,
      "properties": {
        "text": "New feature",
        "fontSize": 22,
        "fontFamily": "Inter",
        "fontWeight": 600,
        "color": "#6B7280",
        "textAlignment": "center",
        "verticalAlignment": "center",
        "lineHeight": 1.2,
        "opacity": 1,
        "letterSpacing": 4,
        "textTransform": "uppercase"
      }
    }
  ]
}
```

## Examples

### Limited-time offer eyebrow

A red urgency label sitting above a promo headline.

API overrides that reproduce this example:

```json
{
  "title.text": "Limited time offer",
  "title.fontSize": 22,
  "title.fontWeight": 600,
  "title.letterSpacing": 4,
  "title.textTransform": "uppercase",
  "title.color": "#DC2626"
}
```

### Case study badge

An indigo pill badge labelling a customer-story social card.

API overrides that reproduce this example:

```json
{
  "title.text": "Case study",
  "title.fontSize": 22,
  "title.fontWeight": 600,
  "title.letterSpacing": 4,
  "title.textTransform": "uppercase",
  "title.color": "#4F46E5",
  "title.backgroundColor": "#EEF2FF",
  "title.borderRadius": 28
}
```

## API overrides

Override the copy per render with '<key>.text' (or just '<key>' for the primary text value), plus '<key>.color' and background/stroke colors for styling.

Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change:

```json
{
  "title.text": "Hello world",
  "title.fontSize": 56,
  "title.fontFamily": "Inter",
  "title.fontWeight": 700,
  "title.color": "#111827",
  "title.textAlignment": "center",
  "title.verticalAlignment": "center",
  "title.lineHeight": 1.2,
  "title.opacity": 1
}
```

```bash
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "title.text": "Hello world",
    "title.fontSize": 56,
    "title.fontFamily": "Inter",
    "title.fontWeight": 700,
    "title.color": "#111827",
    "title.textAlignment": "center",
    "title.verticalAlignment": "center",
    "title.lineHeight": 1.2,
    "title.opacity": 1
}'
```

`{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create
the design in your account (paste the sample design JSON above into the
editor at https://app.imejis.io, or create it programmatically via the
imejis MCP server's `create_design` + `update_design` tools), then render
it with the design's id and one of your API keys.

Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same
catalog as structured data via the `list_component_types` tool (property
kinds, allowed values, bounds, ready-to-use sample designs).

## Related

- [Text component](https://www.imejis.io/components/text.md) — full reference and FAQs
- [Highlighted](https://www.imejis.io/components/text/highlighted.md) — A marker-style highlight behind the glyphs via textBackgroundColor.
- [Outlined](https://www.imejis.io/components/text/outlined.md) — Poster-style hollow text using the glyph stroke.
- [Inline pattern](https://www.imejis.io/components/text/inline-pattern.md) — Delimiter-based inline styling: anything wrapped in {{ }} gets its own color and pill background.