Skip to content
Netlify Docs

Formatting samples

This page demonstrates all available custom components used throughout the Netlify documentation site.

Section titled “Navigation Components”
Section titled “InternalLink”

Creates internal links within the documentation with consistent styling.

Learn more about Local Development→

Section titled “NavigationPath”

Displays navigation paths in the Netlify UI.

Navigate to Project configuration General in your dashboard.

Media Components

Section titled “Media Components”

Video

Section titled “Video”

Embeds YouTube videos with responsive design.

ZoomableImage

Section titled “ZoomableImage”

Displays images that can be clicked to zoom.

Architectural diagram showing how Connect works

Interactive Components

Section titled “Interactive Components”

Collapsible

Section titled “Collapsible”

Creates expandable content sections.

Tabs

Section titled “Tabs”

Creates tabbed content sections.

Terminal window
npm create astro@latest -- --template starlight

Information Components

Section titled “Information Components”

Steps

Section titled “Steps”

To style a numbered list of tasks to create step-by-step guides, use the <Steps> component. This component is auto-imported, so no manual import is needed.

  1. Create your numbered list content within the <Steps> component.

  2. Each numbered item will be automatically styled as a step.

  3. Use this for tutorials, installation guides, or any sequential process.

NetlifyAside

Section titled “NetlifyAside”

Displays important information in styled boxes.

PricingMessage

Section titled “PricingMessage”

Displays pricing information for features.

This feature is in Beta.

Snippet

Section titled “Snippet”

Includes reusable content snippets. The snippet content is below:

To help you fix failed deploys, Netlify offers AI capabilities that diagnose and suggest solutions for deploy failures and build errors so you can get back to shipping code.

Learn more about Netlify’s AI capabilities to give solutions for failed deploys.

Promotional Components

Section titled “Promotional Components”

PromotedContent

Section titled “PromotedContent”

Creates promotional content cards.

IntegrationsWidget

Section titled “IntegrationsWidget”

Displays third-party integration widgets.

Start a deploy after form submissions
Netlify Use this zap

ButtonDTN

Section titled “ButtonDTN”

Creates Deploy to Netlify buttons.

Deploy to Netlify

Layout Components

Section titled “Layout Components”

RequestDiagram

Section titled “RequestDiagram”

Creates visual flow diagrams for request processing.

Security

Compute

Caching

Static routing

Code Examples

Section titled “Code Examples”

Highlighted Code

Section titled “Highlighted Code”
function demo() {
  // This line (#2) and the next one are highlighted
  return 'This is line #3 of this snippet';
}

Diff Code

Section titled “Diff Code”
example-diff.js
function thisIsJavaScript() {
  console.log('Old code to be removed')
  console.log('New and shiny code!')
}

This covers the main components available in the Netlify documentation system.

Request Chain Diagram

Section titled “Request Chain Diagram”

The diagram components work together to create visual flow diagrams:

  • RequestDiagram: Container with legend
  • RequestDiagramItem: Individual process steps with 3D styling
  • RequestDiagramArrow: Connecting arrows between steps
  • RequestDiagramFork: Branching layout for complex flows

Each component supports different types (security, compute, cache, static-routing) that correspond to different colors in the legend.

Last updated: