Doc Group One Overview

Components Example Page

Video Component

Zoomable Image Component

FacetSwitcher Component

Collapsible Component

To purge the cache from a Lambda-compatible serverless function, you must pass the purge_api_token value provided automatically by Netlify. This keeps your Lambda-compatible function secure.

// purge a cache tag passed by query parameter across all deploys of a site
// no need to specify site ID as it is passed automatically by the purgeCache helper

import { purgeCache } from "@netlify/functions"

module.exports.handler = async (event, context) => {
  const token = context.clientContext.custom.purge_api_token;

  await purgeCache({
    tags: ["tag1", "tag2"],
    token
  })

  return {
    body: "Purged!",
    statusCode: 202
  }
}

The Collapsible component is already included in your project. No installation needed!

To use it in your markdown files, simply import the components at the top of your file:

import Collapsible from '../../components/Collapsible.astro';
import CollapsibleItem from '../../components/CollapsibleItem.astro';

PricingMessage Component

The PricingMessage component displays pricing information in a consistent format:

This is an example pricing message.

Available Messages from messages.json

This feature is available on all plans.

Split testing is available on Pro plans and above.

Deploy notifications are available on all plans.

Deploy retention depends on your plan. For details, check the pricing page.

IntegrationsWidget Component

Using the PromotedContent Component

The PromotedContent component allows you to display promotional or featured content in a visually distinct card-like container.

Basic Usage

Here’s a basic example of the PromotedContent component:

<PromotedContent
  urls={[
    { url: '/guides/getting-started', linkText: 'Getting Started' },
    { url: '/guides/deployment', linkText: 'Deployment Guide' },
    { url: 'https://netlify.com', linkText: 'Visit Netlify' }
  ]}
>
  <p slot="title">Featured Content</p>
  <div slot="description">
    <p>Check out these important resources to help you get started with your project.</p>
  </div>
</PromotedContent>

The above code renders a promotional content box with a title, description, and three links. External links automatically open in a new tab.

With Logo and Deploy to Netlify Button

You can add a logo and a “Deploy to Netlify” button:

<PromotedContent
  urls={[
    { url: '/guides/getting-started', linkText: 'Getting Started' },
    { url: '/guides/deployment', linkText: 'Deployment Guide' }
  ]}
  logo="netlify"
  dtnLink="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-starter-template"
>
  <p slot="title">Netlify Integration</p>
  <div slot="description">
    <p>Learn how to integrate your application with Netlify services.</p>
  </div>
</PromotedContent>

Abbreviated Version

For a more compact display, use the isAbbreviated prop:

<PromotedContent
  urls={[
    { url: '/guides/getting-started', linkText: 'Getting Started' },
    { url: '/guides/deployment', linkText: 'Deployment Guide' }
  ]}
  isAbbreviated={true}
  dtnLink="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-starter-template"
>
  <p slot="title">Quick Links</p>
  <div slot="description">
    <p>Essential resources in a compact format.</p>
  </div>
</PromotedContent>

Live Examples

Below are live examples of the PromotedContent component:

Documentation Resources

Explore these resources to learn more about our platform.

Netlify Starter Template

Get your project up and running quickly with our starter template. Perfect for blogs, documentation sites, and more.

Deploy to Netlify

Core Netlify Features

Discover the powerful features that make Netlify a complete platform for modern web projects.

ButtonDTN Component

The ButtonDTN component is used within PromotedContent but can also be used independently:

Deploy to Netlify

NetlifyNote Component

The NetlifyNote component is used for general informational notes. It has a blue color scheme.

What's the Netlify Drawer?

The Netlify Drawer is the embedded review toolkit that allows Netlify Reviewers, Developers, and Owners to share context-rich feedback on the latest changes in a Deploy Preview or branch deploy. The Netlify Drawer powers collaborative Deploy Previews.

NetlifyTip Component

The NetlifyTip component is used for helpful tips and best practices. It has a green color scheme.

API tip

I’m a tip. Learn more about code in the docs or from an external link like this

NetlifyWarning Component

The NetlifyWarning component is used for warnings about potential issues. It has an orange color scheme.

Warning on Functions

Warning!!! Learn more about code in the docs or from an external link like this

NetlifyDanger Component

The NetlifyDanger component is used for critical warnings about dangerous actions. It has a red color scheme.

Danger Zone

This is dangerous! Learn more about code in the docs or from an external link like this

Did you find this doc useful?

Your feedback helps us improve our docs.