Skip to main content
Generation Script: This file is generated from script(s): operations/scripts/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/config/component-registry.json.
Run when: Component governance metadata, registry outputs, or published component-library templates change.
Important: Do not manually edit this file; run node operations/scripts/generate-component-docs.js --fix --template-only --category scaffolding.

Back to Component Library

Return to the generated component library landing page.

​
Scaffolding

One-per-page structural skeleton — heroes, portals, frame-mode overrides. This category currently contains 20 governed export(s).

​
Decision Tree Excerpt

  1. Fetches, embeds, or binds to external/third-party data? → integrators/
  2. Part of the page’s outer structure, typically used once? → scaffolding/
  3. Takes content and presents it in a formatted way? → displays/
  4. Exists to hold, group, or arrange other things? → wrappers/
  5. Single visual piece — no wrapping, no arranging, no fetching? → elements/

​
Summary Table

ComponentStatusImport pathDescription
Dividerstable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHorizontal rule divider for frame-mode pages.
H1stable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHeading override with optional icon prefix for frame-mode pages.
H2stable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHeading override with optional icon prefix for frame-mode pages.
H3stable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHeading override with optional icon prefix for frame-mode pages.
H4stable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHeading override with optional icon prefix for frame-mode pages.
H5stable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHeading override with optional icon prefix for frame-mode pages.
H6stable/snippets/components/scaffolding/frame-mode/FrameMode.jsxHeading override with optional icon prefix for frame-mode pages.
HeroContentContainerstable/snippets/components/scaffolding/portals/Portals.jsxCentred content container inside hero sections.
HeroImageBackgroundComponentstable/snippets/components/scaffolding/portals/Portals.jsxHero background with image overlay and gradient.
HeroOverviewContentstable/snippets/components/scaffolding/portals/Portals.jsxHero content layout with title, icon, subtitle, and CTA slots.
HeroSectionContainerstable/snippets/components/scaffolding/portals/Portals.jsxFull-width hero section wrapper with min-height and gradient background.
LogoHeroContainerstable/snippets/components/scaffolding/portals/Portals.jsxHero banner with centred logo image, title, and subtitle.
Pstable/snippets/components/scaffolding/frame-mode/FrameMode.jsxParagraph override with optional icon prefix for frame-mode pages.
PageHeaderstable/snippets/components/scaffolding/frame-mode/FrameMode.jsxPage-level header with icon, title, and subtitle for frame-mode pages.
PortalCardsHeaderstable/snippets/components/scaffolding/portals/Portals.jsxSection header with mission label and optional subtitle.
PortalContentContainerstable/snippets/components/scaffolding/portals/Portals.jsxOuter container for portal page content below the hero.
PortalHeroContentstable/snippets/components/scaffolding/portals/Portals.jsxHero content with logo, title, tagline, description, and card grid.
PortalSectionHeaderstable/snippets/components/scaffolding/portals/Portals.jsxSection header with icon, title, and horizontal rule.
RefCardContainerstable/snippets/components/scaffolding/portals/Portals.jsxContainer for reference cards with configurable column count.
Starfieldstable/snippets/components/scaffolding/heroes/HeroGif.jsxAnimated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion.

​
Component Reference

​
Divider

Use Divider when you need horizontal rule divider for frame-mode pages.. Accepts: color, margin, opacity, className, style, …rest. Source description: Horizontal rule divider for frame-mode pages. Import path 
import { Divider } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} color, {string} margin, {number} opacity, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | color | string | “ | Yes | Custom color for the divider (optional, defaults to theme border color) | | margin | string | "1.5rem 0" | No | Vertical margin (default: “1.5rem 0”) | | opacity | string | 0.2 | No | Opacity of the divider (default: 0.2) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
H1

Use H1 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path 
import { H1 } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {any} icon, {number} iconSize, {any} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `icon` | `any` | | Yes | icon prop. | | iconSize | number | 32 | No | icon Size prop. | | iconColor | any | “ | Yes | icon Color prop. | | align | string | "left" | No | align prop. | | gap | string | "0.75rem" | No | gap prop. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
H2

Use H2 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path 
import { H2 } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | string | | Yes | The heading text | | `icon` | `string` | | Yes | Optional icon name or path to theme-aware SVG | | iconSize | number | 28 | No | Size of the icon (default: 28) | | iconColor | string | “ | Yes | Color of the icon (default: theme-aware accent color) | | align | string | "left" | No | Text alignment: “left”, “center”, “right” (default: “left”) | | gap | string | "0.75rem" | No | Gap between icon and text (default: “0.75rem”) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
H3

