Accent bar line

Line styletype: "line"

A short thick bar for heading underlines and brand accents, recolored on every API call to match each campaign. Create accent visuals free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Accent bar” variant

{
  "title": "Line sample",
  "description": "A dynamic divider line",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-line",
      "key": "divider",
      "type": "line",
      "position": {
        "x": 340,
        "y": 204
      },
      "rotation": 0,
      "size": {
        "width": 120,
        "height": 12
      },
      "dynamic": true,
      "properties": {
        "fillColor": "#4F46E5",
        "borderRadius": 6,
        "opacity": 1
      }
    }
  ]
}

Line examples

Real renders of the accent bar line — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Heading underline in brand red

A short crimson bar positioned as the underline of an imagined left-aligned page title.

API overrides for this example

{
  "divider.fillColor": "#DC2626",
  "divider.borderRadius": 6
}

Vertical quote accent

An amber left-edge stripe marking an imagined pull-quote block on a social card.

API overrides for this example

{
  "divider.fillColor": "#F59E0B",
  "divider.borderRadius": 6
}

When to use the accent bar style

Brand-colored heading underlines
Category color coding per render
Decorative accents on social cards

Use it dynamically via the API

Recolor per render with '<key>.fillColor' (or just '<key>'); opacity and borderColor are overridable too.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "divider.fillColor": "#4F46E5",
    "divider.borderRadius": 6,
    "divider.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other line styles

Default HairlineAccent bar

See the line component page for the full property reference and FAQs.