Page Structure

Generation Script: This file is generated from script(s): tools/scripts/generate-component-docs.js.
Purpose: Generated component-library MDX pages derived from docs-guide/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 tools/scripts/generate-component-docs.js --fix --template-only --category page-structure.

Back to Component Library

Return to the generated component library landing page.

Portal and frame-mode scaffolding components that shape whole sections. This category currently contains 25 governed export(s).

Decision Tree Excerpt

Bound to an external data source or automation pipeline? data/
Only makes sense on frame-mode or portal pages? page-structure/
Accepts children and arranges them spatially? layout/
Formats or renders content for the reader? content/
Otherwise: primitives/

Summary Table

Component	Tier	Status	Import path	Description
CustomCardTitle	`pattern`	`stable`	`/snippets/components/page-structure/customCards.jsx`	Custom Card Title page-structure component for frame-mode and portal layout scaffolding.
DisplayCard	`pattern`	`stable`	`/snippets/components/page-structure/customCards.jsx`	Display Card page-structure component for frame-mode and portal layout scaffolding.
Divider	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	Renders a horizontal rule (---) with proper styling for frame mode.
H1	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H1 page-structure component for frame-mode and portal layout scaffolding.
H2	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H2 - Custom H2 heading component for frame mode
H3	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H3 - Custom H3 heading component for frame mode
H4	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H4 - Custom H4 heading component for frame mode
H5	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H5 - Custom H5 heading component for frame mode
H6	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H6 - Custom H6 heading component for frame mode
HeroContentContainer	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Centered frame-mode container for hero content stacked over hero backgrounds.
HeroImageBackgroundComponent	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Absolute-positioned hero background wrapper used behind portal hero content.
HeroOverviewContent	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Centered hero overview wrapper for introductory portal copy blocks.
HeroSectionContainer	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Outer frame-mode hero section wrapper for portal layouts.
InlineImageCard	`pattern`	`stable`	`/snippets/components/page-structure/customCards.jsx`	Inline Image Card page-structure component for frame-mode and portal layout scaffolding.
LogoHeroContainer	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Portal hero logo wrapper that centers a themed brand asset above hero content.
MermaidColours	`pattern`	`stable`	`/snippets/components/page-structure/mermaidColours.jsx`	Centralised colour definitions for Mermaid diagrams. Mermaid requires literal colour values and does not support CSS custom properties.
P	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	P - Custom paragraph component for frame mode
PageHeader	`pattern`	`stable`	`/snippets/components/page-structure/frameMode.jsx`	H1 - Custom H1 heading component for frame mode
PortalCardsHeader	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Header wrapper for portal card groups and section intros.
PortalContentContainer	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Frame-mode content wrapper for portal body sections.
PortalHeroContent	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Hero scaffold for portal landing pages with title, subtitle, supporting content, and optional callouts.
PortalSectionHeader	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Section heading wrapper for portal subsections with optional icon treatment.
RefCardContainer	`pattern`	`stable`	`/snippets/components/page-structure/portals.jsx`	Container for portal reference cards and related CTA blocks.
Starfield	`pattern`	`stable`	`/snippets/components/page-structure/heroGif.jsx`	Renders the starfield component
WidthCard	`pattern`	`stable`	`/snippets/components/page-structure/customCards.jsx`	Width Card page-structure component for frame-mode and portal layout scaffolding.

Component Reference

CustomCardTitle

Use CustomCardTitle when you need custom Card Title page-structure component for frame-mode and portal layout scaffolding.. Best suited for landing, overview page types. Source description: Custom Card Title page-structure component for frame-mode and portal layout scaffolding. Import path

import { CustomCardTitle } from '/snippets/components/page-structure/customCards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/home/about-livepeer/benefits.mdx, v2/home/primer.mdx, v2/internal/overview/docs-philosophy.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | icon | any | | Yes | icon prop. | | `title` | `any` | | Yes | title prop. | | style | any | “ | Yes | style prop. |

Code example

<CustomCardTitle icon="example" title="example" />

DisplayCard

Use DisplayCard when you need display Card page-structure component for frame-mode and portal layout scaffolding.. Best suited for landing, overview page types. Source description: Display Card page-structure component for frame-mode and portal layout scaffolding. Import path

