> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Scaffolding

> One-per-page structural skeleton – heroes, portals, frame-mode overrides.

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

<Card title="Back to Component Library" icon="arrow-left" href="/v2/resources/documentation-guide/component-library" arrow>
  Return to the generated component library landing page.
</Card>

## 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

| Component                    | Status   | Import path                                                   | Description                                                                                         |
| ---------------------------- | -------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| Divider                      | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Horizontal rule divider for frame-mode pages.                                                       |
| H1                           | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Heading override with optional icon prefix for frame-mode pages.                                    |
| H2                           | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Heading override with optional icon prefix for frame-mode pages.                                    |
| H3                           | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Heading override with optional icon prefix for frame-mode pages.                                    |
| H4                           | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Heading override with optional icon prefix for frame-mode pages.                                    |
| H5                           | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Heading override with optional icon prefix for frame-mode pages.                                    |
| H6                           | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Heading override with optional icon prefix for frame-mode pages.                                    |
| HeroContentContainer         | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Centred content container inside hero sections.                                                     |
| HeroImageBackgroundComponent | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Hero background with image overlay and gradient.                                                    |
| HeroOverviewContent          | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Hero content layout with title, icon, subtitle, and CTA slots.                                      |
| HeroSectionContainer         | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Full-width hero section wrapper with min-height and gradient background.                            |
| LogoHeroContainer            | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Hero banner with centred logo image, title, and subtitle.                                           |
| P                            | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Paragraph override with optional icon prefix for frame-mode pages.                                  |
| PageHeader                   | `stable` | `/snippets/components/scaffolding/frame-mode/FrameMode.jsx`   | Page-level header with icon, title, and subtitle for frame-mode pages.                              |
| PortalCardsHeader            | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Section header with mission label and optional subtitle.                                            |
| PortalContentContainer       | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Outer container for portal page content below the hero.                                             |
| PortalHeroContent            | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Hero content with logo, title, tagline, description, and card grid.                                 |
| PortalSectionHeader          | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Section header with icon, title, and horizontal rule.                                               |
| RefCardContainer             | `stable` | `/snippets/components/scaffolding/portals/Portals.jsx`        | Container for reference cards with configurable column count.                                       |
| Starfield                    | `stable` | `/snippets/components/scaffolding/heroes/StarfieldCanvas.jsx` | Animated 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: {string} colour, {string} margin, {number} opacity, {string} className, {object} style, ...rest.
Source description: Horizontal rule divider for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### H1

Use **H1** when you need heading override with optional icon prefix for frame-mode pages.. Accepts: {any} children, {any} icon, {number} iconSize, {any} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Heading override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### H2

Use **H2** when you need heading override with optional icon prefix for frame-mode pages.. Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Heading override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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", "centre", "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. |

<CustomDivider />

### H3

Use **H3** when you need heading override with optional icon prefix for frame-mode pages.. Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Heading override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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", "centre", "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. |

<CustomDivider />

### H4

Use **H4** when you need heading override with optional icon prefix for frame-mode pages.. Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Heading override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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", "centre", "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. |

<CustomDivider />

### H5

Use **H5** when you need heading override with optional icon prefix for frame-mode pages.. Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Heading override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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", "centre", "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. |

<CustomDivider />

### H6

Use **H6** when you need heading override with optional icon prefix for frame-mode pages.. Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Heading override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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", "centre", "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. |

<CustomDivider />

### HeroContentContainer

Use **HeroContentContainer** when you need centred content container inside hero sections.. Accepts: {any} children, {string} className, {object} style, ...rest.
Source description: Centred content container inside hero sections.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### HeroImageBackgroundComponent

Use **HeroImageBackgroundComponent** when you need hero background with image overlay and gradient.. Accepts: {any} children, {string} className, {object} style, ...rest.
Source description: Hero background with image overlay and gradient.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### HeroOverviewContent

Use **HeroOverviewContent** when you need hero content layout with title, icon, subtitle, and CTA slots.. Accepts: {any} children, {string} className, {object} style, ...rest.
Source description: Hero content layout with title, icon, subtitle, and CTA slots.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### HeroSectionContainer

Use **HeroSectionContainer** when you need full-width hero section wrapper with min-height and gradient background.. Accepts: {any} children, {string} minHeight, {string} className, {object} style, ...rest.
Source description: Full-width hero section wrapper with min-height and gradient background.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### LogoHeroContainer

Use **LogoHeroContainer** when you need hero banner with centred logo image, title, and subtitle.. Accepts: {string} src, {string} alt, {string} width, {string} margin, {string} imgHeight, {string} imgWidth, {string} objectFit, {any} children, {string} className, {object} style, ...rest.
Source description: Hero banner with centred logo image, title, and subtitle.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### P

Use **P** when you need paragraph override with optional icon prefix for frame-mode pages.. Accepts: {string} children, {string} icon, {number} iconSize, {string} iconColor, {string} align, {string} gap, {string} className, {object} style, ...rest.
Source description: Paragraph override with optional icon prefix for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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", "centre", "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. |

<CustomDivider />

### PageHeader

Use **PageHeader** when you need page-level header with icon, title, and subtitle for frame-mode pages.. Accepts: {any} title, {any} subtitle, {any} description, {string} children, {any} titleColor, {any} subtitleColor, {any} descriptionColor, {string} className, {object} style, ...rest.
Source description: Page-level header with icon, title, and subtitle for frame-mode pages.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### PortalCardsHeader

Use **PortalCardsHeader** when you need section header with mission label and optional subtitle.. Accepts: {any} children, {any} title, {string} className, {object} style, ...rest.
Source description: Section header with mission label and optional subtitle.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### PortalContentContainer

Use **PortalContentContainer** when you need outer container for portal page content below the hero.. Accepts: {any} children, {string} className, {object} style, ...rest.
Source description: Outer container for portal page content below the hero.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### PortalHeroContent

Use **PortalHeroContent** when you need hero content with logo, title, tagline, description, and card grid.. 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.
Source description: Hero content with logo, title, tagline, description, and card grid.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### PortalSectionHeader

Use **PortalSectionHeader** when you need section header with icon, title, and horizontal rule.. Accepts: {any} children, {any} title, {any} icon, {string} className, {object} style, ...rest.
Source description: Section header with icon, title, and horizontal rule.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### RefCardContainer

Use **RefCardContainer** when you need container for reference cards with configurable column count.. Accepts: {any} children, {string} className, {object} style, ...rest.
Source description: Container for reference cards with configurable column count.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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. |

<CustomDivider />

### Starfield

Use **Starfield** when you need animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion.. Accepts: {number} density, {string} className, {object} style, ...rest.
Source description: Animated canvas starfield background with floating Livepeer logos. Respects prefers-reduced-motion.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Starfield } from '/snippets/components/scaffolding/heroes/StarfieldCanvas.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. |