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

Back to Component Library

Return to the generated component library landing page.

​
Displays

Renderers for authored content — code, video, diagrams, quotes, response fields. This category currently contains 20 governed export(s).

​
Decision Tree Excerpt

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

​
Summary Table

ComponentStatusImport pathDescription
CardVideostable/snippets/components/displays/video/Video.jsxYouTube embed inside a Card wrapper with aspect-ratio iframe.
CodeComponentstable/snippets/components/displays/code/Code.jsxSimple code block with title and language syntax highlighting.
CodeSectionstable/snippets/components/displays/code/Code.jsxExpandable code section with title header.
ComplexCodeBlockstable/snippets/components/displays/code/Code.jsxCode block with both pre-note and post-note sections.
CustomCodeBlockstable/snippets/components/displays/code/Code.jsxCode block with optional pre/post notes and expandable wrapper.
CustomResponseFieldstable/snippets/components/displays/response-fields/ResponseField.jsxCustom-styled API response field with configurable margin.
FrameQuotestable/snippets/components/displays/quotes/Quote.jsxFramed blockquote with optional author, source link, and image.
LinkedInEmbedstable/snippets/components/displays/video/Video.jsxLinkedIn post embed via responsive iframe with compact layout.
Quotestable/snippets/components/displays/quotes/Quote.jsxStyled blockquote with accent border and centred italic text.
ResponseFieldAccordionstable/snippets/components/displays/response-fields/ResponseField.jsxAccordion-style response field with collapsible detail section.
ResponseFieldExpandablestable/snippets/components/displays/response-fields/ResponseField.jsxExpandable response field that reveals nested content on click.
ResponseFieldGroupstable/snippets/components/displays/response-fields/ResponseField.jsxContainer for grouping multiple response fields with consistent spacing.
ScrollableDiagramstable/snippets/components/displays/diagrams/ZoomableDiagram.jsxPannable, zoomable diagram container with zoom controls and accessible buttons.
ShowcaseVideostable/snippets/components/displays/video/Video.jsxFull-width video with negative-margin breakout and rounded frame.
TitledVideostable/snippets/components/displays/video/Video.jsxAuto-playing video with title/subtitle overlay. Respects prefers-reduced-motion.
ValueResponseFieldstable/snippets/components/displays/response-fields/ResponseField.jsxAPI response field with name, type, and value display.
Videostable/snippets/components/displays/video/Video.jsxBasic framed video player with caption support.
YouTubeVideostable/snippets/components/displays/video/Video.jsxYouTube embed via responsive iframe with aspect-ratio preservation.
YouTubeVideoDatastable/snippets/components/displays/video/Video.jsxRenders a columned grid of YouTubeVideo embeds from an items array.
YouTubeVideoDownloadstable/snippets/components/displays/video/Video.jsxYouTube embed with download hint text below.

​
Component Reference

​
CardVideo

Use CardVideo when you need youTube embed inside a Card wrapper with aspect-ratio iframe.. Accepts: style, className, …rest. Source description: YouTube embed inside a Card wrapper with aspect-ratio iframe. Import path 
import { CardVideo } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: style, className, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `any` | | Yes | title prop. | | style | any | “ | Yes | style prop. | | className | string | '' | No | Optional CSS class override. |

​
CodeComponent

Use CodeComponent when you need simple code block with title and language syntax highlighting.. Accepts: className, style, …rest. Source description: Simple code block with title and language syntax highlighting. Import path 
import { CodeComponent } from '/snippets/components/displays/code/Code.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | string | "" | No | filename prop. | | icon | string | "terminal" | No | icon prop. | | language | string | "" | No | language prop. | | highlight | string | "" | No | highlight prop. | | expandable | boolean | false | No | expandable prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
CodeSection

Use CodeSection when you need expandable code section with title header.. Accepts: className, style, …rest. Source description: Expandable code section with title header. Import path 
import { CodeSection } from '/snippets/components/displays/code/Code.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | fields prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
ComplexCodeBlock

Use ComplexCodeBlock when you need code block with both pre-note and post-note sections.. Accepts: none. Source description: Code block with both pre-note and post-note sections. Import path 
import { ComplexCodeBlock } from '/snippets/components/displays/code/Code.jsx'
Metadata
  • Status: stable
  • Accepts: none
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | any | | Yes | filename prop. | | `icon` | `any` | | Yes | icon prop. | | language | any | | Yes | language prop. | | `highlight` | `any` | | Yes | highlight prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | preNote | any | null | No | pre Note prop. | | postNote | any | null | No | post Note prop. |

