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

# Elements

> Standalone visual atoms – icons, text, links, callouts, math, spacing, images.

<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 elements`. <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>

## Elements

Standalone visual atoms – icons, text, links, callouts, math, spacing, images.

This category currently contains **27** 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                                                                          |
| ----------------------- | -------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| AccordionTitleWithArrow | `stable` | `/snippets/components/elements/text/Text.jsx`                  | Accordion header text with trailing arrow icon.                                      |
| BlinkingIcon            | `stable` | `/snippets/components/elements/links/Links.jsx`                | Animated icon with pulsing opacity. Respects prefers-reduced-motion.                 |
| BlinkingIcon            | `stable` | `/snippets/components/elements/links/Links.jsx`                | Preset blinking terminal icon (alias for BlinkingIcon with terminal defaults).       |
| CardTitleTextWithArrow  | `stable` | `/snippets/components/elements/text/Text.jsx`                  | Card title with trailing arrow icon for navigation indication.                       |
| ComingSoonCallout       | `stable` | `/snippets/components/elements/callouts/Callouts.jsx`          | Banner indicating a feature or page is coming soon, with links to related resources. |
| CopyText                | `stable` | `/snippets/components/elements/text/Text.jsx`                  | Text with a click-to-copy button that copies content to clipboard.                   |
| CustomCallout           | `stable` | `/snippets/components/elements/links/Links.jsx`                | Styled callout box with icon, custom colour, and child content.                      |
| CustomCardTitle         | `stable` | `/snippets/components/elements/text/Text.jsx`                  | Card title row with icon and text, using flexbox alignment.                          |
| CustomDivider           | `stable` | `/snippets/components/elements/spacing/Divider.jsx`            | Themed horizontal divider with optional centre text and Livepeer logo accents.       |
| DoubleIconLink          | `stable` | `/snippets/components/elements/links/Links.jsx`                | Inline link with icons on both sides.                                                |
| DownloadButton          | `stable` | `/snippets/components/elements/buttons/Buttons.jsx`            | Lazy-loaded download button with icon that renders on viewport intersection.         |
| FocusableScrollRegions  | `stable` | `/snippets/components/elements/a11y/FocusableScrollRegion.jsx` | Makes scroll regions keyboard-focusable by adding tabindex to matching selectors.    |
| GotoCard                | `stable` | `/snippets/components/elements/links/Links.jsx`                | Card-style navigation link wrapping Mintlify Card component.                         |
| GotoLink                | `stable` | `/snippets/components/elements/links/Links.jsx`                | Inline navigation link with icon prefix and label.                                   |
| Image                   | `stable` | `/snippets/components/elements/images/Image.jsx`               | Framed image with optional caption and full-width toggle.                            |
| LinkArrow               | `stable` | `/snippets/components/elements/links/Links.jsx`                | External link with arrow icon, optional description, and line break control.         |
| LinkImage               | `stable` | `/snippets/components/elements/images/Image.jsx`               | Clickable framed image that opens a URL in a new tab.                                |
| LivepeerIcon            | `stable` | `/snippets/components/elements/icons/Icons.jsx`                | Theme-aware Livepeer icon with CSS custom property colour adaptation.                |
| LivepeerSVG             | `stable` | `/snippets/components/elements/icons/Icons.jsx`                | Inline Livepeer logo as SVG with currentColor fill.                                  |
| MathBlock               | `stable` | `/snippets/components/elements/math/Math.jsx`                  | Renders LaTeX as a block-level math expression using KaTeX.                          |
| MathInline              | `stable` | `/snippets/components/elements/math/Math.jsx`                  | Renders LaTeX as inline math using KaTeX.                                            |
| PreviewCallout          | `stable` | `/snippets/components/elements/callouts/Callouts.jsx`          | Banner indicating content is in preview/draft state with feedback links.             |
| ReviewCallout           | `stable` | `/snippets/components/elements/callouts/Callouts.jsx`          | Banner indicating content is under review with status links.                         |
| SocialLinks             | `stable` | `/snippets/components/elements/links/Links.jsx`                | Row of icon-only social media links with tooltips and aria-labels.                   |
| Spacer                  | `stable` | `/snippets/components/elements/spacing/Divider.jsx`            | Empty spacer div with configurable size and direction.                               |
| Subtitle                | `stable` | `/snippets/components/elements/text/Text.jsx`                  | Styled subtitle text with configurable colour, size, and alignment.                  |
| TipWithArrow            | `stable` | `/snippets/components/elements/links/Links.jsx`                | Callout box with tip icon and corner arrow indicator.                                |

## Component Reference

### AccordionTitleWithArrow

Use **AccordionTitleWithArrow** when you need accordion header text with trailing arrow icon.. Accepts: children, style, className, ...rest.
Source description: Accordion header text with trailing arrow icon.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { AccordionTitleWithArrow } from '/snippets/components/elements/text/Text.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `text` | `any` | ``| Yes | text prop. | | `children` | `any` |`` | Yes | children prop. |
  \| `color` | `string` | `"var(--text)"` | No | color prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<AccordionTitleWithArrow text="example">Example content</AccordionTitleWithArrow>
```