Use H3 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path 
import { H3 } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | string | | Yes | The heading text | | `icon` | `string` | | Yes | Optional icon name or path to theme-aware SVG | | iconSize | number | 24 | No | Size of the icon (default: 24) | | iconColor | string | “ | Yes | Color of the icon (default: theme-aware accent color) | | align | string | "left" | No | Text alignment: “left”, “center”, “right” (default: “left”) | | gap | string | "0.5rem" | No | Gap between icon and text (default: “0.5rem”) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
H4

Use H4 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path 
import { H4 } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | string | | Yes | The heading text | | `icon` | `string` | | Yes | Optional icon name or path to theme-aware SVG | | iconSize | number | 20 | No | Size of the icon (default: 20) | | iconColor | string | “ | Yes | Color of the icon (default: theme-aware accent color) | | align | string | "left" | No | Text alignment: “left”, “center”, “right” (default: “left”) | | gap | string | "0.5rem" | No | Gap between icon and text (default: “0.5rem”) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
H5

Use H5 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path 
import { H5 } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | string | | Yes | The heading text | | `icon` | `string` | | Yes | Optional icon name or path to theme-aware SVG | | iconSize | number | 18 | No | Size of the icon (default: 18) | | iconColor | string | “ | Yes | Color of the icon (default: theme-aware accent color) | | align | string | "left" | No | Text alignment: “left”, “center”, “right” (default: “left”) | | gap | string | "0.5rem" | No | Gap between icon and text (default: “0.5rem”) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
H6

Use H6 when you need heading override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Heading override with optional icon prefix for frame-mode pages. Import path 
import { H6 } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | string | | Yes | The heading text | | `icon` | `string` | | Yes | Optional icon name or path to theme-aware SVG | | iconSize | number | 16 | No | Size of the icon (default: 16) | | iconColor | string | “ | Yes | Color of the icon (default: theme-aware accent color) | | align | string | "left" | No | Text alignment: “left”, “center”, “right” (default: “left”) | | gap | string | "0.5rem" | No | Gap between icon and text (default: “0.5rem”) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
HeroContentContainer

Use HeroContentContainer when you need centred content container inside hero sections.. Accepts: children, className, style, …rest. Source description: Centred content container inside hero sections. Import path 
import { HeroContentContainer } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
HeroImageBackgroundComponent

Use HeroImageBackgroundComponent when you need hero background with image overlay and gradient.. Accepts: children, className, style, …rest. Source description: Hero background with image overlay and gradient. Import path 
import { HeroImageBackgroundComponent } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
HeroOverviewContent

Use HeroOverviewContent when you need hero content layout with title, icon, subtitle, and CTA slots.. Accepts: children, className, style, …rest. Source description: Hero content layout with title, icon, subtitle, and CTA slots. Import path 
import { HeroOverviewContent } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
HeroSectionContainer

Use HeroSectionContainer when you need full-width hero section wrapper with min-height and gradient background.. Accepts: children, minHeight, className, style, …rest. Source description: Full-width hero section wrapper with min-height and gradient background. Import path 
import { HeroSectionContainer } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {string} minHeight, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | minHeight | string | "fit-content" | No | min Height prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
LogoHeroContainer