​
CustomCodeBlock

Use CustomCodeBlock when you need code block with optional pre/post notes and expandable wrapper.. Accepts: none. Source description: Code block with optional pre/post notes and expandable wrapper. Import path 
import { CustomCodeBlock } from '/snippets/components/displays/code/Code.jsx'
Metadata
  • Status: stable
  • Accepts: none
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | filename | any | | Yes | filename prop. | | `icon` | `any` | | Yes | icon prop. | | language | any | | Yes | language prop. | | `highlight` | `any` | | Yes | highlight prop. | | codeString | string | "" | No | code String prop. | | placeholderValue | string | "" | No | placeholder Value prop. | | wrap | boolean | true | No | wrap prop. | | lines | boolean | true | No | lines prop. | | preNote | string | "" | No | pre Note prop. | | postNote | string | "" | No | post Note prop. | | output | string | "" | No | output prop. |

​
CustomResponseField

Use CustomResponseField when you need custom-styled API response field with configurable margin.. Accepts: className, style, …props. Source description: Custom-styled API response field with configurable margin. Import path 
import { CustomResponseField } from '/snippets/components/displays/response-fields/ResponseField.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...props
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | description | React.ReactNode | | Yes | Primary content rendered by the component. | | `props` | `object` | | No | Additional props forwarded to ResponseField. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
FrameQuote

Use FrameQuote when you need framed blockquote with optional author, source link, and image.. Accepts: children, className, style, …props. Source description: Framed blockquote with optional author, source link, and image. Import path 
import { FrameQuote } from '/snippets/components/displays/quotes/Quote.jsx'
Metadata
  • Status: stable
  • Accepts: children, className, style, ...props
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | any | | Yes | children prop. | | `author` | `any` | | Yes | author prop. | | source | any | | Yes | source prop. | | `href` | `any` | | Yes | href prop. | | frame | boolean | true | No | frame prop. | | align | string | 'right' | No | align prop. | | borderColor | any | | Yes | border Color prop. | | `img` | `any` | | Yes | img prop. | | spacing | boolean | true | No | spacing prop. | | props | any | “ | Yes | props prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
LinkedInEmbed

Use LinkedInEmbed when you need linkedIn post embed via responsive iframe with compact layout.. Accepts: none. Source description: LinkedIn post embed via responsive iframe with compact layout. Import path 
import { LinkedInEmbed } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: none
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `string` | `"Embedded post"` | No | title prop. | | `hint` | `string` | `""` | No | hint prop. | | `caption` | `any` | | Yes | caption prop. | | height | string | "399" | No | height prop. |

​
Quote

Use Quote when you need styled blockquote with accent border and centred italic text.. Accepts: children, className, style, …rest. Source description: Styled blockquote with accent border and centred italic text. Import path 
import { Quote } from '/snippets/components/displays/quotes/Quote.jsx'
Metadata
  • Status: stable
  • Accepts: children, className, 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. |

​
ResponseFieldAccordion

Use ResponseFieldAccordion when you need accordion-style response field with collapsible detail section.. Accepts: className, style, …props. Source description: Accordion-style response field with collapsible detail section. Import path 
import { ResponseFieldAccordion } from '/snippets/components/displays/response-fields/ResponseField.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...props
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to Accordion. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
ResponseFieldExpandable

Use ResponseFieldExpandable when you need expandable response field that reveals nested content on click.. Accepts: className, style, …props. Source description: Expandable response field that reveals nested content on click. Import path 
import { ResponseFieldExpandable } from '/snippets/components/displays/response-fields/ResponseField.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...props
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to Expandable. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
ResponseFieldGroup

Use ResponseFieldGroup when you need container for grouping multiple response fields with consistent spacing.. Accepts: className, style, …props. Source description: Container for grouping multiple response fields with consistent spacing. Import path 
import { ResponseFieldGroup } from '/snippets/components/displays/response-fields/ResponseField.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...props
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | component | string | "accordion" | No | Component used by the component. | | fields | object | {} | No | Fields used by the component. | | props | object | “ | No | Additional props forwarded to the selected wrapper component. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
ScrollableDiagram