import { DisplayCard } from '/snippets/components/page-structure/customCards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/community/livepeer-community/community-guidelines.mdx, v2/developers/opportunities/bug-bounties.mdx, v2/developers/opportunities/grants-and-programmes.mdx, v2/developers/opportunities/oss-contributions.mdx, v2/developers/opportunities/overview.mdx, v2/developers/opportunities/rfps-and-proposals.mdx, and 4 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | icon | any | | Yes | icon prop. | | `title` | `any` | | Yes | title prop. | | style | any | | Yes | style prop. | | `background` | `string` | `'var(--card-background)'` | No | background prop. | | `children` | `any` | | Yes | children prop. |

Code example

<DisplayCard icon="example" title="example">Example content</DisplayCard>

Divider

Use Divider when you need renders a horizontal rule (---) with proper styling for frame mode.. Best suited for landing, overview page types. Source description: Renders a horizontal rule (---) with proper styling for frame mode. Import path

import { Divider } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: H1, H2, H3, H4, H5, H6, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: 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) |

Code example

<Divider color="example" />

H1

Use H1 when you need page-structure component for frame-mode and portal layout scaffolding.. Best suited for landing, overview page types. Source description: H1 page-structure component for frame-mode and portal layout scaffolding. Import path

import { H1 } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H2, H3, H4, H5, H6, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/orchestrators/old/orchestrators-portal.mdx, and 3 more page(s) 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. |

Code example

<H1 icon="example" iconColor="example">Example content</H1>

H2

Use H2 when you need - Custom H2 heading component for frame mode. Best suited for landing, overview page types. Source description: H2 - Custom H2 heading component for frame mode Import path

import { H2 } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H3, H4, H5, H6, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/orchestrators/old/orchestrators-portal.mdx, and 3 more page(s) 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”) |

Code example

<H2 icon="example" iconColor="example">Example content</H2>

H3

Use H3 when you need - Custom H3 heading component for frame mode. Best suited for landing, overview page types. Source description: H3 - Custom H3 heading component for frame mode Import path

import { H3 } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H2, H4, H5, H6, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/community/community-portal.mdx 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”) |

Code example

<H3 icon="example" iconColor="example">Example content</H3>

H4

Use H4 when you need - Custom H4 heading component for frame mode. Best suited for landing, overview page types. Source description: H4 - Custom H4 heading component for frame mode Import path

import { H4 } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H2, H3, H5, H6, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: 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”) |

Code example

<H4 icon="example" iconColor="example">Example content</H4>

H5

Use H5 when you need - Custom H5 heading component for frame mode. Best suited for landing, overview page types. Source description: H5 - Custom H5 heading component for frame mode Import path

import { H5 } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H2, H3, H4, H6, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/orchestrators/old/orchestrators-portal.mdx, v2/orchestrators/portal.mdx, and 2 more page(s) 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”) |

Code example

<H5 icon="example" iconColor="example">Example content</H5>

H6

Use H6 when you need - Custom H6 heading component for frame mode. Best suited for landing, overview page types. Source description: H6 - Custom H6 heading component for frame mode Import path

import { H6 } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H2, H3, H4, H5, P, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: 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”) |

Code example

<H6 icon="example" iconColor="example">Example content</H6>

HeroContentContainer

Use HeroContentContainer when you need centered frame-mode container for hero content stacked over hero backgrounds.. Best suited for landing, overview page types. Source description: Centered frame-mode container for hero content stacked over hero backgrounds. Import path

import { HeroContentContainer } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<HeroContentContainer>Example content</HeroContentContainer>

HeroImageBackgroundComponent

Use HeroImageBackgroundComponent when you need absolute-positioned hero background wrapper used behind portal hero content.. Best suited for landing, overview page types. Source description: Absolute-positioned hero background wrapper used behind portal hero content. Import path

import { HeroImageBackgroundComponent } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<HeroImageBackgroundComponent>Example content</HeroImageBackgroundComponent>

HeroOverviewContent

Use HeroOverviewContent when you need centered hero overview wrapper for introductory portal copy blocks.. Best suited for landing, overview page types. Source description: Centered hero overview wrapper for introductory portal copy blocks. Import path

