Component Showcase

Available Components

Explore the available PDF template components with live examples and data structures.

API Payload Properties

Properties for the API payload.

API Payload Structure:

{3 items
"appID":string"1234567890"
"theme":string"string"
"data":{3 items
"header":{}0 items
"blocks":[1 item
0:{3 items
"type":string"item-cards"
"props":{1 item
"orientation":string"landscape"
}
"data":{2 items
"title":string"Item Cards"
"items":[4 items
0:{3 items
"image":string"https://images.unsplash.com/ph..."
"title":string"accumulation"
"list":[3 items
0:{1 item
"key":string"Tamarindo kd "
}
1:{1 item
"key":string"21 x 145 mm "
}
2:{1 item
"key":string"Prijs per stuk"
}
]
}
1:{3 items
"image":string"https://images.unsplash.com/ph..."
"title":string"marathon"
"description":string"After coating myself in vegeta..."
}
2:{4 items
"image":string"https://images.unsplash.com/ph..."
"title":string"determine"
"description":string"Flying fish flew by the space ..."
"list":[3 items
0:{2 items
"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items
"key":string"Aantal"
"value":string"60 stuks"
}
2:{2 items
"key":string"Prijs"
"value":string"€10,00"
}
]
}
3:{3 items
"image":string"https://images.unsplash.com/ph..."
"title":string"trail"
"list":[2 items
0:{2 items
"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items
"key":string"Aantal"
"value":string"60 stuks"
}
]
}
]
}
}
]
"footer":{}0 items
}
}

Table Component

Renders structured data in a table format with headers, rows, and footer.

Live Example:

Items

These are the items that you have purchased

Description
Quantity
Price
Total
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

API Payload Structure:

{2 items
"type":string"table"
"data":{5 items
"title":string"Items"
"description":string"These are the items that you h..."
"header":[4 items
0:string"Description"
1:string"Quantity"
2:string"Price"
3:string"Total"
]
"items":[10 items
0:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
1:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
2:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
3:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
4:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
5:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
6:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
7:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
8:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
9:[4 items
0:string"Website Design"
1:int1
2:int500
3:int500
]
]
"footer":[4 items
0:string""
1:string""
2:string"total"
3:int7000
]
}
}

Item Cards Component

Displays a list of items in a card format.

Live Example:

Item Cards

image

accumulation

  • Tamarindo kd
  • 21 x 145 mm
  • Prijs per stuk
image

marathon

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

image

determine

Flying fish flew by the space station.

  • SoortGladiolen
  • Aantal60 stuks
  • Prijs€10,00
image

trail

  • SoortGladiolen
  • Aantal60 stuks

API Payload Structure:

{2 items
"type":string"item-cards"
"data":{2 items
"title":string"Item Cards"
"items":[4 items
0:{3 items
"image":string"https://images.unsplash.com/ph..."
"title":string"accumulation"
"list":[3 items
0:{1 item
"key":string"Tamarindo kd "
}
1:{1 item
"key":string"21 x 145 mm "
}
2:{1 item
"key":string"Prijs per stuk"
}
]
}
1:{3 items
"image":string"https://images.unsplash.com/ph..."
"title":string"marathon"
"description":string"After coating myself in vegeta..."
}
2:{4 items
"image":string"https://images.unsplash.com/ph..."
"title":string"determine"
"description":string"Flying fish flew by the space ..."
"list":[3 items
0:{2 items
"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items
"key":string"Aantal"
"value":string"60 stuks"
}
2:{2 items
"key":string"Prijs"
"value":string"€10,00"
}
]
}
3:{3 items
"image":string"https://images.unsplash.com/ph..."
"title":string"trail"
"list":[2 items
0:{2 items
"key":string"Soort"
"value":string"Gladiolen"
}
1:{2 items
"key":string"Aantal"
"value":string"60 stuks"
}
]
}
]
}
}

List Component

Displays structured information in a list format with multiple columns.

Live Example:

Specifications

These are the specifications of the product

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)

API Payload Structure:

{2 items
"type":string"list"
"data":{5 items
"title":string"Specifications"
"description":string"These are the specifications o..."
"header":[3 items
0:string"Model"
1:string"Materiaal"
2:string"Afmetingen"
]
"items":[3 items
0:[3 items
0:string"Afmetingen zijkast rechts (HxB..."
1:string"The memory we used to share"
2:string"2750x1250x650 (in mm)"
]
1:[3 items
0:string"Afmetingen zijkast rechts (HxB..."
1:string""
2:string"2750x1250x650 (in mm)"
]
2:[3 items
0:string"Afmetingen zijkast rechts (HxB..."
1:string"The memory"
2:string"2750x1250x650 (in mm)"
]
]
"footer":[3 items
0:string""
1:string"Totaal"
2:string"€30000"
]
}
}

Images Component

Displays a gallery of images in a flexible layout. Combine one or more image Components to create a gallery.

Live Example:

Product Images

image

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

image

API Payload Structure:

{2 items
"type":string"images"
"data":{3 items
"title":string"Product Images"
"aspectRatio":string"4/3"
"items":[2 items
0:{2 items
"url":string"https://images.unsplash.com/ph..."
"description":string"You'll see the rainbow bridge ..."
}
1:{1 item
"url":string"https://images.unsplash.com/ph..."
}
]
}
}

Highlight Text Component

Displays prominent text with two values, often used for totals or important information.

Live Example:

Greetings from the real universe.€2.120,47

API Payload Structure:

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

Page Break

Inserts a page break into the PDF. Rest of the page will be empty. Components after the page break will be on the next page.

API Payload Structure:

{2 items
"type":string"page-break"
"data":{}0 items
}