Use ScrollableDiagram when you need pannable, zoomable diagram container with zoom controls and accessible buttons.. Accepts: children, className, style, …rest. Source description: Pannable, zoomable diagram container with zoom controls and accessible buttons. Import path 
import { ScrollableDiagram } from '/snippets/components/displays/diagrams/ZoomableDiagram.jsx'
Metadata
  • Status: stable
  • Accepts: children, className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | children | React.ReactNode | “ | Yes | Content rendered inside the component. | | title | string | "" | No | Title text rendered by the component. | | maxHeight | string | "500px" | No | Max height used by the component. | | minWidth | string | "100%" | No | Min width used by the component. | | showControls | boolean | false | No | Boolean flag that controls component behaviour. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
ShowcaseVideo

Use ShowcaseVideo when you need full-width video with negative-margin breakout and rounded frame.. Accepts: className, style, …rest. Source description: Full-width video with negative-margin breakout and rounded frame. Import path 
import { ShowcaseVideo } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `any` | | Yes | title prop. | | subtitle | any | “ | Yes | subtitle prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
TitledVideo

Use TitledVideo when you need auto-playing video with title/subtitle overlay. Respects prefers-reduced-motion.. Accepts: className, style, …rest. Source description: Auto-playing video with title/subtitle overlay. Respects prefers-reduced-motion. Import path 
import { TitledVideo } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `any` | | Yes | title prop. | | subtitle | any | “ | Yes | subtitle prop. | | arrow | boolean | false | No | arrow prop. | | borderRadius | string | "12px" | No | border Radius prop. | | style | object | {} | No | style prop. | | className | string | '' | No | Optional CSS class override. |

​
ValueResponseField

Use ValueResponseField when you need aPI response field with name, type, and value display.. Accepts: children, className, style, …props. Source description: API response field with name, type, and value display. Import path 
import { ValueResponseField } from '/snippets/components/displays/response-fields/ResponseField.jsx'
Metadata
  • Status: stable
  • Accepts: children, className, style, ...props
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | description | React.ReactNode | | Yes | Primary content rendered by the component. | | `post` | `string` | `null` | No | Post used by the component. | | `label` | `string` | `"value"` | No | Label text rendered by the component. | | `line` | `boolean` | `true` | No | Boolean flag that controls component behaviour. | | `children` | `React.ReactNode` | | Yes | Content rendered inside the component. | | props | object | “ | No | Additional props forwarded to ResponseField. | | className | string | "" | No | CSS class name. | | style | object | {} | No | Inline style overrides. |

​
Video

Use Video when you need basic framed video player with caption support.. Accepts: children, className, style, …rest. Source description: Basic framed video player with caption support. Import path 
import { Video } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: children, className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | src | any | | Yes | src prop. | | `title` | `string` | `""` | No | title prop. | | `author` | `string` | `""` | No | author prop. | | `caption` | `any` | | Yes | caption prop. | | href | string | "" | No | href prop. | | controls | boolean | true | No | controls prop. | | autoPlay | boolean | false | No | auto Play prop. | | loop | boolean | false | No | loop prop. | | muted | boolean | false | No | muted prop. | | children | any | “ | Yes | children prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
YouTubeVideo

Use YouTubeVideo when you need youTube embed via responsive iframe with aspect-ratio preservation.. Accepts: className, style, …rest. Source description: YouTube embed via responsive iframe with aspect-ratio preservation. Import path 
import { YouTubeVideo } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `string` | `""` | No | title prop. | | `author` | `string` | `""` | No | author prop. | | `hint` | `string` | `""` | No | hint prop. | | `caption` | `any` | | Yes | caption prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |

​
YouTubeVideoData

Use YouTubeVideoData when you need renders a columned grid of YouTubeVideo embeds from an items array.. Accepts: none. Source description: Renders a columned grid of YouTubeVideo embeds from an items array. Import path 
import { YouTubeVideoData } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: none
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | items | Array | [ | No | ] - items prop. | | limit | any | “ | Yes | limit prop. | | cols | number | 2 | No | cols prop. |

​
YouTubeVideoDownload

Use YouTubeVideoDownload when you need youTube embed with download hint text below.. Accepts: className, style, …rest. Source description: YouTube embed with download hint text below. Import path 
import { YouTubeVideoDownload } from '/snippets/components/displays/video/Video.jsx'
Metadata
  • Status: stable
  • Accepts: className, style, ...rest
  • Data source: none Props | Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | embedUrl | any | | Yes | embed Url prop. | | `title` | `any` | | Yes | title prop. | | hint | any | “ | Yes | hint prop. | | caption | string | "" | No | caption prop. | | className | string | '' | No | Optional CSS class override. | | style | object | {} | No | Optional inline style override. |
Last modified on March 30, 2026