Layout

Components

Each block in the blocks array maps to one of these components. Header and footer are top-level fields on data; the header can also be placed as a block.

Header

Company info rendered at the top of every page. Passed as data.header. Optional — when omitted, no header is rendered.

Preview

1234567890 — 01.01.2025 David Salodini davidesalodini@gmail.com +32 485 40 26 71 Frankrijklei 67 2000 Antwerpen Belgium

Payload shape

{
  "header": {
    "headerInfo": "1234567890 — 01.01.2025",
    "name": "David Salodini",
    "email": "davidesalodini@gmail.com",
    "phone": "+32 485 40 26 71",
    "address": {
      "street": "Frankrijklei",
      "number": "67",
      "postalCode": "2000",
      "city": "Antwerpen",
      "country": "Belgium"
    },
    "logo": "/flux.svg"
  }
}

As a block

The header can also be added to the blocks array with type: "header". Unlike the top-level header, which repeats at the top of every printed page, a header block renders once, in flow with the other blocks.

Preview

Payload shape

{
  "type": "header",
  "data": {
    "headerInfo": "1234567890 — 01.01.2025",
    "name": "David Salodini",
    "email": "davidesalodini@gmail.com",
    "phone": "+32 485 40 26 71",
    "address": {
      "street": "Frankrijklei",
      "number": "67",
      "postalCode": "2000",
      "city": "Antwerpen",
      "country": "Belgium"
    },
    "logo": "/flux.svg"
  }
}

Page break

Inserts a CSS page break. Everything after continues on the next page.

Payload shape

{
  "type": "page-break"
}

Blocks

Table

Structured data with header row, body rows, and an optional footer row.

Preview

Items

These are the items that you have purchased

Description

Quantity

Price

Total

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Website Design

500

Payload shape

{
  "type": "table",
  "data": {
    "title": "Items",
    "description": "These are the items that you have purchased",
    "header": [
      "Description",
      "Quantity",
      "Price",
      "Total"
    ],
    "items": [
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ],
      [
        "Website Design",
        1,
        500,
        500
      ]
    ],
    "footer": [
      "",
      "",
      "total",
      7000
    ]
  }
}

List

Multi-column list, useful for specifications or key-value data.

Preview

Model

Materiaal

Afmetingen

Afmetingen zijkast rechts (HxBxD)

The memory we used to share

2750x1250x650 (in mm)

Afmetingen zijkast rechts (HxBxD)

2750x1250x650 (in mm)

Afmetingen zijkast rechts (HxBxD)

The memory

2750x1250x650 (in mm)

Payload shape

{
  "type": "list",
  "props": {
    "orientation": "landscape"
  },
  "data": {
    "title": "Specifications",
    "description": "These are the specifications of the product",
    "header": [
      "Model",
      "Materiaal",
      "Afmetingen"
    ],
    "items": [
      [
        "Afmetingen zijkast rechts (HxBxD)",
        "The memory we used to share",
        "2750x1250x650 (in mm)"
      ],
      [
        "Afmetingen zijkast rechts (HxBxD)",
        "",
        "2750x1250x650 (in mm)"
      ],
      [
        "Afmetingen zijkast rechts (HxBxD)",
        "The memory",
        "2750x1250x650 (in mm)"
      ]
    ],
    "footer": [
      "",
      "Totaal",
      "€30000"
    ]
  }
}

Item cards

Card grid with image, title, optional description, and optional key list per item.

Preview

Item Cards

accumulation

Tamarindo kd
21 x 145 mm
Prijs per stuk

marathon

After coating myself in vegetable oil I found my success rate skyrocketed.

determine

Flying fish flew by the space station.

SoortGladiolen
Aantal60 stuks
Prijs€10,00

trail

SoortGladiolen
Aantal60 stuks

Payload shape