<CustomDivider />

### BlinkingIcon

Use **BlinkingIcon** when you need animated icon with pulsing opacity. Respects prefers-reduced-motion.. Accepts: style, className, ...rest.
Source description: Animated icon with pulsing opacity. Respects prefers-reduced-motion.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { BlinkingIcon } from '/snippets/components/elements/icons/Icons.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `icon` | `string` | `"terminal"` | No | Icon name to display |
  \| `size` | `number` | `16` | No | Size of the icon in pixels |
  \| `color` | `string` | \`\` | Yes | Color of the icon (defaults to theme accent) |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<BlinkingIcon color="example" />
```

<CustomDivider />

### BlinkingIcon

Use **BlinkingIcon** when you need preset blinking terminal icon (alias for BlinkingIcon with terminal defaults).. Accepts: style, className, ...rest.
Source description: Preset blinking terminal icon (alias for BlinkingIcon with terminal defaults).
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { BlinkingIcon } from '/snippets/components/elements/icons/Icons.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  No documented props.

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<BlinkingIcon />
```

<CustomDivider />

### CardTitleTextWithArrow

Use **CardTitleTextWithArrow** when you need card title with trailing arrow icon for navigation indication.. Accepts: children, style, className, ...cardProps.
Source description: Card title with trailing arrow icon for navigation indication.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CardTitleTextWithArrow } from '/snippets/components/elements/text/Text.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, style, className, ...cardProps`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `any` | ``| Yes | children prop. | | `cardProps` | `any` |`` | Yes | card Props prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<CardTitleTextWithArrow cardProps="example">Example content</CardTitleTextWithArrow>
```

<CustomDivider />

### ComingSoonCallout

Use **ComingSoonCallout** when you need banner indicating a feature or page is coming soon, with links to related resources.. Accepts: style, className, ...rest.
Source description: Banner indicating a feature or page is coming soon, with links to related resources.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ComingSoonCallout } from '/snippets/components/elements/callouts/Callouts.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `type` | `string` | `"page"` | No | Type used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<ComingSoonCallout />
```

<CustomDivider />

### CopyText

Use **CopyText** when you need text with a click-to-copy button that copies content to clipboard.. Accepts: style, className, ...rest.
Source description: Text with a click-to-copy button that copies content to clipboard.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CopyText } from '/snippets/components/elements/text/Text.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `text` | `any` | ``| Yes | text prop. | | `label` | `any` |`` | Yes | label prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<CopyText text="example" label="example" />
```

<CustomDivider />

### CustomCallout

Use **CustomCallout** when you need styled callout box with icon, custom colour, and child content.. Accepts: children, style, className, ...rest.
Source description: Styled callout box with icon, custom colour, and child content.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CustomCallout } from '/snippets/components/elements/callouts/Callouts.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `React.ReactNode` | ``| Yes | Content to display in the callout | | `icon` | `string` | `"lightbulb"` | No | Icon name to display | | `color` | `string` |`` | Yes | Primary color for icon, border, and background (defaults to theme accent) |
  \| `iconSize` | `number` | `16` | No | Size of the icon in pixels |
  \| `textSize` | `string` | `"0.875rem"` | No | Font size for the text content |
  \| `textColor` | `string` | \`\` | Yes | Text color (defaults to match icon color) |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<CustomCallout color="example" textColor="example">Example content</CustomCallout>
```

