{
  "slug": "horizontal-sticky-stack",
  "version": "1.0.0",
  "params": [
    {
      "key": "layout",
      "attr": "data-layout",
      "type": "string",
      "default": "stack",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": [
        "stack",
        "static"
      ],
      "label": "Layout",
      "section": "Layout",
      "help": "Stack: the cards pin and slide together as you scroll the canvas. Static: the same cards as a plain list."
    },
    {
      "key": "containerWidth",
      "attr": "data-container-width",
      "type": "number",
      "default": 1200,
      "min": 600,
      "max": 1600,
      "step": 10,
      "unit": null,
      "options": null,
      "label": "Column width",
      "section": "Size",
      "help": "Width of the centred column. On wide screens the card is as wide as this."
    },
    {
      "key": "cardHeight",
      "attr": "data-card-height",
      "type": "number",
      "default": 450,
      "min": 240,
      "max": 700,
      "step": 5,
      "unit": null,
      "options": null,
      "label": "Card height",
      "section": "Size",
      "help": "Height of a card on wide screens."
    },
    {
      "key": "cardHeightSmall",
      "attr": "data-card-height-small",
      "type": "number",
      "default": 360,
      "min": 240,
      "max": 700,
      "step": 5,
      "unit": null,
      "options": null,
      "label": "Card height, medium",
      "section": "Size",
      "help": "Height of a card on medium screens (768 to 1024 px wide)."
    },
    {
      "key": "cardWidthSmall",
      "attr": "data-card-width-small",
      "type": "number",
      "default": 800,
      "min": 400,
      "max": 1100,
      "step": 10,
      "unit": null,
      "options": null,
      "label": "Card width, medium",
      "section": "Size",
      "help": "Width of a card on medium screens."
    },
    {
      "key": "spineWidth",
      "attr": "data-spine-width",
      "type": "number",
      "default": 50,
      "min": 0,
      "max": 120,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Label strip",
      "section": "Size",
      "help": "Width of the vertical label strip. Each card peeks out by this much once stacked."
    },
    {
      "key": "cardGap",
      "attr": "data-card-gap",
      "type": "number",
      "default": 20,
      "min": 0,
      "max": 80,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Card gap",
      "section": "Size",
      "help": "Space between the cards before they slide together."
    },
    {
      "key": "cornerRadius",
      "attr": "data-corner-radius",
      "type": "number",
      "default": 32,
      "min": 0,
      "max": 64,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Corner radius",
      "section": "Size",
      "help": "Rounding of the cards and their images."
    },
    {
      "key": "mobileStackGap",
      "attr": "data-mobile-stack-gap",
      "type": "number",
      "default": 10,
      "min": 0,
      "max": 40,
      "step": 1,
      "unit": null,
      "options": null,
      "label": "Stack step",
      "section": "Mobile",
      "help": "How much of each card stays visible above the next one on narrow screens."
    },
    {
      "key": "mobileCardMinHeight",
      "attr": "data-mobile-card-min-height",
      "type": "number",
      "default": 500,
      "min": 200,
      "max": 800,
      "step": 10,
      "unit": null,
      "options": null,
      "label": "Card min height",
      "section": "Mobile",
      "help": "Smallest card height on narrow screens. Cards are 65% of the view tall otherwise."
    },
    {
      "key": "bgColor",
      "attr": "data-bg-color",
      "type": "color",
      "default": "#FFFFFF",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Background",
      "section": "Color",
      "help": "Colour behind the cards."
    },
    {
      "key": "bgOpacity",
      "attr": "data-bg-opacity",
      "type": "number",
      "default": 1,
      "min": 0,
      "max": 1,
      "step": 0.01,
      "unit": null,
      "options": null,
      "label": "Background opacity",
      "section": "Color",
      "help": "0 leaves the page behind the stack showing through."
    },
    {
      "key": "textColor",
      "attr": "data-text-color",
      "type": "color",
      "default": "#18181B",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Headings",
      "section": "Color",
      "help": "Colour of the card titles."
    },
    {
      "key": "mutedColor",
      "attr": "data-muted-color",
      "type": "color",
      "default": "#6A7282",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Text",
      "section": "Color",
      "help": "Colour of the card text and the label strip."
    },
    {
      "key": "mediaColor",
      "attr": "data-media-color",
      "type": "color",
      "default": "#E2E8F0",
      "min": null,
      "max": null,
      "step": null,
      "unit": null,
      "options": null,
      "label": "Image backdrop",
      "section": "Color",
      "help": "Colour behind an image while it loads."
    }
  ]
}