import { HeroOverviewContent } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<HeroOverviewContent>Example content</HeroOverviewContent>

HeroSectionContainer

Use HeroSectionContainer when you need outer frame-mode hero section wrapper for portal layouts.. Best suited for landing, overview page types. Source description: Outer frame-mode hero section wrapper for portal layouts. Import path

import { HeroSectionContainer } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. | | minHeight | string | "fit-content" | No | min Height prop. |

Code example

<HeroSectionContainer>Example content</HeroSectionContainer>

InlineImageCard

Use InlineImageCard when you need inline Image Card page-structure component for frame-mode and portal layout scaffolding.. Best suited for landing, overview page types. Source description: Inline Image Card page-structure component for frame-mode and portal layout scaffolding. Import path

import { InlineImageCard } from '/snippets/components/page-structure/customCards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/resources/media-kit.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `imgProps` | `any` | | Yes | img Props prop. | | imgStyle | any | | Yes | img Style prop. | | `cardProps` | `any` | | Yes | card Props prop. | | style | any | “ | Yes | style prop. |

Code example

<InlineImageCard imgProps="example" imgStyle="example">Example content</InlineImageCard>

LogoHeroContainer

Use LogoHeroContainer when you need portal hero logo wrapper that centers a themed brand asset above hero content.. Best suited for landing, overview page types. Source description: Portal hero logo wrapper that centers a themed brand asset above hero content. Import path

import { LogoHeroContainer } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) 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. |

Code example

<LogoHeroContainer>Example content</LogoHeroContainer>

MermaidColours

Use MermaidColours when you need centralised colour definitions for Mermaid diagrams. Mermaid requires literal colour values and does not support CSS custom properties.. Best suited for concept, reference page types. Source description: Centralised colour definitions for Mermaid diagrams. Mermaid requires literal colour values and does not support CSS custom properties. Import path

import { MermaidColours } from '/snippets/components/page-structure/mermaidColours.jsx'

Metadata

Content affinity: concept, reference
Dependencies: none
Data source: none
Last meaningful change: 2026-03-16
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/gateways/concepts/architecture.mdx, v2/gateways/concepts/business-model.mdx, v2/gateways/concepts/capabilities.mdx, v2/gateways/concepts/role.mdx, v2/gateways/guides/roadmap-and-funding/naap-multi-tenancy.mdx, v2/orchestrators/concepts/role.mdx, and 2 more page(s) Props No documented props.

Code example

MermaidColours.mermaid.light.primaryColor

P

Use P when you need - Custom paragraph component for frame mode. Best suited for landing, overview page types. Source description: P - Custom paragraph component for frame mode Import path

import { P } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H2, H3, H4, H5, H6, PageHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/orchestrators/old/orchestrators-portal.mdx, and 3 more page(s) 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”) |

Code example

<P icon="example" iconColor="example">Example content</P>

PageHeader

Use PageHeader when you need h1 - Custom H1 heading component for frame mode. Best suited for landing, overview page types. Source description: H1 - Custom H1 heading component for frame mode Import path

import { PageHeader } from '/snippets/components/page-structure/frameMode.jsx'

Metadata

Content affinity: landing, overview
Dependencies: Divider, H1, H2, H3, H4, H5, H6, P
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: 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. |

Code example

<PageHeader title="example" subtitle="example">Example content</PageHeader>

PortalCardsHeader

Use PortalCardsHeader when you need header wrapper for portal card groups and section intros.. Best suited for landing, overview page types. Source description: Header wrapper for portal card groups and section intros. Import path

import { PortalCardsHeader } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalContentContainer, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `title` | `any` | | Yes | title prop. |

Code example

<PortalCardsHeader title="example">Example content</PortalCardsHeader>

PortalContentContainer

Use PortalContentContainer when you need frame-mode content wrapper for portal body sections.. Best suited for landing, overview page types. Source description: Frame-mode content wrapper for portal body sections. Import path

import { PortalContentContainer } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalHeroContent, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<PortalContentContainer>Example content</PortalContentContainer>

PortalHeroContent