<CustomDivider />

### CustomCardTitle

Use **CustomCardTitle** when you need card title row with icon and text, using flexbox alignment.. Accepts: style, className, ...rest.
Source description: Card title row with icon and text, using flexbox alignment.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CustomCardTitle } from '/snippets/components/elements/text/Text.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `icon` | `string` | ``| Yes | Icon configuration used by the component. | | `title` | `React.ReactNode` |`` | Yes | Title text rendered by the component. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |
  \| `className` | `string` | `""` | No | CSS class name. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<CustomCardTitle icon="sparkles" title="Example" style={{}} />
```

<CustomDivider />

### CustomDivider

Use **CustomDivider** when you need themed horizontal divider with optional centre text and Livepeer logo accents.. Accepts: style, className, ...rest.
Source description: Themed horizontal divider with optional centre text and Livepeer logo accents.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { CustomDivider } from '/snippets/components/elements/spacing/Divider.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `color` | `string` | `"var(--border)"` | No | color prop. |
  \| `middleText` | `string` | `""` | No | middle Text prop. |
  \| `spacing` | `string` | `"default"` | No | Named spacing preset for authored page layouts. |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<CustomDivider />
```

<CustomDivider />

### DoubleIconLink

Use **DoubleIconLink** when you need inline link with icons on both sides.. Accepts: style, className, ...rest.
Source description: Inline link with icons on both sides.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { DoubleIconLink } from '/snippets/components/elements/links/Links.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `label` | `string` | `""` | No | Link text/label |
  \| `href` | `string` | `"#"` | No | Link URL |
  \| `text` | `string` | `""` | No | Optional text to display before the link |
  \| `iconLeft` | `string` | `"github"` | No | Icon to display on the left |
  \| `iconRight` | `string` | `"arrow-up-right"` | No | Icon to display on the right |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<DoubleIconLink />
```

<CustomDivider />

### DownloadButton

Use **DownloadButton** when you need lazy-loaded download button with icon that renders on viewport intersection.. Accepts: style, className, ...rest.
Source description: Lazy-loaded download button with icon that renders on viewport intersection.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { DownloadButton } from '/snippets/components/elements/buttons/Buttons.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `label` | `string` | `'Download'` | No | label prop. |
  \| `icon` | `string` | `'download'` | No | icon prop. |
  \| `downloadLink` | `any` | \`\` | Yes | download Link prop. |
  \| `rightIcon` | `string` | `''` | No | right Icon prop. |
  \| `border` | `boolean` | `false` | No | border prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<DownloadButton downloadLink="example" />
```

<CustomDivider />

### FocusableScrollRegions

Use **FocusableScrollRegions** when you need makes scroll regions keyboard-focusable by adding tabindex to matching selectors.. Accepts: selectors.
Source description: Makes scroll regions keyboard-focusable by adding tabindex to matching selectors.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { FocusableScrollRegions } from '/snippets/components/elements/a11y/FocusableScrollRegion.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `selectors`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `selectors` | `any` | \`\` | Yes | selectors prop. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<FocusableScrollRegions selectors="example" />
```

<CustomDivider />

### GotoCard

Use **GotoCard** when you need card-style navigation link wrapping Mintlify Card component.. Accepts: style, className, ...props.
Source description: Card-style navigation link wrapping Mintlify Card component.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { GotoCard } from '/snippets/components/elements/links/Links.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...props`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `label` | `string` | ``| Yes | Card title | | `relativePath` | `string` |`` | Yes | Relative URL path |
  \| `icon` | `string` | ``| Yes | Icon to display (defaults to "arrow-turn-down-right") | | `text` | `React.ReactNode` |`` | Yes | Card content |
  \| `cta` | `string` | `""` | No | Call-to-action button text |
  \| `props` | `any` | \`\` | Yes | props prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<GotoCard label="example" relativePath="example" />
```

<CustomDivider />

### GotoLink

