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 24 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/custom-cards.jsx`	Custom Card Title page-structure component for frame-mode and portal layout scaffolding.
DisplayCard	`pattern`	`stable`	`/snippets/components/page-structure/custom-cards.jsx`	Display Card page-structure component for frame-mode and portal layout scaffolding.
Divider	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	Renders a horizontal rule (---) with proper styling for frame mode.
H1	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	H1 page-structure component for frame-mode and portal layout scaffolding.
H2	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	H2 - Custom H2 heading component for frame mode
H3	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	H3 - Custom H3 heading component for frame mode
H4	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	H4 - Custom H4 heading component for frame mode
H5	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	H5 - Custom H5 heading component for frame mode
H6	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.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/custom-cards.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.
P	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.jsx`	P - Custom paragraph component for frame mode
PageHeader	`pattern`	`stable`	`/snippets/components/page-structure/frame-mode.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/hero-gif.jsx`	Animated Livepeer logo starfield background for frame-mode hero sections.
WidthCard	`pattern`	`stable`	`/snippets/components/page-structure/custom-cards.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/custom-cards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-09
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/custom-cards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-09
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/community/livepeer-community/community-guidelines.mdx, v2/developers/builder-opportunities/bug-bounties.mdx, v2/developers/builder-opportunities/grants-and-programmes.mdx, v2/developers/builder-opportunities/oss-contributions.mdx, v2/developers/builder-opportunities/overview.mdx, v2/developers/builder-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/frame-mode.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/frame-mode.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: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 4 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/frame-mode.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: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 4 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/frame-mode.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/frame-mode.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/frame-mode.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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-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 | 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/frame-mode.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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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/custom-cards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-09
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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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>

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/frame-mode.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: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 4 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/frame-mode.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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 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 animated Livepeer logo starfield background for frame-mode hero sections.. Best suited for landing, overview page types. Source description: Animated Livepeer logo starfield background for frame-mode hero sections. Import path

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

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-09
Breaking change risk: medium
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/about/portal.mdx, v2/community/community-portal.mdx, v2/developers-new/portal.mdx, v2/developers/portal.mdx, v2/gateways-new/portal.mdx, v2/gateways/gateways-portal.mdx, and 5 more page(s) Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | density | number | 1.1 | No | density prop. |

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/custom-cards.jsx'

Metadata

Content affinity: landing, overview
Dependencies: none
Data source: none
Last meaningful change: 2026-03-09
Breaking change risk: low
Owner: docs
Decision: KEEP
Status: stable
Tier: pattern
@usedIn: v2/gateways-new/get-started/gateway-setup.mdx, 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

​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

P

PageHeader

PortalCardsHeader

PortalContentContainer

PortalHeroContent

PortalSectionHeader

RefCardContainer

Starfield

WidthCard