, which the
+ * CSS module targets via `.list ul li`.
+ */
+
+import React, { ReactNode } from 'react';
+import styles from './styles.module.css';
+
+interface BrandedListProps {
+ children: ReactNode;
+}
+
+export default function BrandedList({ children }: BrandedListProps) {
+ return
{children}
;
+}
diff --git a/src/components/BrandedList/styles.module.css b/src/components/BrandedList/styles.module.css
new file mode 100644
index 00000000..a65b7ea1
--- /dev/null
+++ b/src/components/BrandedList/styles.module.css
@@ -0,0 +1,35 @@
+/*
+ SPDX-FileCopyrightText: Copyright 2026 Stacklok, Inc.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.list ul {
+ list-style: none;
+ padding-left: 0;
+}
+
+.list ul li {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+}
+
+.list ul li p {
+ margin: 0;
+}
+
+.list ul li::before {
+ content: '';
+ background-image: url('/img/logos/stacklok-symbol-light-green.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+ height: 1rem;
+ width: 1rem;
+ flex-shrink: 0;
+ display: inline-block;
+}
+
+:global([data-theme='light']) .list ul li::before {
+ background-image: url('/img/logos/stacklok-symbol-dark-green.svg');
+}
diff --git a/src/components/HubSpotForm/index.tsx b/src/components/HubSpotForm/index.tsx
index b51e50d1..48c06ed8 100644
--- a/src/components/HubSpotForm/index.tsx
+++ b/src/components/HubSpotForm/index.tsx
@@ -1,7 +1,21 @@
-// SPDX-FileCopyrightText: Copyright 2025 Stacklok, Inc.
+// SPDX-FileCopyrightText: Copyright 2026 Stacklok, Inc.
// SPDX-License-Identifier: Apache-2.0
+/*
+ * Renders an embedded HubSpot form using the HubSpot Forms API. The embed
+ * script is loaded lazily on mount and shared across multiple instances on the
+ * same page. Tracks submission state to trigger HubSpot's own confirmation
+ * message in place of the form.
+ *
+ * When `title` is provided, the form is wrapped in a branded card with an
+ * optional `subtitle`. Supply `anchorId` to make the title a named anchor
+ * target for in-page links (e.g. a CTA linking to "#schedule-a-demo").
+ * The title renders as a `
` so Docusaurus recognizes the anchor
+ * during its build-time link validation.
+ */
+
import React, { useEffect, useRef, useState } from 'react';
+import Heading from '@theme/Heading';
interface HubSpotFormProps {
portalId: string;
@@ -72,7 +86,6 @@ export default function HubSpotForm({
return (
-
{title}
-
+
{subtitle && (