Use **GotoLink** when you need inline navigation link with icon prefix and label.. Accepts: style, className, ...rest.
Source description: Inline navigation link with icon prefix and label.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { GotoLink } from '/snippets/components/elements/links/Links.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `label` | `string` | ``| Yes | Link text/label | | `relativePath` | `string` |`` | Yes | Relative URL path |
  \| `text` | `string` | `""` | No | Optional text to display before the link |
  \| `icon` | `string` | `"arrow-turn-down-right"` | No | Icon to display |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<GotoLink label="example" relativePath="example" />
```

<CustomDivider />

### Image

Use **Image** when you need framed image with optional caption and full-width toggle.. Accepts: style, className, ...rest.
Source description: Framed image with optional caption and full-width toggle.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Image } from '/snippets/components/elements/images/Image.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `src` | `any` | ``| Yes | src prop. | | `alt` | `any` |`` | Yes | alt prop. |
  \| `caption` | `any` | ``| Yes | caption prop. | | `icon` | `any` |`` | Yes | icon prop. |
  \| `hint` | `any` | \`\` | Yes | hint prop. |
  \| `fullwidth` | `boolean` | `true` | No | fullwidth prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<Image src="example" alt="example" />
```

<CustomDivider />

### LinkArrow

Use **LinkArrow** when you need external link with arrow icon, optional description, and line break control.. Accepts: style, className, ...rest.
Source description: External link with arrow icon, optional description, and line break control.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { LinkArrow } from '/snippets/components/elements/links/Links.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `href` | `any` | ``| Yes | href prop. | | `label` | `any` |`` | Yes | label prop. |
  \| `description` | `any` | ``| Yes | description prop. | | `newline` | `boolean` | `true` | No | newline prop. | | `borderColor` | `any` |`` | Yes | border Color prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<LinkArrow href="example" label="example" />
```

<CustomDivider />

### LinkImage

Use **LinkImage** when you need clickable framed image that opens a URL in a new tab.. Accepts: style, className, ...rest.
Source description: Clickable framed image that opens a URL in a new tab.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { LinkImage } from '/snippets/components/elements/images/Image.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `src` | `any` | ``| Yes | src prop. | | `alt` | `any` |`` | Yes | alt prop. |
  \| `caption` | `any` | ``| Yes | caption prop. | | `icon` | `any` |`` | Yes | icon prop. |
  \| `hint` | `any` | ``| Yes | hint prop. | | `href` | `any` |`` | Yes | href prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<LinkImage src="example" alt="example" />
```

<CustomDivider />

### LivepeerIcon

Use **LivepeerIcon** when you need theme-aware Livepeer icon with CSS custom property colour adaptation.. Accepts: ...props.
Source description: Theme-aware Livepeer icon with CSS custom property colour adaptation.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { LivepeerIcon } from '/snippets/components/elements/icons/Icons.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `...props`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `size` | `number` | `16` | No | size prop. |
  \| `color` | `any` | ``| Yes | color prop. | | `props` | `any` |`` | Yes | props prop. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<LivepeerIcon color="example" props="example" />
```

<CustomDivider />

### LivepeerSVG

Use **LivepeerSVG** when you need inline Livepeer logo as SVG with currentColor fill.. Accepts: ...props.
Source description: Inline Livepeer logo as SVG with currentColor fill.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { LivepeerSVG } from '/snippets/components/elements/icons/Icons.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `...props`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `size` | `number` | `24` | No | size prop. |
  \| `props` | `any` | \`\` | Yes | props prop. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<LivepeerSVG props="example" />
```

<CustomDivider />

### MathBlock

Use **MathBlock** when you need renders LaTeX as a block-level math expression using KaTeX.. Accepts: style, className, ...rest.
Source description: Renders LaTeX as a block-level math expression using KaTeX.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { MathBlock } from '/snippets/components/elements/math/Math.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `latex` | `any` | ``| Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` |`` | Yes | aria Label prop. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<MathBlock latex="example" ariaLabel="example" />
```

<CustomDivider />

### MathInline

Use **MathInline** when you need renders LaTeX as inline math using KaTeX.. Accepts: style, className, ...rest.
Source description: Renders LaTeX as inline math using KaTeX.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { MathInline } from '/snippets/components/elements/math/Math.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `latex` | `any` | ``| Yes | latex prop. | | `className` | `string` | `""` | No | class Name prop. | | `ariaLabel` | `any` |`` | Yes | aria Label prop. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<MathInline latex="example" ariaLabel="example" />
```