{
  "type": "item-cards",
  "data": {
    "title": "Item Cards",
    "items": [
      {
        "image": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
        "title": "accumulation",
        "list": [
          {
            "key": "Tamarindo kd "
          },
          {
            "key": "21 x 145 mm "
          },
          {
            "key": "Prijs per stuk"
          }
        ]
      },
      {
        "image": "https://images.unsplash.com/photo-1760661642486-bf574784273b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774",
        "title": "marathon",
        "description": "After coating myself in vegetable oil I found my success rate skyrocketed."
      },
      {
        "image": "https://images.unsplash.com/photo-1760549901908-766a6f80d8d3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774",
        "title": "determine",
        "description": "Flying fish flew by the space station.",
        "list": [
          {
            "key": "Soort",
            "value": "Gladiolen"
          },
          {
            "key": "Aantal",
            "value": "60 stuks"
          },
          {
            "key": "Prijs",
            "value": "€10,00"
          }
        ]
      },
      {
        "image": "https://images.unsplash.com/photo-1760389003430-603f6dfb9bac?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=818",
        "title": "trail",
        "list": [
          {
            "key": "Soort",
            "value": "Gladiolen"
          },
          {
            "key": "Aantal",
            "value": "60 stuks"
          }
        ]
      }
    ]
  }
}

Images

Flexible image gallery. Stack multiple image blocks to build multi-row layouts.

Preview

Product Images

You'll see the rainbow bridge after it rains cats and dogs.

Payload shape

{
  "type": "images",
  "data": {
    "title": "Product Images",
    "aspectRatio": "4/3",
    "items": [
      {
        "url": "https://images.unsplash.com/photo-1759893563446-ce5fbfbf73c9?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2187",
        "description": "You'll see the rainbow bridge after it rains cats and dogs.",
        "watermark": {
          "url": "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
          "scale": 0.4,
          "opacity": 0.5
        }
      },
      {
        "url": "https://images.unsplash.com/photo-1760661642486-bf574784273b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=774"
      }
    ]
  }
}

Highlight text

Two prominent values side by side. Useful for totals or key figures.

Preview

Greetings from the real universe.€2.120,47

Payload shape

{
  "type": "highlight-text",
  "data": {
    "text1": "Greetings from the real universe.",
    "text2": "€2.120,47"
  }
}

HTML

Raw HTML for anything the other blocks don't cover. Style it inline.

Preview

Contents

An outline of this quote. Each section is covered on the pages that follow.

01 Your configuration

04 Price breakdown

02 Materials & finish

05 Terms

03 Measurements

06 Next steps

Payload shape

{
  "type": "html",
  "data": {
    "html": "<div style='background:var(--primary);color:#fff;padding:36px 34px;border-radius:calc(var(--border-radius) * 2)'>\n  <div style='display:flex;justify-content:space-between;gap:40px;margin-bottom:34px'>\n    <div style='font-size:28px;font-weight:600'>Contents</div>\n    <div style='font-size:11px;line-height:1.6;opacity:0.8;max-width:34ch'>An outline of this quote. Each section is covered on the pages that follow.</div>\n  </div>\n  <div style='display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:22px'>\n    <div style='display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff5;padding-bottom:12px'>\n      <span style='font-size:34px;font-weight:300'>01</span>\n      <span style='border:1px solid #fff9;border-radius:99px;padding:5px 14px;font-size:11px'>Your configuration</span>\n    </div>\n    <div style='display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff5;padding-bottom:12px'>\n      <span style='font-size:34px;font-weight:300'>04</span>\n      <span style='border:1px solid #fff9;border-radius:99px;padding:5px 14px;font-size:11px'>Price breakdown</span>\n    </div>\n    <div style='display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff5;padding-bottom:12px'>\n      <span style='font-size:34px;font-weight:300'>02</span>\n      <span style='border:1px solid #fff9;border-radius:99px;padding:5px 14px;font-size:11px'>Materials &amp; finish</span>\n    </div>\n    <div style='display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff5;padding-bottom:12px'>\n      <span style='font-size:34px;font-weight:300'>05</span>\n      <span style='border:1px solid #fff9;border-radius:99px;padding:5px 14px;font-size:11px'>Terms</span>\n    </div>\n    <div style='display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff5;padding-bottom:12px'>\n      <span style='font-size:34px;font-weight:300'>03</span>\n      <span style='border:1px solid #fff9;border-radius:99px;padding:5px 14px;font-size:11px'>Measurements</span>\n    </div>\n    <div style='display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #fff5;padding-bottom:12px'>\n      <span style='font-size:34px;font-weight:300'>06</span>\n      <span style='border:1px solid #fff9;border-radius:99px;padding:5px 14px;font-size:11px'>Next steps</span>\n    </div>\n  </div>\n</div>"
  }
}

Components

Header

David Salodini

As a block

David Salodini

Footer

Page break

Table

Items

List

Specifications

Item cards

Item Cards

Images

Product Images

Highlight text

HTML