# Price matrix card
> Canonical HTML: https://screenrig.ai/docs/cards/price-matrix/
Items down the side, sizes across the top and a price where they meet: coffee, taps, wine, dispensary weights and fuel, with add-ons.
Category: Food and drink. Tags: Restaurants and cafes, Bars and pubs, Stores, Prices and rates.
## Previews
Canvas
Corner
Chip
## Views and forms
Views: canvas, corner, chip. Canvas forms: landscape, portrait, square, strip.
[Card views, themes and publishing](/docs/cards/). [Browse the gallery](/apps/#cards).
## Data and privacy
This card uses its configured properties and live card data.
## Properties
For theme, background, accent and position, see [Common properties](/docs/cards/#common-properties).
Set static properties in `params`. Bind `data` to a project card data key for live values; that document holds only dynamic properties. Without a data key, put the complete configuration in `params`. Nested rows describe the contents of their parent property.
### Static properties
| Name | Type | Default | Values and limits | Description |
| --- | --- | --- | --- | --- |
| `title` | string | `"Coffee"` | maxLength: `40` | |
| `metaLabel` | string | `""` | maxLength: `16` | The head of the extra column, for example ABV. |
| `glyph` | string | `"cup"` | `"none"`, `"cup"`, `"glass"` | A cup or glass over each size that grows with it. |
| `currency` | string | `"$"` | maxLength: `3` | |
| `decimals` | number, string | `"auto"` | `"auto"`, `0`, `1`, `2`, `3` | auto uses whole numbers when every price is whole. |
| `perPage` | integer | `0` | minimum: `0`; maximum: `20` | Rows on a page. 0 sets itself from the room. |
| `pageSeconds` | number | `10` | minimum: `5`; maximum: `120` | |
| `footnote` | string | `""` | maxLength: `120` | |
### Dynamic properties
| Name | Type | Default | Values and limits | Description |
| --- | --- | --- | --- | --- |
| `columns` | array | `["Small","Medium","Large"]` | minItems: `1`; maxItems: `6` | The sizes across the top: S/M/L, 12/16/20 oz, pint/half, glass/bottle, 1g/3.5g/28g, cash/credit. |
| `sections` | array | `[{"name":"Espresso bar","items":[{"name":"Espresso","prices":[3.25,3.75,null],"note":"Double shot"},{"name":"Americano","prices":[3.5,4.0,4.5]},{"name":"Flat white","prices":[4.5,5.0,5.5],"note":"Whole or oat milk","badge":"House"},{"name":"Latte","prices":[4.75,5.25,5.75],"note":"Vanilla, caramel or maple"}]},{"name":"Cold","items":[{"name":"Iced latte","prices":[5.0,5.5,6.0]},{"name":"Cold brew","prices":[4.5,5.0,5.5],"note":"Steeped 18 hours"}]}]` | maxItems: `12` | Groups of items down the side; a group's name heads its first row. |
| `sections[].name` | string | | maxLength: `80` | |
| `sections[].items` | array | | maxItems: `40`; Required | |
| `sections[].items[].name` | string | | minLength: `1`; maxLength: `80`; Required | |
| `sections[].items[].note` | string | | maxLength: `160` | A line under the name. |
| `sections[].items[].meta` | string | | maxLength: `24` | The extra column: ABV, THC, origin. |
| `sections[].items[].badge` | string | | maxLength: `16` | |
| `sections[].items[].prices` | array | | maxItems: `6` | One price per column; empty for a size that is not offered. |
| `sections[].items[].soldOut` | boolean | `false` | | |
| `addOns` | array | `[{"name":"Oat milk","price":0.7},{"name":"Extra shot","price":1},{"name":"Syrup","price":0.5}]` | maxItems: `8` | Extras in a row under the table. |
| `addOns[].name` | string | | maxLength: `40`; Required | |
| `addOns[].price` | number, null | | | |
## Canvas example
Add this item to a playlist page’s `primitives`. [Publish the playlist and assign a screen](/docs/cards/#publish-a-card-canvas).
```json
{
"id": "price-matrix",
"primitive": "card",
"card": "price-matrix",
"major": 1,
"params": {
"theme": "neomustard"
},
"rect": {
"x": 0,
"y": 0,
"width": 1920,
"height": 1080
},
"layer": 0,
"content_fit": "fill",
"data": "price-matrix-main"
}
```
## Write live data
Create this document before showing the card, then replace it to update the screen without republishing. Use the same project as the playlist. Supply your API authorization through the environment; see [API authentication](/docs/authentication/).
```console
curl --request PUT "https://api.screenrig.ai/api/card-data/price-matrix-main" \
--header "Authorization: Bearer $SCREENRIG_TOKEN" \
--header "ScreenRig-Project: $SCREENRIG_PROJECT" \
--header "Content-Type: application/json" \
--data '{"document":{"columns":["Small","Medium","Large"],"sections":[{"name":"Espresso bar","items":[{"name":"Espresso","prices":[3.25,3.75,null],"note":"Double shot"},{"name":"Americano","prices":[3.5,4.0,4.5]},{"name":"Flat white","prices":[4.5,5.0,5.5],"note":"Whole or oat milk","badge":"House"},{"name":"Latte","prices":[4.75,5.25,5.75],"note":"Vanilla, caramel or maple"}]},{"name":"Cold","items":[{"name":"Iced latte","prices":[5.0,5.5,6.0]},{"name":"Cold brew","prices":[4.5,5.0,5.5],"note":"Steeped 18 hours"}]}],"addOns":[{"name":"Oat milk","price":0.7},{"name":"Extra shot","price":1},{"name":"Syrup","price":0.5}]}}'
```