{
  "id": "ai-accordion",
  "name": "Accordion",
  "component": "ai/accordion",
  "portedFrom": "page-sections/info-blocks/faq-section",
  "category": "content",
  "description": "Boxed expand/collapse cards — FAQ style: white items with royal plus toggles that rotate into an X, animated panels.",
  "whenToUse": "Question-and-answer content, or any list of short titled explanations the reader scans and expands selectively — FAQs, feature details, policy points. Light band by design; it reads as a page's reference section, usually late in the page.",
  "contentSignals": [
    "Question-formatted headings ('How do I…?', 'What is…?', 'Can we…?') each followed by a short answer",
    "Repeated title + explanation pairs of roughly equal weight",
    "Content the user labels FAQ, Q&A, or 'common questions'",
    "3–10 pairs; fewer than 3 reads better as an intro, more than ~10 should be split"
  ],
  "pairsWith": [
    "Late in the page, before ai-cta-media"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": false,
      "description": "Inline markdown; wrap accent words in <span class=\"highlight-text\">…</span> — accents render full royal on this light band."
    },
    "items": {
      "type": "array",
      "required": true,
      "items": {
        "title": {
          "type": "string",
          "description": "The question or item title."
        },
        "body": {
          "type": "string",
          "description": "Markdown answer."
        }
      },
      "description": "3–10 title/body pairs."
    },
    "singleOpen": {
      "type": "boolean",
      "default": true,
      "description": "Opening one item closes the others."
    },
    "openFirst": {
      "type": "boolean",
      "default": false,
      "description": "First item starts open."
    },
    "theme": {
      "type": "string",
      "enum": [
        "white",
        "pearl"
      ],
      "default": "white",
      "description": "Light band themes only — this is a light-surface component."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl",
      "description": "Vertical section padding."
    }
  },
  "examples": [
    {
      "id": "faq",
      "label": "FAQ",
      "props": {
        "heading": "Frequently Asked <span class=\"highlight-text\">Questions</span>",
        "openFirst": true,
        "items": [
          {
            "title": "Can Mattermost run in air-gapped environments?",
            "body": "Yes. Mattermost deploys fully self-hosted — including air-gapped, classified, and disconnected networks — with no external dependencies required at runtime."
          },
          {
            "title": "How is Mattermost licensed?",
            "body": "Mattermost offers a free open source edition and commercial editions licensed per user, with volume and public-sector pricing available.\n\nSee the [pricing page](/pricing/) for current tiers."
          },
          {
            "title": "Does Mattermost integrate with our existing tools?",
            "body": "Mattermost ships integrations for common developer and security tooling, a plugin framework, webhooks, and a full REST API for custom workflows."
          }
        ]
      }
    },
    {
      "id": "pearl",
      "label": "Pearl / multi-open",
      "props": {
        "theme": "pearl",
        "singleOpen": false,
        "heading": "Deployment <span class=\"highlight-text\">Details</span>",
        "items": [
          {
            "title": "Self-hosted",
            "body": "Run on your own infrastructure with full control over data residency and retention."
          },
          {
            "title": "Private cloud",
            "body": "Deploy into your own AWS, Azure, or GCP environment with infrastructure-as-code support."
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-article",
  "name": "Article",
  "component": "ai/article",
  "portedFrom": "blog post template (pages/blog + article-body)",
  "category": "template",
  "description": "Complete blog post layout: midnight header with category chip, title, and byline; hero image; styled markdown prose body.",
  "whenToUse": "Long-form editorial content — blog posts, announcements, guides, case-study write-ups. This is a page template, not a stackable block: it IS the page (optionally followed by a CTA). The whole post body is one markdown string; use ## for section headings, standard markdown for lists, quotes, links, images, and code.",
  "contentSignals": [
    "Multi-paragraph flowing prose with its own internal structure (sections, lists, quotes)",
    "Publication metadata: an author name, a date, 'posted', 'announcing'",
    "First-person or narrative voice rather than marketing block copy",
    "A dump that reads top-to-bottom as one document instead of separable page sections"
  ],
  "pairsWith": [
    "Stands alone as the page; optionally ai-cta-media or a newsletter CTA after"
  ],
  "props": {
    "title": {
      "type": "string",
      "required": true,
      "description": "Post title (plain text)."
    },
    "category": {
      "type": "string",
      "required": false,
      "description": "Category chip above the title, e.g. 'Product', 'Security', 'Community'."
    },
    "author": {
      "type": "string",
      "required": false
    },
    "date": {
      "type": "string",
      "required": false,
      "description": "Display-ready date, e.g. 'August 19, 2026'."
    },
    "readTime": {
      "type": "string",
      "required": false,
      "description": "E.g. '6 min read'."
    },
    "heroSrc": {
      "type": "string",
      "required": false,
      "description": "Hero image URL. Omit to render the built-in placeholder."
    },
    "heroAlt": {
      "type": "string",
      "required": false
    },
    "showHero": {
      "type": "boolean",
      "default": true,
      "description": "Set false for a text-only post with no hero frame."
    },
    "showToc": {
      "type": "boolean",
      "default": true,
      "description": "Sticky 'In this article' anchor rail beside the prose. Anchors are generated automatically from ## headings — never write anchor links or ids by hand."
    },
    "body": {
      "type": "string",
      "required": true,
      "description": "The full post as one markdown document. ## headings become 32px section heads; supports lists, blockquotes, links (styled royal-tint), inline images, and code blocks."
    }
  },
  "examples": [
    {
      "id": "post",
      "label": "Full post",
      "props": {
        "title": "Bringing AI workflows to air-gapped environments",
        "category": "Product",
        "author": "Jordan Rivera",
        "date": "August 19, 2026",
        "readTime": "5 min read",
        "body": "Teams operating in classified and disconnected environments have long faced a hard tradeoff: adopt modern AI tooling and give up control of your data, or keep control and fall behind.\n\nWe built our latest release to end that tradeoff. Here's how it works, and what it means for teams running Mattermost in air-gapped networks.\n\n## Local models, zero egress\n\nEverything runs inside your boundary. Models are deployed alongside your Mattermost instance, and no token ever leaves the network:\n\n- **Self-hosted inference** — bring your own model server or use our reference deployment\n- **Full audit trail** — every prompt and completion is logged to your compliance store\n- **Role-based access** — administrators decide which teams and channels can invoke AI\n\n## What early adopters are seeing\n\n> \"We cut incident summary time from forty minutes to four, without a single byte leaving our enclave.\"\n\nThat pattern repeats across defense, finance, and critical infrastructure: the value of AI shows up fastest in high-tempo operational workflows — incident response, shift handoffs, after-action reports.\n\n## Getting started\n\nThe AI plugin ships with the current release. Install it from the [marketplace](/marketplace/), point it at your model server, and grant access per team.\n\nFor deployment guidance in classified environments, see our [deployment documentation](https://docs.mattermost.example.com/) or talk to your account team."
      }
    },
    {
      "id": "text-only",
      "label": "No hero",
      "props": {
        "title": "Mattermost security update 5.5.2 released",
        "category": "Security",
        "author": "Security Team",
        "date": "August 12, 2026",
        "showHero": false,
        "body": "We have released Mattermost v5.5.2 to address a medium-severity vulnerability in file preview rendering.\n\n**Affected versions:** v5.5.0–v5.5.1 self-hosted deployments.\n\n**Action required:** upgrade to v5.5.2 or apply the mitigation below.\n\n## Mitigation\n\nAdministrators who cannot upgrade immediately can disable inline file previews in the System Console under **Site Configuration → File Sharing**.\n\nAs always, details follow our [responsible disclosure policy](/security-vulnerability-report/)."
      }
    }
  ]
}

{
  "id": "ai-control-grid",
  "name": "Control Grid",
  "component": "ai/control-grid",
  "portedFrom": "page-sections/features/platform-control-grid",
  "category": "feature",
  "description": "Bordered 2-column band of dark cards, each with a two-tone headline, a screenshot frame, and a bottom link. Whole card clickable.",
  "whenToUse": "Scenario cards that pair a claim with visual proof — 'even if X, you keep Y' narratives, operational-picture stories, use-case walkthroughs with screenshots. The headline splits: white lead sets up, accent close pays off. Use 2 or 4 cards.",
  "contentSignals": [
    "Scenario or outcome statements with a natural two-part rhythm (setup → payoff)",
    "Claims that reference a product view, dashboard, or screenshot as evidence",
    "Use-case narratives with a 'see it in action' link each",
    "2 or 4 chunks; parallel one-liners belong in ai-icon-grid"
  ],
  "pairsWith": [
    "Mid-page after ai-intro; before ai-cta-media"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false
    },
    "items": {
      "type": "array",
      "required": true,
      "items": {
        "title": {
          "type": "string",
          "description": "White lead of the card headline (the setup)."
        },
        "titleSecondary": {
          "type": "string",
          "required": false,
          "description": "Accent-blue close of the headline (the payoff)."
        },
        "link": {
          "type": "string"
        },
        "linkText": {
          "type": "string",
          "description": "E.g. 'Experience Mission Operations'."
        },
        "imageSrc": {
          "type": "string",
          "required": false,
          "description": "Screenshot URL. Omit to render the built-in placeholder."
        },
        "imageAlt": {
          "type": "string",
          "required": false
        }
      },
      "description": "2 or 4 cards."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "pair",
      "label": "Two cards",
      "props": {
        "heading": "Gain a Complete, <span class=\"highlight-text\">Real-Time Operational Picture</span>",
        "subtext": "Learn more about how we meet communications requirements where the stakes are highest.",
        "items": [
          {
            "title": "Channels, Playbooks, and Boards",
            "titleSecondary": "give you end-to-end visibility over every day.",
            "link": "/solutions/use-cases/mission-operations/",
            "linkText": "Experience Mission Operations"
          },
          {
            "title": "Even if your main comms channels go down,",
            "titleSecondary": "your ChatOps stay fully operational.",
            "link": "/solutions/use-cases/crisis-communications/",
            "linkText": "Experience Out of Band Comms + Response"
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-cta-form",
  "name": "CTA Form",
  "component": "ai/cta-form",
  "portedFrom": "page-sections/ctas/cta-form",
  "category": "cta",
  "description": "Lead-capture section: copy and icon benefit list on the left, white form card (name, email, company, optional message) on the right.",
  "whenToUse": "Demo requests, sales contact, and gated offers — pages whose whole point is the form. The benefit list answers 'why fill this in'. This is a page-defining section: use once, usually as the page's core. For simple email capture use ai-cta-newsletter.",
  "contentSignals": [
    "Requests to be contacted: 'request a demo', 'talk to sales', 'get a quote'",
    "Copy explaining what happens after you reach out",
    "A list of reasons to engage (becomes the benefit list)",
    "Gated content framing: 'fill in the form to download…'"
  ],
  "pairsWith": [
    "The core of demo/contact pages, after a short ai-hero or alone"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false
    },
    "benefitHeading": {
      "type": "string",
      "required": false,
      "description": "E.g. 'Why request a demo?'."
    },
    "benefits": {
      "type": "array",
      "required": false,
      "items": {
        "icon": {
          "type": "string",
          "description": "Icon name from the site set (see ai-icon-grid manifest for common names)."
        },
        "title": {
          "type": "string"
        },
        "description": {
          "type": "string",
          "required": false
        }
      },
      "description": "2–4 reasons to engage."
    },
    "buttonText": {
      "type": "string",
      "default": "Submit"
    },
    "includeMessage": {
      "type": "boolean",
      "default": false,
      "description": "Add the optional 'How can we help?' textarea."
    },
    "action": {
      "type": "string",
      "required": false,
      "description": "Form POST endpoint. Omit until the app wires submissions (the live site posts to Marketo); without it the form is presentation-only."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "demo",
      "label": "Request a demo",
      "props": {
        "heading": "See Mattermost <span class=\"highlight-text\">in Action</span>",
        "subtext": "Tell us a little about yourself and we'll connect you with a Mattermost expert who can share more about the product, explain pricing options, and answer any of your questions.",
        "benefitHeading": "Why request a demo?",
        "buttonText": "Request Demo",
        "benefits": [
          {
            "icon": "rectangle-group",
            "title": "Designed for technical collaboration",
            "description": "Execute complex technical workflows faster at higher quality."
          },
          {
            "icon": "shield-check",
            "title": "Built for security and compliance",
            "description": "Self-hosted deployment keeps your data completely in your control."
          },
          {
            "icon": "adjustments-vertical",
            "title": "Open source flexibility",
            "description": "Extend, integrate, and audit every layer of the platform."
          }
        ]
      }
    },
    {
      "id": "contact",
      "label": "Contact + message",
      "props": {
        "heading": "Talk to <span class=\"highlight-text\">Our Team</span>",
        "subtext": "Questions about deployment, pricing, or compliance? We'll route you to the right person.",
        "buttonText": "Send",
        "includeMessage": true
      }
    }
  ]
}

{
  "id": "ai-cta-media",
  "name": "CTA Media",
  "component": "ai/cta-media",
  "portedFrom": "page-sections/ctas/cta-media",
  "category": "cta",
  "description": "Conversion band: heading, supporting line, and action buttons — split layout with a product screenshot, or a centered banner.",
  "whenToUse": "Close a page or major section with a call to action: try/demo/contact/get-started. Use `split` when there is a product visual to show; use `banner` for a compact centered prompt with no media. Typically the last section before the footer.",
  "contentSignals": [
    "Imperative invitations: 'try', 'get started', 'request a demo', 'talk to sales', 'contact us', 'sign up'",
    "One short headline plus at most one supporting sentence, followed by one or two actions",
    "Mentions of a trial, demo environment, or next step",
    "Text that closes an argument rather than introducing or explaining"
  ],
  "pairsWith": [
    "Usually final; follows ai-intro, ai-logo-strip, or feature sections"
  ],
  "props": {
    "eyebrow": {
      "type": "string",
      "required": false,
      "description": "Small uppercase kicker above the heading."
    },
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span> for the brand accent blue."
    },
    "subtext": {
      "type": "string",
      "required": false,
      "description": "One supporting sentence."
    },
    "buttons": {
      "type": "array",
      "required": false,
      "items": {
        "text": {
          "type": "string"
        },
        "link": {
          "type": "string"
        },
        "variant": {
          "type": "string",
          "enum": [
            "primary",
            "outline"
          ],
          "default": "primary"
        }
      },
      "description": "One or two actions. First button primary, second outline."
    },
    "layout": {
      "type": "string",
      "enum": [
        "split",
        "banner"
      ],
      "default": "split",
      "description": "split = copy panel with flush product screenshot; banner = centered bordered band, no media."
    },
    "reverse": {
      "type": "boolean",
      "default": false,
      "description": "Split only: media on the left instead of the right."
    },
    "imageSrc": {
      "type": "string",
      "required": false,
      "description": "Split media image URL. Omit to render the built-in placeholder."
    },
    "imageAlt": {
      "type": "string",
      "required": false
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl",
      "description": "Vertical section padding."
    }
  },
  "examples": [
    {
      "id": "split",
      "label": "Split + screenshot",
      "props": {
        "layout": "split",
        "heading": "See Our Platform in <span class=\"highlight-text\">Action</span>",
        "subtext": "Experience a 1-hour trial environment tailored to your workflow.",
        "buttons": [
          {
            "text": "Try Mattermost",
            "link": "/trial/"
          },
          {
            "text": "Watch a Demo",
            "link": "/demo/",
            "variant": "outline"
          }
        ]
      }
    },
    {
      "id": "reversed",
      "label": "Split reversed",
      "props": {
        "layout": "split",
        "reverse": true,
        "heading": "Built for <span class=\"highlight-text\">Mission-Critical</span> Work",
        "subtext": "Deploy in air-gapped, classified, and regulated environments.",
        "buttons": [
          {
            "text": "Talk to Sales",
            "link": "/contact/"
          }
        ]
      }
    },
    {
      "id": "banner",
      "label": "Banner",
      "props": {
        "layout": "banner",
        "eyebrow": "Get Started",
        "heading": "Ready to Secure Your <span class=\"highlight-text\">Collaboration?</span>",
        "subtext": "Join the mission-critical teams already running on Mattermost.",
        "buttons": [
          {
            "text": "Get Started",
            "link": "/trial/"
          },
          {
            "text": "Contact Us",
            "link": "/contact/",
            "variant": "outline"
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-cta-newsletter",
  "name": "CTA Newsletter",
  "component": "ai/cta-newsletter",
  "portedFrom": "page-sections/ctas/cta-newsletter",
  "category": "cta",
  "description": "Centered newsletter signup band: highlight heading, one supporting line, and the white composite email pill with a royal submit.",
  "whenToUse": "Email capture — the standard close for blog and resource pages ('never miss an update'). One heading, one sentence, one field. For demo/trial conversion use ai-cta-media instead.",
  "contentSignals": [
    "Invitations to subscribe, get updates, join a newsletter or mailing list",
    "'Delivered to your inbox', 'stay in the loop', 'never miss' phrasing",
    "The closing section of blog-adjacent or resources pages",
    "Any mention of email capture without a demo/trial ask"
  ],
  "pairsWith": [
    "Last section on blog and resource pages; after ai-article"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false,
      "description": "One supporting sentence."
    },
    "placeholder": {
      "type": "string",
      "default": "Email"
    },
    "buttonText": {
      "type": "string",
      "default": "Sign Up"
    },
    "action": {
      "type": "string",
      "required": false,
      "description": "Form POST endpoint. Omit until the app wires submissions (the live site posts to Marketo); without it the form is presentation-only."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "default",
      "label": "Newsletter",
      "props": {
        "heading": "Never Miss a <span class=\"highlight-text\">Moment</span>",
        "subtext": "Company news, product announcements, and updates delivered directly to your inbox."
      }
    },
    {
      "id": "blog",
      "label": "Blog close",
      "props": {
        "heading": "More Like This, <span class=\"highlight-text\">Weekly</span>",
        "subtext": "The best of the Mattermost blog, once a week. No noise.",
        "buttonText": "Subscribe"
      }
    }
  ]
}

{
  "id": "ai-feature-split",
  "name": "Feature Split",
  "component": "ai/feature-split",
  "portedFrom": "page-sections/features/feature-split",
  "category": "feature",
  "description": "Copy column — accent heading, supporting text, check-list bullets, and a link — beside a feature image.",
  "whenToUse": "The workhorse feature section: explain one capability with proof points. Stack several in a row, alternating `reverse`, to walk through a product area. The check-list carries 3–7 short, concrete bullets; the link goes deeper.",
  "contentSignals": [
    "A capability or benefit explained with a short list of concrete proof points",
    "Bulleted fragments (tools, integrations, certifications, sub-features) attached to one theme",
    "Repeating capability blocks in a dump — each becomes one feature-split, alternate reverse",
    "A 'learn more' pointer to a deeper page"
  ],
  "pairsWith": [
    "After ai-intro; several in sequence with alternating reverse; ai-cta-media after the last"
  ],
  "props": {
    "eyebrow": {
      "type": "string",
      "required": false
    },
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false,
      "description": "One or two supporting sentences."
    },
    "features": {
      "type": "array",
      "required": false,
      "items": {
        "type": "string"
      },
      "description": "Check-list bullets — 3–7 short concrete fragments, no trailing periods."
    },
    "linkText": {
      "type": "string",
      "required": false,
      "description": "Text link label, e.g. 'Learn More'."
    },
    "link": {
      "type": "string",
      "required": false,
      "description": "Link URL. Icon and behavior auto-resolve — never specify icons."
    },
    "buttons": {
      "type": "array",
      "required": false,
      "items": {
        "text": {
          "type": "string"
        },
        "link": {
          "type": "string"
        },
        "variant": {
          "type": "string",
          "enum": [
            "primary",
            "outline"
          ],
          "default": "primary"
        }
      },
      "description": "Optional buttons for stronger CTAs (e.g. downloads). Most feature splits use the text link instead."
    },
    "imageSrc": {
      "type": "string",
      "required": false,
      "description": "Feature image URL. Omit to render the built-in placeholder."
    },
    "imageAlt": {
      "type": "string",
      "required": false
    },
    "reverse": {
      "type": "boolean",
      "default": false,
      "description": "Media on the left, copy on the right. Alternate across consecutive splits."
    },
    "theme": {
      "type": "string",
      "enum": [
        "midnight",
        "graphite",
        "white",
        "pearl"
      ],
      "default": "midnight"
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "default",
      "label": "Copy left",
      "props": {
        "heading": "Robust Integrations for <span class=\"highlight-text\">Workflows in Any System</span>",
        "subtext": "Pre-packaged, source available connectors, automations, and templates for rapid and effective systems integration within any collaboration workflow.",
        "features": [
          "Plugins, APIs, and webhooks that interact with any system, including internal and legacy",
          "SIEM, SOAR, and incident response systems",
          "Prebuilt support for GitHub, GitLab, Jira, ServiceNow, PagerDuty, and more",
          "Sovereign LLMs for customizable, AI-driven automation"
        ],
        "linkText": "Learn More",
        "link": "/platform/interoperability/"
      }
    },
    {
      "id": "reversed",
      "label": "Media left",
      "props": {
        "reverse": true,
        "eyebrow": "Deployment",
        "heading": "Deploy Anywhere, <span class=\"highlight-text\">Control Everything</span>",
        "subtext": "Self-hosted, air-gapped, or private cloud — with infrastructure-as-code support for every path.",
        "features": [
          "Kubernetes operator and Helm charts",
          "FedRAMP-authorized cloud options",
          "Zero external runtime dependencies"
        ],
        "linkText": "Download the deployment guide",
        "link": "/downloads/deployment-guide.pdf"
      }
    }
  ]
}

{
  "id": "ai-hero",
  "name": "Hero",
  "component": "ai/hero",
  "portedFrom": "page-sections/heroes/hero-mattermost",
  "category": "hero",
  "description": "Full-bleed dark page masthead: background image fading to midnight, gold-gradient highlight phrase, subtext, and action buttons.",
  "whenToUse": "The opening section of a page — one per page, always first. The headline splits into a gold highlight phrase (the emotional hook) and white rest (the completion). Use `align: center` for symmetric industry/overview pages, left for product pages.",
  "contentSignals": [
    "The page's main value proposition or title — the single most important claim",
    "Short, declarative, benefit-led phrasing rather than explanations",
    "The first thing in a content dump, or text explicitly called a title/headline",
    "A phrase worth emphasizing (becomes headingHighlight) inside a larger claim"
  ],
  "pairsWith": [
    "Always first; ai-logo-strip or ai-intro directly after"
  ],
  "props": {
    "eyebrow": {
      "type": "string",
      "required": false,
      "description": "Small gold uppercase kicker above the headline."
    },
    "headingHighlight": {
      "type": "string",
      "required": true,
      "description": "The gold-gradient phrase of the headline — the hook. Keep it to 1–3 words."
    },
    "headingRest": {
      "type": "string",
      "required": true,
      "description": "The white remainder of the headline."
    },
    "highlightAfter": {
      "type": "boolean",
      "default": false,
      "description": "Render the highlight phrase after the white text instead of before."
    },
    "accent": {
      "type": "string",
      "enum": [
        "gold",
        "royal"
      ],
      "default": "gold",
      "description": "gold = homepage gradient highlight; royal = flat blue tint used by platform and partners heroes."
    },
    "inline": {
      "type": "boolean",
      "default": false,
      "description": "Run the headline as one continuous line instead of stacked blocks (the hero-platform-split look). Pair with accent: royal."
    },
    "subtext": {
      "type": "string",
      "required": false,
      "description": "One or two supporting sentences under the headline."
    },
    "buttons": {
      "type": "array",
      "required": false,
      "items": {
        "text": {
          "type": "string"
        },
        "link": {
          "type": "string"
        },
        "variant": {
          "type": "string",
          "enum": [
            "primary",
            "outline"
          ],
          "default": "primary"
        }
      },
      "description": "One or two actions. First button primary, second outline."
    },
    "align": {
      "type": "string",
      "enum": [
        "left",
        "center"
      ],
      "default": "left",
      "description": "left = bottom-anchored editorial hero; center = symmetric centered hero."
    },
    "minHeight": {
      "type": "string",
      "enum": [
        "sm",
        "md",
        "lg"
      ],
      "default": "lg",
      "description": "Hero height: 400 / 520 / 608 px."
    },
    "imageSrc": {
      "type": "string",
      "required": false,
      "description": "Background image URL. Omit to render the built-in placeholder."
    },
    "imageAlt": {
      "type": "string",
      "required": false
    }
  },
  "examples": [
    {
      "id": "left",
      "label": "Left / highlight first",
      "props": {
        "headingHighlight": "Mission-critical",
        "headingRest": "work requires mission-critical collaboration",
        "subtext": "Secure collaboration for defense, government, and regulated industries — self-hosted or in your private cloud.",
        "buttons": [
          {
            "text": "Get Started",
            "link": "/trial/"
          },
          {
            "text": "Talk to Sales",
            "link": "/contact/",
            "variant": "outline"
          }
        ]
      }
    },
    {
      "id": "center",
      "label": "Centered / highlight after",
      "props": {
        "align": "center",
        "minHeight": "md",
        "highlightAfter": true,
        "eyebrow": "Financial Services",
        "headingHighlight": "without compromise",
        "headingRest": "Secure collaboration",
        "subtext": "Meet regulatory requirements while keeping incident response fast."
      }
    },
    {
      "id": "platform-split",
      "label": "Royal / inline",
      "props": {
        "accent": "royal",
        "inline": true,
        "highlightAfter": true,
        "minHeight": "md",
        "headingRest": "Expert Partners for",
        "headingHighlight": "Platform Implementation",
        "subtext": "We partner with System Integrators, Resellers, and Deployment Partners to help you implement our secure, unified collaboration platform."
      }
    }
  ]
}

{
  "id": "ai-hero-discover",
  "name": "Hero Discover",
  "component": "ai/hero-discover",
  "portedFrom": "page-sections/heroes/hero-discover",
  "category": "hero",
  "description": "Light resource-hub masthead: badge chip, accent heading, optional section filter chips, photo fading in from the right.",
  "whenToUse": "The opening of light content-hub pages — resources, newsroom, blog-adjacent archives. Use the filter chips to jump to page sections (anchors) or sibling hubs. For dark marketing pages use ai-hero instead.",
  "contentSignals": [
    "Hub or archive framing: 'the latest…', 'browse…', 'all our…'",
    "A page that lists or aggregates content rather than selling a capability",
    "Named sections or categories that become filter chips",
    "Editorial, newsroom, or library tone"
  ],
  "pairsWith": [
    "Always first on hub pages; ai-resource-cards or listing sections after"
  ],
  "props": {
    "badge": {
      "type": "string",
      "required": false,
      "description": "Dark chip above the heading, e.g. 'Newsroom'."
    },
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false
    },
    "filters": {
      "type": "array",
      "required": false,
      "items": {
        "label": {
          "type": "string"
        },
        "link": {
          "type": "string",
          "description": "Usually an in-page anchor like #news."
        },
        "active": {
          "type": "boolean",
          "default": false
        }
      },
      "description": "Section chips; mark the current one active."
    },
    "imageSrc": {
      "type": "string",
      "required": false,
      "description": "Right-side photo URL. Omit to render the built-in placeholder."
    },
    "imageAlt": {
      "type": "string",
      "required": false
    }
  },
  "examples": [
    {
      "id": "newsroom",
      "label": "Newsroom",
      "props": {
        "badge": "Newsroom",
        "heading": "The latest announcements, press coverage, and milestones from <span class=\"highlight-text\">across our organization.</span>",
        "filters": [
          {
            "label": "News",
            "link": "#news",
            "active": true
          },
          {
            "label": "Press Releases",
            "link": "#press-releases"
          },
          {
            "label": "Press Kit",
            "link": "#press-kit"
          }
        ]
      }
    },
    {
      "id": "plain",
      "label": "No filters",
      "props": {
        "badge": "Resources",
        "heading": "Guides, stories, and tools for <span class=\"highlight-text\">mission-critical teams.</span>",
        "subtext": "Everything we publish, in one place."
      }
    }
  ]
}

{
  "id": "ai-highlight-banner",
  "name": "Highlight Banner",
  "component": "ai/highlight-banner",
  "portedFrom": "page-sections/info-blocks/section-highlight-banner",
  "category": "content",
  "description": "Double-framed gradient band with a display heading, one supporting line, and a text CTA; the whole band is clickable.",
  "whenToUse": "A single emphasized message that deserves its own band but not a full CTA section — a custom-packages pitch, a program callout, an escalation path. One idea, one link. For the page's main conversion moment use ai-cta-media instead.",
  "contentSignals": [
    "One standalone statement with a single next step ('Talk to an Expert', 'See the Program')",
    "Copy that interrupts the page flow to emphasize an offer or option",
    "Too short for a feature section: a headline plus at most one sentence",
    "If it invites signup/trial/demo as the page's close, prefer ai-cta-media"
  ],
  "pairsWith": [
    "Mid-page between feature sections, or before the final CTA"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "body": {
      "type": "string",
      "required": false,
      "description": "One supporting sentence."
    },
    "linkText": {
      "type": "string",
      "required": false,
      "description": "E.g. 'Talk to an Expert'."
    },
    "link": {
      "type": "string",
      "required": false,
      "description": "Destination URL — the entire banner becomes the hit target."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "default",
      "label": "With CTA",
      "props": {
        "heading": "Custom packages are available for <span class=\"highlight-text\">mission-critical organizations.</span>",
        "body": "Talk to our experts today to learn about deployment options for organizations like yours.",
        "linkText": "Talk to an Expert",
        "link": "/contact-sales/"
      }
    },
    {
      "id": "statement",
      "label": "Statement only",
      "props": {
        "heading": "Every deployment is <span class=\"highlight-text\">yours to control</span> — infrastructure, data, and keys."
      }
    }
  ]
}

{
  "id": "ai-icon-grid",
  "name": "Icon Grid",
  "component": "ai/icon-grid",
  "portedFrom": "page-sections/features/feature-icon-grid",
  "category": "feature",
  "description": "Grid of capability cards: royal icon tile, title, description, and an optional Learn link.",
  "whenToUse": "Present 3–9 parallel capabilities, product areas, or benefits at equal weight — the scannable overview before deeper feature-split sections. Prefer 3 or 6 items in 3 columns; use columns: 2 for four heavyweight items.",
  "contentSignals": [
    "A set of short, parallel capability blurbs of roughly equal importance",
    "Category-like groupings: 'messaging', 'security', 'deployment', 'integrations'",
    "Each chunk has a name plus one or two sentences, optionally a deeper link",
    "3–9 chunks; one or two chunks belong in ai-feature-split instead"
  ],
  "pairsWith": [
    "After ai-hero or ai-intro; before the ai-feature-split deep dives"
  ],
  "props": {
    "eyebrow": {
      "type": "string",
      "required": false
    },
    "heading": {
      "type": "string",
      "required": false,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false
    },
    "items": {
      "type": "array",
      "required": true,
      "items": {
        "icon": {
          "type": "string",
          "description": "Icon name from the site set. Common names: chat-bubble-bottom-center-text, lock-closed, arrow-down-tray, queue-list, integrations, sovereign-ai, code-bracket, dataflow-03, pencil, chat-bubble-left-right, computer-desktop, users, wrench-screwdriver, message-chat, document-text, squares-2x2, academic-cap, translate, link, database-01. Unknown names render a neutral glyph — never invent decorative names."
        },
        "title": {
          "type": "string"
        },
        "description": {
          "type": "string",
          "description": "One or two sentences."
        },
        "link": {
          "type": "string",
          "required": false
        },
        "linkText": {
          "type": "string",
          "required": false,
          "description": "E.g. 'Learn'."
        }
      },
      "description": "3–9 capability cards."
    },
    "columns": {
      "type": "number",
      "enum": [
        2,
        3,
        4
      ],
      "default": 3,
      "description": "Desktop column count."
    },
    "theme": {
      "type": "string",
      "enum": [
        "midnight",
        "graphite",
        "white",
        "pearl"
      ],
      "default": "midnight"
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "platform",
      "label": "Platform overview",
      "props": {
        "heading": "One Platform, <span class=\"highlight-text\">Every Mission Workflow</span>",
        "items": [
          {
            "icon": "chat-bubble-bottom-center-text",
            "title": "Secure Messaging + Collaboration",
            "description": "Message, meet, talk, and screenshare within a unified platform — integrating the workflows and tools critical to your work.",
            "link": "/platform/secure-messaging-and-collaboration/",
            "linkText": "Learn"
          },
          {
            "icon": "lock-closed",
            "title": "Security",
            "description": "Meet strict security, privacy, compliance, and regulatory requirements, including Zero Trust protocols and layered protection.",
            "link": "/platform/security/",
            "linkText": "Learn"
          },
          {
            "icon": "arrow-down-tray",
            "title": "How to Deploy",
            "description": "Choose how you want to deploy and install based on your specific requirements — server first, then integrate and extend.",
            "link": "/download/",
            "linkText": "Learn"
          },
          {
            "icon": "integrations",
            "title": "Integrations",
            "description": "Connectors, automations, and templates for rapid systems integration within any collaboration workflow.",
            "link": "/platform/interoperability/",
            "linkText": "Learn"
          },
          {
            "icon": "sovereign-ai",
            "title": "Sovereign AI",
            "description": "AI-driven automation on your infrastructure — no data leaves your boundary.",
            "link": "/platform/sovereign-ai/",
            "linkText": "Learn"
          },
          {
            "icon": "queue-list",
            "title": "Workflow Automation",
            "description": "Playbooks, checklists, and triggers that keep high-tempo operations consistent and auditable.",
            "link": "/platform/workflow-automation/",
            "linkText": "Learn"
          }
        ]
      }
    },
    {
      "id": "two-col",
      "label": "Two columns / no header",
      "props": {
        "columns": 2,
        "items": [
          {
            "icon": "computer-desktop",
            "title": "Desktop + Mobile",
            "description": "Native apps for every platform your teams operate on, in connected and disconnected conditions."
          },
          {
            "icon": "wrench-screwdriver",
            "title": "Admin Tooling",
            "description": "System console, compliance exports, and fine-grained policy controls for operators."
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-intro",
  "name": "Intro",
  "component": "ai/intro",
  "portedFrom": "page-sections/info-blocks/section-intro",
  "category": "intro",
  "description": "Section header with eyebrow, two-tone heading, supporting copy, and an optional text link.",
  "whenToUse": "Open a page region: introduce a feature area, band of cards, or story section. Use `split` for editorial two-column intros, `centered` for symmetric mid-page titles, `stacked` for left-aligned column intros, and `heading-link` when the section needs a 'view all' style CTA instead of body copy.",
  "contentSignals": [
    "A thematic statement followed by one to three explanatory paragraphs",
    "Text that frames or sets up content that comes after it, without being a list or a call to action",
    "A section title with supporting prose — 'why it matters' style copy",
    "Longer explanatory dumps: split layout carries two paragraphs comfortably"
  ],
  "pairsWith": [
    "After ai-hero or ai-logo-strip; before feature grids and card bands"
  ],
  "props": {
    "eyebrow": {
      "type": "string",
      "required": false,
      "description": "Small uppercase kicker above the heading."
    },
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span> to render them in the brand accent blue."
    },
    "body": {
      "type": "string",
      "required": false,
      "description": "Markdown paragraphs of supporting copy."
    },
    "layout": {
      "type": "string",
      "enum": [
        "centered",
        "split",
        "stacked",
        "heading-link"
      ],
      "default": "centered",
      "description": "centered = title and copy stacked mid-page; split = heading left, copy right in a two-column grid; stacked = left-aligned single column; heading-link = heading plus CTA link, no body."
    },
    "dividers": {
      "type": "string",
      "enum": [
        "none",
        "top",
        "bottom",
        "both"
      ],
      "default": "none",
      "description": "Hairline rules framing the section content."
    },
    "linkText": {
      "type": "string",
      "required": false,
      "description": "Label for the optional text link."
    },
    "link": {
      "type": "string",
      "required": false,
      "description": "Link URL. The icon (internal chevron / external arrow / download) is chosen automatically from the URL — never specify icons."
    },
    "theme": {
      "type": "string",
      "enum": [
        "midnight",
        "graphite",
        "white",
        "pearl"
      ],
      "default": "midnight",
      "description": "Section background and text theme."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl",
      "description": "Vertical section padding."
    }
  },
  "examples": [
    {
      "id": "split",
      "label": "Split intro",
      "props": {
        "layout": "split",
        "dividers": "bottom",
        "heading": "The Mission’s Always On, <span class=\"highlight-text\">Your Platform Should Be Too</span>",
        "body": "The information you depend on runs far and fast across networks, nations, and classification levels. When coalition forces, mission partners, and contractors aren’t operating in the same place, on the same networks, or under the same clearances, adversaries can exploit those gaps.\n\nThis mission risk is exacerbated when critical information is routed through unapproved channels, your people use multiple disconnected tools, or are required to work in Denied, Disrupted, Intermittent, and Limited (DDIL) conditions."
      }
    },
    {
      "id": "partner-band",
      "label": "Split + link",
      "props": {
        "layout": "split",
        "dividers": "both",
        "heading": "Tap Into Our Global <span class=\"highlight-text\">Partner Network</span>",
        "body": "Explore deployment and implementation partners for a secure, efficient, and FedRAMP-compliant onboarding.",
        "linkText": "Visit Partner Directory",
        "link": "/partners/"
      }
    },
    {
      "id": "centered",
      "label": "Centered",
      "props": {
        "layout": "centered",
        "heading": "Build Both <span class=\"highlight-text\">Tempo</span> and Trust",
        "body": "A unified, highly available workspace ensures your teams and mission partners can access and exchange information when it’s needed most."
      }
    },
    {
      "id": "heading-link",
      "label": "Heading + link",
      "props": {
        "layout": "heading-link",
        "eyebrow": "Resources",
        "heading": "Explore the <span class=\"highlight-text\">Latest from Mattermost</span>",
        "linkText": "View All Resources",
        "link": "/resources/discover/all-resources/"
      }
    }
  ]
}

{
  "id": "ai-logo-strip",
  "name": "Logo Strip",
  "component": "ai/logo-strip",
  "portedFrom": "page-sections/features/logo-strip",
  "category": "proof",
  "description": "Social-proof row: optional muted heading over a centered wrapping row of customer or partner logo marks.",
  "whenToUse": "Show credibility through association — customers, partners, integrations, compliance marks. Best directly after a hero or before a CTA. Logos without a src render as built-in abstract placeholder marks with the alt text as a wordmark.",
  "contentSignals": [
    "Lists of company, customer, or partner names with no other structure",
    "Phrases like 'trusted by', 'used by', 'our customers/partners', 'works with'",
    "Name-dropping of well-known organizations as evidence",
    "4–8 short proper nouns in sequence"
  ],
  "pairsWith": [
    "After ai-hero; before ai-cta-media or ai-intro"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": false,
      "description": "Muted uppercase line above the row, e.g. 'Trusted by mission-critical teams'."
    },
    "logos": {
      "type": "array",
      "required": true,
      "items": {
        "src": {
          "type": "string",
          "required": false,
          "description": "Logo image URL. Omit for a placeholder mark."
        },
        "alt": {
          "type": "string",
          "description": "Company name — shown as the placeholder wordmark."
        },
        "link": {
          "type": "string",
          "required": false
        }
      },
      "description": "4–8 marks reads best."
    },
    "theme": {
      "type": "string",
      "enum": [
        "midnight",
        "graphite",
        "white",
        "pearl"
      ],
      "default": "midnight",
      "description": "Section background and text theme."
    },
    "grayscale": {
      "type": "boolean",
      "default": false,
      "description": "Desaturate marks at reduced opacity; full color on hover."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl",
      "description": "Vertical section padding."
    }
  },
  "examples": [
    {
      "id": "default",
      "label": "Placeholder marks",
      "props": {
        "heading": "Trusted by mission-critical teams",
        "logos": [
          {
            "alt": "Aerodyne"
          },
          {
            "alt": "Northgrid"
          },
          {
            "alt": "Helixbank"
          },
          {
            "alt": "Statlab"
          },
          {
            "alt": "Coreline"
          },
          {
            "alt": "Vantry"
          }
        ]
      }
    },
    {
      "id": "grayscale",
      "label": "Grayscale on pearl",
      "props": {
        "theme": "pearl",
        "grayscale": true,
        "heading": "Works with your stack",
        "logos": [
          {
            "alt": "Aerodyne"
          },
          {
            "alt": "Northgrid"
          },
          {
            "alt": "Helixbank"
          },
          {
            "alt": "Statlab"
          },
          {
            "alt": "Coreline"
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-marquee",
  "name": "Marquee",
  "component": "ai/marquee",
  "portedFrom": "page-sections/features/feature-marquee",
  "category": "feature",
  "description": "Heading beside continuously scrolling rows of label pills, alternating direction per row.",
  "whenToUse": "Show breadth without depth: industries served, segments, use cases, integrations — any long list of short names that works as ambient motion rather than reading material. 1–3 rows, 6–12 short labels each; rows can repeat labels in different order.",
  "contentSignals": [
    "A long flat list of category-like names (industries, segments, teams, tools)",
    "Labels of 1–4 words with no descriptions attached",
    "Breadth claims: 'trusted across…', 'used by teams in…', 'supports every…'",
    "If each item has a sentence of copy, use ai-icon-grid instead"
  ],
  "pairsWith": [
    "After ai-hero on overview pages; before ai-intro or feature sections"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "subtext": {
      "type": "string",
      "required": false
    },
    "linkText": {
      "type": "string",
      "required": false
    },
    "link": {
      "type": "string",
      "required": false
    },
    "rows": {
      "type": "array",
      "required": true,
      "items": {
        "labels": {
          "type": "array",
          "items": {
            "type": "string"
          },
          "description": "6–12 short labels."
        },
        "direction": {
          "type": "string",
          "enum": [
            "left",
            "right"
          ],
          "description": "Omit to auto-alternate per row."
        }
      },
      "description": "1–3 scrolling rows."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "industries",
      "label": "Two rows",
      "props": {
        "heading": "Your Intelligent Mission <span class=\"highlight-text\">Environment</span>",
        "linkText": "Experience Mattermost",
        "link": "https://experience.mattermost.example.com/",
        "rows": [
          {
            "labels": [
              "Intelligence Community",
              "Defense + Military",
              "Critical Infrastructure",
              "Enterprise Risk + Compliance",
              "Security Operations Center",
              "Government + Public Sector"
            ]
          },
          {
            "labels": [
              "Financial Services",
              "Healthcare + Life Sciences",
              "Energy + Utilities",
              "Technology",
              "DevSecOps",
              "Mission Operations"
            ]
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-quote-stat",
  "name": "Quote + Stat",
  "component": "ai/quote-stat",
  "portedFrom": "page-sections/info-blocks/quote-stat-feature",
  "category": "proof",
  "description": "Customer quote beside a photo under a royal top rule with the bordered corner mark — plain testimonial, or with a royal stat card overlaying the image.",
  "whenToUse": "Social proof with a human voice: one strong customer quote, attributed, optionally backed by a number. Add a stat when the dump contains a concrete metric; link to the full customer story when one exists.",
  "contentSignals": [
    "Quoted speech with a name and title attached",
    "First-person praise or outcome claims ('we cut…', 'it lets us…')",
    "A metric tied to a customer ('178 channels', '40 minutes to 4')",
    "Several short quotes from different people suggest repeating this section, not one grid"
  ],
  "pairsWith": [
    "Mid-page between feature sections; near ai-logo-strip for compounding proof"
  ],
  "props": {
    "quote": {
      "type": "string",
      "required": true,
      "description": "The quote, without surrounding quote marks."
    },
    "attributionName": {
      "type": "string",
      "required": false
    },
    "attributionTitle": {
      "type": "string",
      "required": false,
      "description": "Title and company, e.g. 'IT Manager, MedinCell'."
    },
    "linkText": {
      "type": "string",
      "required": false,
      "description": "E.g. 'Read Customer Story'."
    },
    "link": {
      "type": "string",
      "required": false
    },
    "stats": {
      "type": "array",
      "required": false,
      "items": {
        "value": {
          "type": "string",
          "description": "E.g. '178 Channels'."
        },
        "label": {
          "type": "string",
          "description": "What the number means."
        }
      },
      "description": "First stat renders as the royal overlay card on the photo."
    },
    "imageSrc": {
      "type": "string",
      "required": false,
      "description": "Photo URL. Omit to render the built-in placeholder."
    },
    "imageAlt": {
      "type": "string",
      "required": false
    },
    "reverse": {
      "type": "boolean",
      "default": false,
      "description": "Photo on the left, quote on the right."
    },
    "markIcon": {
      "type": "string",
      "enum": [
        "quote",
        "book-open"
      ],
      "required": false,
      "description": "Corner mark glyph. Omit to auto-pick: quote when attributed, book-open for unattributed story blurbs."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "testimonial",
      "label": "Testimonial",
      "props": {
        "quote": "Whether it's the IT department discussing troubleshooting steps to resolve a problem faster, or a private channel of friends organizing a birthday celebration, the usability and ease of access makes Mattermost our go-to messaging tool.",
        "attributionName": "Kyle Kingsley",
        "attributionTitle": "IT Manager, MedinCell",
        "linkText": "Read Customer Story",
        "link": "/resources/discover/customer-stories/medincell/"
      }
    },
    {
      "id": "stat-stack",
      "label": "With stat card",
      "props": {
        "quote": "Learn how a large bank's IT organization accelerated time to resolution with secure and flexible messaging. Even more critically, incident response adopts custom compliance requirements for data control and archiving.",
        "linkText": "Read Customer Story",
        "link": "/resources/discover/customer-stories/large-bank/",
        "stats": [
          {
            "value": "90% Improvement",
            "label": "in MTTR"
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-resource-cards",
  "name": "Resource Cards",
  "component": "ai/resource-cards",
  "portedFrom": "page-sections/info-blocks/resource-cards",
  "category": "content",
  "description": "Bordered band of gradient resource cards — title, optional media, bottom-pinned action link — with a heading and View All link above.",
  "whenToUse": "Point readers at related content: blogs, webinars, datasheets, docs. Use `grid` for 3 or 6 equal cards; `split` needs exactly 4 items (two tall, two stacked). Card linkText should name the action and format: 'Read Blog', 'Watch Webinar', 'Read Datasheet'.",
  "contentSignals": [
    "Lists of linked content pieces: posts, webinars, guides, whitepapers, docs",
    "Titles that read as headlines rather than capability names",
    "Phrases like 'related resources', 'further reading', 'explore more'",
    "3–6 items with URLs; a single resource belongs in ai-feature-split or ai-video"
  ],
  "pairsWith": [
    "Late in the page, before ai-cta-media or ai-cta-newsletter"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": true,
      "description": "Inline markdown. Wrap accent words in <span class=\"highlight-text\">…</span>."
    },
    "viewAllText": {
      "type": "string",
      "required": false,
      "description": "E.g. 'All Resources'."
    },
    "viewAllLink": {
      "type": "string",
      "required": false
    },
    "items": {
      "type": "array",
      "required": true,
      "items": {
        "title": {
          "type": "string",
          "description": "The resource headline."
        },
        "link": {
          "type": "string"
        },
        "linkText": {
          "type": "string",
          "description": "Action + format: 'Read Blog', 'Watch Webinar', 'Read Datasheet'."
        },
        "imageSrc": {
          "type": "string",
          "required": false,
          "description": "Card image URL. Omit the property entirely for a text-only card; empty string renders the placeholder."
        },
        "imageAlt": {
          "type": "string",
          "required": false
        }
      },
      "description": "grid: 3 or 6 items; split: exactly 4."
    },
    "layout": {
      "type": "string",
      "enum": [
        "grid",
        "split"
      ],
      "default": "grid",
      "description": "grid = equal 3-column band; split = two tall cards plus a stacked third column (exactly 4 items)."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "grid",
      "label": "Grid",
      "props": {
        "heading": "Explore Guides, Blogs, Docs, <span class=\"highlight-text\">and Other Helpful Resources</span>",
        "viewAllText": "All Resources",
        "viewAllLink": "/resources/discover/all-resources/",
        "items": [
          {
            "title": "AI Unleashed: Revolutionizing Government Processes",
            "link": "/resources/discover/webinars/ai-unleashed/",
            "linkText": "Watch Webinar"
          },
          {
            "title": "Mattermost Agents: Comprehensive Capabilities Brief",
            "link": "/resources/discover/content/agents-brief/",
            "linkText": "Read Datasheet"
          },
          {
            "title": "Strengthening Cyber Resilience With Data Sovereignty",
            "link": "/blog/strengthening-cyber-resilience/",
            "linkText": "Read Blog"
          }
        ]
      }
    },
    {
      "id": "split",
      "label": "Split + media",
      "props": {
        "layout": "split",
        "heading": "Latest from the <span class=\"highlight-text\">Resource Library</span>",
        "items": [
          {
            "title": "The Collaboration Landscape of Tomorrow",
            "link": "/resources/discover/webinars/collaboration-landscape/",
            "linkText": "Watch Webinar",
            "imageSrc": ""
          },
          {
            "title": "Deploying in Air-Gapped Environments: Field Guide",
            "link": "/resources/discover/content/air-gapped-field-guide/",
            "linkText": "Read Guide",
            "imageSrc": ""
          },
          {
            "title": "Zero Trust for Real-Time Ops",
            "link": "/blog/zero-trust-real-time-ops/",
            "linkText": "Read Blog"
          },
          {
            "title": "Incident Response Playbook Templates",
            "link": "/resources/discover/content/ir-playbooks/",
            "linkText": "Get Templates"
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-table",
  "name": "Table",
  "component": "ai/table",
  "portedFrom": "page-sections/info-blocks/support-comparison-table",
  "category": "content",
  "description": "Comparison table: royal header band, hairline grid, check circles or text in cells, optional highlight rows.",
  "whenToUse": "Tabular source content — plan/tier comparisons, feature matrices, spec sheets, SLA tables. Cell values: true renders a check circle, a string renders as text, false/null/empty renders an empty cell. Mark at most one or two rows highlight for emphasis. Light band by design.",
  "contentSignals": [
    "An actual table in the source document (rows × columns)",
    "Plan, tier, or edition comparisons with included/excluded features",
    "Spec or SLA data: response times, limits, coverage windows",
    "Checkmark/dash matrices — ✓ and ✗ become true and null"
  ],
  "pairsWith": [
    "Mid-page on pricing/support-style pages; ai-accordion often follows for footnote questions"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": false,
      "description": "Inline markdown heading above the table."
    },
    "columns": {
      "type": "array",
      "required": true,
      "items": {
        "type": "string"
      },
      "description": "Header labels. First entry names the row-label column (e.g. 'Features'); the rest are value columns. 3–5 value columns fit best."
    },
    "rows": {
      "type": "array",
      "required": true,
      "items": {
        "label": {
          "type": "string",
          "description": "Row name (first column)."
        },
        "highlight": {
          "type": "boolean",
          "required": false,
          "description": "Soft blue emphasis row."
        },
        "cells": {
          "type": "array",
          "description": "One value per value column, in order: true = check circle, string = text, false/null = empty."
        }
      }
    },
    "footnote": {
      "type": "string",
      "required": false,
      "description": "Small note under the table, e.g. explaining asterisks."
    },
    "theme": {
      "type": "string",
      "enum": [
        "white",
        "pearl"
      ],
      "default": "white",
      "description": "Light band themes only."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl"
    }
  },
  "examples": [
    {
      "id": "checks",
      "label": "Feature matrix",
      "props": {
        "columns": [
          "Features",
          "Free",
          "Professional",
          "Enterprise",
          "Enterprise Advanced"
        ],
        "footnote": "** Weekend coverage applies to P1 issues only.",
        "rows": [
          {
            "label": "Self-Help Resources",
            "cells": [
              true,
              true,
              true,
              true
            ]
          },
          {
            "label": "Community Support",
            "cells": [
              true,
              true,
              true,
              true
            ]
          },
          {
            "label": "Online Ticket Creation",
            "cells": [
              null,
              true,
              true,
              true
            ]
          },
          {
            "label": "Regional Business Day Coverage",
            "cells": [
              null,
              true,
              true,
              true
            ]
          },
          {
            "label": "12×5 Business Hours Coverage",
            "cells": [
              null,
              true,
              true,
              true
            ]
          },
          {
            "label": "24×7 Weekend Coverage **",
            "highlight": true,
            "cells": [
              null,
              null,
              true,
              true
            ]
          },
          {
            "label": "Direct Access to Senior Support Team",
            "cells": [
              null,
              null,
              null,
              true
            ]
          },
          {
            "label": "Access to Private Discussion Channel With Mattermost Technical Staff",
            "cells": [
              null,
              null,
              null,
              true
            ]
          }
        ]
      }
    },
    {
      "id": "text",
      "label": "Text cells",
      "props": {
        "heading": "Response Time <span class=\"highlight-text\">Targets</span>",
        "columns": [
          "Priority",
          "Professional",
          "Enterprise",
          "Enterprise Advanced"
        ],
        "rows": [
          {
            "label": "P1 — Production down",
            "cells": [
              "4 business hours",
              "2 hours",
              "1 hour"
            ]
          },
          {
            "label": "P2 — Severely degraded",
            "cells": [
              "8 business hours",
              "4 hours",
              "2 hours"
            ]
          },
          {
            "label": "P3 — General issue",
            "cells": [
              "2 business days",
              "1 business day",
              "8 hours"
            ]
          }
        ]
      }
    }
  ]
}

{
  "id": "ai-video",
  "name": "Video",
  "component": "ai/video",
  "portedFrom": "page-sections/features/video-content",
  "category": "feature",
  "description": "Framed video player with poster, play button, and a text panel — heading, supporting line, and a Watch Video trigger.",
  "whenToUse": "Feature a single video: product overview, demo recording, webinar replay, customer story film. The player is click-to-load — nothing third-party touches the page until the viewer presses play. Use `modal` playback when the video deserves a fullscreen moment; `inline` swaps the poster in place.",
  "contentSignals": [
    "A video URL or ID in the dump (Wistia, YouTube /embed/, Vimeo)",
    "Words like 'watch', 'video', 'demo recording', 'webinar', 'replay', 'overview video'",
    "A short pitch paragraph clearly meant to sit beside a piece of media",
    "Only one video — for several videos or mixed resources, use a card grid instead"
  ],
  "pairsWith": [
    "Mid-page after ai-intro; often directly after ai-hero on overview pages"
  ],
  "props": {
    "heading": {
      "type": "string",
      "required": false,
      "description": "Text-panel headline beside the player."
    },
    "subtext": {
      "type": "string",
      "required": false,
      "description": "Supporting copy under the heading."
    },
    "wistiaId": {
      "type": "string",
      "required": false,
      "description": "Wistia media ID, iframe URL, or page URL with ?wvideo=."
    },
    "embedUrl": {
      "type": "string",
      "required": false,
      "description": "Any iframe embed URL (YouTube /embed/…, Vimeo player URL). Wins over wistiaId. With neither, the player renders inert with a placeholder poster."
    },
    "posterSrc": {
      "type": "string",
      "required": false,
      "description": "Poster image URL. Omit to render the built-in placeholder."
    },
    "posterAlt": {
      "type": "string",
      "required": false
    },
    "buttonText": {
      "type": "string",
      "default": "Watch Video",
      "description": "Label for the text-panel playback trigger."
    },
    "playback": {
      "type": "string",
      "enum": [
        "inline",
        "modal"
      ],
      "default": "inline",
      "description": "inline = poster swaps to the player in place; modal = fullscreen dialog."
    },
    "framed": {
      "type": "boolean",
      "default": true,
      "description": "Double platform frame with plus markers at the top corners — the homepage look."
    },
    "paddingY": {
      "type": "string",
      "enum": [
        "none",
        "md",
        "lg",
        "xl",
        "2xl"
      ],
      "default": "xl",
      "description": "Vertical section padding."
    }
  },
  "examples": [
    {
      "id": "inline",
      "label": "Inline / Wistia",
      "props": {
        "heading": "Bridge today's constraints and gain tomorrow's decision advantage.",
        "subtext": "Mattermost delivers collaboration, automation and AI for air-gapped, on-prem and private cloud environments. Trusted by governments, enterprises and allied militaries. Deploy anywhere. Control everything.",
        "wistiaId": "73lgeu0bt0",
        "posterAlt": "Team reviewing real-time data dashboards in a meeting room"
      }
    },
    {
      "id": "modal",
      "label": "Modal playback",
      "props": {
        "heading": "See the platform overview.",
        "subtext": "A four-minute walkthrough of secure messaging, workflow automation, and flexible deployment.",
        "wistiaId": "73lgeu0bt0",
        "playback": "modal",
        "buttonText": "Watch the Overview"
      }
    },
    {
      "id": "placeholder",
      "label": "No video yet",
      "props": {
        "heading": "Your product story, in motion.",
        "subtext": "Drop in a Wistia ID or embed URL when the video is ready — the player previews complete without one.",
        "framed": false
      }
    }
  ]
}