<CustomDivider />

### PreviewCallout

Use **PreviewCallout** when you need banner indicating content is in preview/draft state with feedback links.. Accepts: style, className, ...rest.
Source description: Banner indicating content is in preview/draft state with feedback links.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { PreviewCallout } from '/snippets/components/elements/callouts/Callouts.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<PreviewCallout />
```

<CustomDivider />

### ReviewCallout

Use **ReviewCallout** when you need banner indicating content is under review with status links.. Accepts: style, className, ...rest.
Source description: Banner indicating content is under review with status links.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { ReviewCallout } from '/snippets/components/elements/callouts/Callouts.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<ReviewCallout />
```

<CustomDivider />

### SocialLinks

Use **SocialLinks** when you need row of icon-only social media links with tooltips and aria-labels.. Accepts: style, className, ...rest.
Source description: Row of icon-only social media links with tooltips and aria-labels.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { SocialLinks } from '/snippets/components/elements/links/Links.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `size` | `number` | `20` | No | Size used by the component. |
  \| `gap` | `string` | `"0.75rem"` | No | Gap used by the component. |
  \| `justify` | `string` | `"center"` | No | Justify used by the component. |
  \| `color` | `string` | \`\` | Yes | Color used by the component. |
  \| `className` | `string` | `""` | No | CSS class name. |
  \| `style` | `object` | `{}` | No | Inline style overrides. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<SocialLinks color="value" />
```

<CustomDivider />

### Spacer

Use **Spacer** when you need empty spacer div with configurable size and direction.. Accepts: style, className, ...rest.
Source description: Empty spacer div with configurable size and direction.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Spacer } from '/snippets/components/elements/spacing/Divider.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `size` | `string` | `"1rem"` | No | Size used by the component. |
  \| `direction` | `string` | `"vertical"` | No | Direction used by the component. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<Spacer />
```

<CustomDivider />

### Subtitle

Use **Subtitle** when you need styled subtitle text with configurable colour, size, and alignment.. Accepts: children, style, className, ...rest.
Source description: Styled subtitle text with configurable colour, size, and alignment.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Subtitle } from '/snippets/components/elements/text/Text.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `style` | `object` | `{}` | No | style prop. |
  \| `text` | `any` | ``| Yes | text prop. | | `children` | `any` |`` | Yes | children prop. |
  \| `className` | `string` | `''` | No | Optional CSS class override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<Subtitle text="example">Example content</Subtitle>
```

<CustomDivider />

### TipWithArrow

Use **TipWithArrow** when you need callout box with tip icon and corner arrow indicator.. Accepts: children, style, className, ...rest.
Source description: Callout box with tip icon and corner arrow indicator.
**Import path**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { TipWithArrow } from '/snippets/components/elements/callouts/Callouts.jsx'
```

**Metadata**

* Status: `stable`
* Accepts: `children, style, className, ...rest`
* Data source: `none`
  **Props**
  \| Prop | Type | Default | Required | Description |
  \| --- | --- | --- | --- | --- |
  \| `children` | `React.ReactNode` | ``| Yes | Content to display in the tip | | `icon` | `string` | `"lightbulb"` | No | Main icon to display on the left | | `arrowIcon` | `string` | `"arrow-up-right"` | No | Arrow icon to display in top-right | | `color` | `string` |`` | Yes | Primary color for icons, border, and background (defaults to theme accent) |
  \| `iconSize` | `number` | `16` | No | Size of the main icon in pixels |
  \| `arrowSize` | `number` | `16` | No | Size of the arrow icon in pixels |
  \| `className` | `string` | `''` | No | Optional CSS class override. |
  \| `style` | `object` | `{}` | No | Optional inline style override. |

**Code example**

```jsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
<TipWithArrow color="example">Example content</TipWithArrow>
```