Outlined card rectangle

Rectangle styletype: "rect"

A white card with a subtle border and soft shadow — the classic content container, recolorable on every API call. Build card layouts free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Outlined card” variant

{
  "title": "Rectangle sample",
  "description": "A rounded dynamic panel",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-rect",
      "key": "panel",
      "type": "rect",
      "position": {
        "x": 220,
        "y": 110
      },
      "rotation": 0,
      "size": {
        "width": 360,
        "height": 200
      },
      "dynamic": true,
      "properties": {
        "fillColor": "#ffffff",
        "borderRadius": 16,
        "opacity": 1,
        "borderWidth": 1,
        "borderColor": "#E5E7EB",
        "boxShadow": "0 10px 25px rgba(0,0,0,0.08)"
      }
    }
  ]
}

Rectangle examples

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

Testimonial quote card

A wide white card on a soft gray canvas — the container behind an imagined customer quote and avatar.

API overrides for this example

{
  "panel.fillColor": "#ffffff",
  "panel.borderWidth": 1,
  "panel.borderColor": "#E5E7EB",
  "panel.borderRadius": 20,
  "panel.boxShadow": "0 10px 25px rgba(0,0,0,0.08)"
}

KPI stat tile

A compact tile sized for a single metric and its label in a dashboard snapshot.

API overrides for this example

{
  "panel.fillColor": "#ffffff",
  "panel.borderWidth": 1,
  "panel.borderColor": "#E5E7EB",
  "panel.borderRadius": 12,
  "panel.boxShadow": "0 4px 12px rgba(0,0,0,0.06)"
}

When to use the outlined card style

Content containers in OG images
Testimonial and quote cards
Stat tile backdrops

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 '{
    "panel.fillColor": "#ffffff",
    "panel.borderRadius": 16,
    "panel.opacity": 1,
    "panel.borderWidth": 1,
    "panel.borderColor": "#E5E7EB",
    "panel.boxShadow": "0 10px 25px rgba(0,0,0,0.08)"
}'

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

Other rectangle styles

DefaultOutlined cardPill badge

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