Use LogoHeroContainer when you need hero banner with centred logo image, title, and subtitle.. Accepts: src, alt, width, margin, imgHeight, imgWidth, objectFit, children, className, style, …rest. Source description: Hero banner with centred logo image, title, and subtitle. Import path 
import { LogoHeroContainer } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {string} src, {string} alt, {string} width, {string} margin, {string} imgHeight, {string} imgWidth, {string} objectFit, {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | string | "/snippets/assets/logos/Livepeer-Logo-Full-Theme.svg" | No | src prop. | | alt | string | "Livepeer Logo" | No | alt prop. | | width | string | "100%" | No | width prop. | | margin | string | "1rem auto 0 auto" | No | margin prop. | | imgHeight | string | "20px" | No | img Height prop. | | imgWidth | string | "auto" | No | img Width prop. | | objectFit | string | "contain" | No | object Fit prop. | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
P

Use P when you need paragraph override with optional icon prefix for frame-mode pages.. Accepts: children, icon, iconSize, iconColor, align, gap, className, style, …rest. Source description: Paragraph override with optional icon prefix for frame-mode pages. Import path 
import { P } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | string | | Yes | The paragraph text | | `icon` | `string` | | Yes | Optional icon name or path to theme-aware SVG | | iconSize | number | 16 | No | Size of the icon (default: 16) | | iconColor | string | “ | Yes | Color of the icon (default: theme-aware accent color) | | align | string | "left" | No | Text alignment: “left”, “center”, “right” (default: “left”) | | gap | string | "0.5rem" | No | Gap between icon and text (default: “0.5rem”) | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |
Use PageHeader when you need page-level header with icon, title, and subtitle for frame-mode pages.. Accepts: title, subtitle, description, children, titleColor, subtitleColor, descriptionColor, className, style, …rest. Source description: Page-level header with icon, title, and subtitle for frame-mode pages. Import path 
import { PageHeader } from '/snippets/components/scaffolding/frame-mode/FrameMode.jsx'
Metadata
  • Status: stable
  • Accepts: {any} title, {any} subtitle, {any} description, {string} children, {any} titleColor, {any} subtitleColor, {any} descriptionColor, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | title | any | | Yes | title prop. | | `subtitle` | `any` | | Yes | subtitle prop. | | description | any | | Yes | description prop. | | `children` | `string` | | Yes | The heading text | | titleColor | any | | Yes | title Color prop. | | `subtitleColor` | `any` | | Yes | subtitle Color prop. | | descriptionColor | any | “ | Yes | description Color prop. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
PortalCardsHeader

Use PortalCardsHeader when you need section header with mission label and optional subtitle.. Accepts: children, title, className, style, …rest. Source description: Section header with mission label and optional subtitle. Import path 
import { PortalCardsHeader } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {any} title, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `title` | `any` | | Yes | title prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
PortalContentContainer

Use PortalContentContainer when you need outer container for portal page content below the hero.. Accepts: children, className, style, …rest. Source description: Outer container for portal page content below the hero. Import path 
import { PortalContentContainer } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
PortalHeroContent

Use PortalHeroContent when you need hero content with logo, title, tagline, description, and card grid.. Accepts: zIndex, title, subtitle, subtitleIcon, description, refCardLink, overview, divider, callout, titleColor, subtitleColor, children, className, style, …rest. Source description: Hero content with logo, title, tagline, description, and card grid. Import path 
import { PortalHeroContent } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {boolean} zIndex, {string} title, {string} subtitle, {string} subtitleIcon, {any} description, {any} refCardLink, {any} overview, {boolean} divider, {any} callout, {any} titleColor, {any} subtitleColor, {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | zIndex | boolean | true | No | z Index prop. | | title | string | "Portal Page" | No | title prop. | | subtitle | string | "Build - Explore - Create" | No | subtitle prop. | | subtitleIcon | string | "/snippets/assets/logos/Livepeer-Logo-Symbol-Green-Theme.svg" | No | subtitle Icon prop. | | description | any | | Yes | description prop. | | `refCardLink` | `any` | | Yes | ref Card Link prop. | | overview | any | | Yes | overview prop. | | `divider` | `boolean` | `true` | No | divider prop. | | `callout` | `any` | `null` | No | callout prop. | | `titleColor` | `any` | | Yes | title Color prop. | | subtitleColor | any | | Yes | subtitle Color prop. | | `children` | `any` | | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
PortalSectionHeader

Use PortalSectionHeader when you need section header with icon, title, and horizontal rule.. Accepts: children, title, icon, className, style, …rest. Source description: Section header with icon, title, and horizontal rule. Import path 
import { PortalSectionHeader } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {any} title, {any} icon, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `title` | `any` | | Yes | title prop. | | icon | any | “ | Yes | icon prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
RefCardContainer

Use RefCardContainer when you need container for reference cards with configurable column count.. Accepts: children, className, style, …rest. Source description: Container for reference cards with configurable column count. Import path 
import { RefCardContainer } from '/snippets/components/scaffolding/portals/Portals.jsx'
Metadata
  • Status: stable
  • Accepts: {any} children, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
Starfield

Use Starfield when you need animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion.. Accepts: density, className, style, …rest. Source description: Animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion. Import path 
import { Starfield } from '/snippets/components/scaffolding/heroes/HeroGif.jsx'
Metadata
  • Status: stable
  • Accepts: {number} density, {string} className, {object} style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | density | number | 1.1 | No | Density used by the component. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |
Last modified on March 30, 2026