Use PortalHeroContent when you need hero scaffold for portal landing pages with title, subtitle, supporting content, and optional callouts.. Best suited for landing, overview page types. Source description: Hero scaffold for portal landing pages with title, subtitle, supporting content, and optional callouts. Import path

import { PortalHeroContent } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalSectionHeader, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 4 more page(s) 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. |

Code example

<PortalHeroContent description="example" refCardLink="example">Example content</PortalHeroContent>

PortalSectionHeader

Use PortalSectionHeader when you need section heading wrapper for portal subsections with optional icon treatment.. Best suited for landing, overview page types. Source description: Section heading wrapper for portal subsections with optional icon treatment. Import path

import { PortalSectionHeader } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, RefCardContainer
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/community/community-portal.mdx, v2/lpt/token-portal.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `title` | `any` | | Yes | title prop. | | icon | any | “ | Yes | icon prop. |

Code example

<PortalSectionHeader title="example" icon="example">Example content</PortalSectionHeader>

RefCardContainer

Use RefCardContainer when you need container for portal reference cards and related CTA blocks.. Best suited for landing, overview page types. Source description: Container for portal reference cards and related CTA blocks. Import path

import { RefCardContainer } from '/snippets/components/page-structure/portals.jsx'

Metadata

Content affinity: landing, overview
Dependencies: HeroContentContainer, HeroImageBackgroundComponent, HeroOverviewContent, HeroSectionContainer, LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, PortalSectionHeader
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | “ | Yes | children prop. |

Code example

<RefCardContainer>Example content</RefCardContainer>

Starfield

Use Starfield when you need renders the starfield component. Best suited for universal page types. Source description: Renders the starfield component Import path

import { Starfield } from '/snippets/components/page-structure/heroGif.jsx'

Metadata

Content affinity: universal
Dependencies: none
Data source: none
Last meaningful change: 2026-03-08
Breaking change risk: low
Owner: @livepeer/docs-team
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers/portal.mdx, v2/gateways/gateways-portal.mdx, v2/home/mission-control.mdx, v2/lpt/token-portal.mdx, and 2 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | density | number | 1.1 | No | Density used by the component. |

Code example

<Starfield />

WidthCard

Use WidthCard when you need width Card page-structure component for frame-mode and portal layout scaffolding.. Best suited for landing, overview page types. Source description: Width Card page-structure component for frame-mode and portal layout scaffolding. Import path

import { WidthCard } from '/snippets/components/page-structure/customCards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-10
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/gateways/quickstart/gateway-setup.mdx, v2/home/about-livepeer/benefits.mdx, v2/home/about-livepeer/roadmap.mdx, v2/resources/media-kit.mdx Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | width | string | '80%' | No | width prop. | | children | any | | Yes | children prop. | | `cardProps` | `any` | | Yes | card Props prop. |

Code example

<WidthCard cardProps="example">Example content</WidthCard>

Resources

Documentation Guide

Livepeer Concepts

Developer References

Gateway References

Orchestrator References

LPT & Delegator References

Community Resources

Partner Resources

Help Center

Technical References

Changelog

Back to Component Library

​Page Structure

​Decision Tree Excerpt

​Summary Table

​Component Reference

​CustomCardTitle

​DisplayCard

​Divider

​H1

​H2

​H3

​H4

​H5

​H6

​HeroContentContainer

​HeroImageBackgroundComponent

​HeroOverviewContent

​HeroSectionContainer

​InlineImageCard

​LogoHeroContainer

​MermaidColours

​P

​PageHeader

​PortalCardsHeader

​PortalContentContainer

​PortalHeroContent

​PortalSectionHeader

​RefCardContainer

​Starfield

​WidthCard

Page Structure

Decision Tree Excerpt

Summary Table

Component Reference

CustomCardTitle

DisplayCard

Divider

H1

H2

H3

H4

H5

H6

HeroContentContainer

HeroImageBackgroundComponent

HeroOverviewContent

HeroSectionContainer

InlineImageCard

LogoHeroContainer

MermaidColours

P

PageHeader

PortalCardsHeader

PortalContentContainer

PortalHeroContent

PortalSectionHeader

RefCardContainer

Starfield

WidthCard