Line component
Shapestype: "line"A thin filled bar used as a divider or underline — a rectangle specialized for separators (rendered by the rect renderer).
Design JSON
{
"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": 160,
"y": 206
},
"rotation": 0,
"size": {
"width": 480,
"height": 8
},
"dynamic": true,
"properties": {
"fillColor": "#111827",
"borderRadius": 4,
"opacity": 1
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorLine examples
Real renders of the line — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Newsletter section divider
An indigo rule separating an imagined newsletter header from the story list below it.
API overrides for this example
{
"divider.fillColor": "#4F46E5"
}Divider on a dark report card
A muted slate rule splitting the title from the stats on a dark dashboard snapshot.
API overrides for this example
{
"divider.fillColor": "#475569"
}All line styles
Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.
Use cases
What developers typically build with the line component.
- Section dividers in report and email images
- Heading underlines in brand colors
- Accent bars recolored per campaign or category
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 the sample design'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": "#111827",
"divider.borderRadius": 4,
"divider.opacity": 1
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Property reference
Every property the line component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| fillColor | color | #808080 | "#808080" | Line color. |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |