---
title: Feature
description: Display a feature card on overview pages.
image: https://developers.cloudflare.com/cf-twitter-card.png
---

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt  
> Use this file to discover all available pages before exploring further. 

[Skip to content](#%5Ftop) 

# Feature

The `Feature` component is used `233` times on `65` pages. 

See all examples of pages that use Feature

Used **233** times. 

**Pages**

* [/1.1.1.1/](https://developers.cloudflare.com/1.1.1.1/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/1.1.1.1/index.mdx)
* [/agent-memory/](https://developers.cloudflare.com/agent-memory/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/agent-memory/index.mdx)
* [/ai-crawl-control/](https://developers.cloudflare.com/ai-crawl-control/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-crawl-control/index.mdx)
* [/ai-gateway/features/](https://developers.cloudflare.com/ai-gateway/features/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-gateway/features/index.mdx)
* [/ai-gateway/](https://developers.cloudflare.com/ai-gateway/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-gateway/index.mdx)
* [/ai-search/](https://developers.cloudflare.com/ai-search/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai-search/index.mdx)
* [/ai/](https://developers.cloudflare.com/ai/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ai/index.mdx)
* [/analytics/](https://developers.cloudflare.com/analytics/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/analytics/index.mdx)
* [/api-shield/](https://developers.cloudflare.com/api-shield/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/api-shield/index.mdx)
* [/argo-smart-routing/](https://developers.cloudflare.com/argo-smart-routing/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/argo-smart-routing/index.mdx)
* [/bots/](https://developers.cloudflare.com/bots/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/bots/index.mdx)
* [/byoip/](https://developers.cloudflare.com/byoip/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/byoip/index.mdx)
* [/cache/](https://developers.cloudflare.com/cache/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cache/index.mdx)
* [/client-side-security/](https://developers.cloudflare.com/client-side-security/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/client-side-security/index.mdx)
* [/cloudflare-network-firewall/](https://developers.cloudflare.com/cloudflare-network-firewall/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-network-firewall/index.mdx)
* [/cloudflare-one/traffic-policies/packet-filtering/network-firewall-overview/](https://developers.cloudflare.com/cloudflare-one/traffic-policies/packet-filtering/network-firewall-overview/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/cloudflare-one/traffic-policies/packet-filtering/network-firewall-overview.mdx)
* [/containers/](https://developers.cloudflare.com/containers/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/containers/index.mdx)
* [/d1/](https://developers.cloudflare.com/d1/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/d1/index.mdx)
* [/data-localization/](https://developers.cloudflare.com/data-localization/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/data-localization/index.mdx)
* [/ddos-protection/](https://developers.cloudflare.com/ddos-protection/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ddos-protection/index.mdx)
* [/dns/](https://developers.cloudflare.com/dns/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/dns/index.mdx)
* [/durable-objects/](https://developers.cloudflare.com/durable-objects/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/durable-objects/index.mdx)
* [/email-security/](https://developers.cloudflare.com/email-security/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/email-security/index.mdx)
* [/email-service/](https://developers.cloudflare.com/email-service/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/email-service/index.mdx)
* [/flagship/](https://developers.cloudflare.com/flagship/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/flagship/index.mdx)
* [/health-checks/](https://developers.cloudflare.com/health-checks/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/health-checks/index.mdx)
* [/hyperdrive/](https://developers.cloudflare.com/hyperdrive/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/hyperdrive/index.mdx)
* [/images/](https://developers.cloudflare.com/images/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/images/index.mdx)
* [/kv/](https://developers.cloudflare.com/kv/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/kv/index.mdx)
* [/load-balancing/](https://developers.cloudflare.com/load-balancing/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/load-balancing/index.mdx)
* [/log-explorer/](https://developers.cloudflare.com/log-explorer/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/log-explorer/index.mdx)
* [/logs/](https://developers.cloudflare.com/logs/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/logs/index.mdx)
* [/magic-transit/](https://developers.cloudflare.com/magic-transit/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/magic-transit/index.mdx)
* [/multi-cloud-networking/](https://developers.cloudflare.com/multi-cloud-networking/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/multi-cloud-networking/index.mdx)
* [/network-flow/](https://developers.cloudflare.com/network-flow/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/network-flow/index.mdx)
* [/network/](https://developers.cloudflare.com/network/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/network/index.mdx)
* [/pages/](https://developers.cloudflare.com/pages/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pages/index.mdx)
* [/pipelines/](https://developers.cloudflare.com/pipelines/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pipelines/index.mdx)
* [/privacy-gateway/](https://developers.cloudflare.com/privacy-gateway/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/privacy-gateway/index.mdx)
* [/privacy-proxy/](https://developers.cloudflare.com/privacy-proxy/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/privacy-proxy/index.mdx)
* [/pulumi/](https://developers.cloudflare.com/pulumi/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/pulumi/index.mdx)
* [/queues/](https://developers.cloudflare.com/queues/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/queues/index.mdx)
* [/r2/](https://developers.cloudflare.com/r2/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/r2/index.mdx)
* [/radar/](https://developers.cloudflare.com/radar/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/radar/index.mdx)
* [/registrar/](https://developers.cloudflare.com/registrar/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/registrar/index.mdx)
* [/rules/](https://developers.cloudflare.com/rules/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/rules/index.mdx)
* [/sandbox/](https://developers.cloudflare.com/sandbox/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/sandbox/index.mdx)
* [/security/](https://developers.cloudflare.com/security/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/security/index.mdx)
* [/spectrum/](https://developers.cloudflare.com/spectrum/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/spectrum/index.mdx)
* [/speed/](https://developers.cloudflare.com/speed/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/speed/index.mdx)
* [/ssl/](https://developers.cloudflare.com/ssl/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/ssl/index.mdx)
* [/stream/](https://developers.cloudflare.com/stream/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/stream/index.mdx)
* [/style-guide/components/feature/](https://developers.cloudflare.com/style-guide/components/feature/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/style-guide/components/feature.mdx)
* [/turnstile/](https://developers.cloudflare.com/turnstile/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/turnstile/index.mdx)
* [/vectorize/](https://developers.cloudflare.com/vectorize/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/vectorize/index.mdx)
* [/waf/](https://developers.cloudflare.com/waf/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/waf/index.mdx)
* [/waiting-room/](https://developers.cloudflare.com/waiting-room/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/waiting-room/index.mdx)
* [/warp-client/](https://developers.cloudflare.com/warp-client/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/warp-client/index.mdx)
* [/web-analytics/](https://developers.cloudflare.com/web-analytics/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/web-analytics/index.mdx)
* [/web3/](https://developers.cloudflare.com/web3/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/web3/index.mdx)
* [/workers-ai/features/fine-tunes/](https://developers.cloudflare.com/workers-ai/features/fine-tunes/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/features/fine-tunes/index.mdx)
* [/workers-ai/](https://developers.cloudflare.com/workers-ai/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workers-ai/index.mdx)
* [/workflows/](https://developers.cloudflare.com/workflows/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/workflows/index.mdx)
* [/zaraz/](https://developers.cloudflare.com/zaraz/)\- [Source ](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/docs/zaraz/index.mdx)

**Partials**

* [src/content/partials/networking-services/cloudflare-wan/overview.mdx](https://github.com/cloudflare/cloudflare-docs/blob/production/src/content/partials/networking-services/cloudflare-wan/overview.mdx)

The `<Feature>` component lists features available in the product and provides a link button to use the feature.

The header parameter supplies the feature name and the href parameter supplies the link to the feature. Text wrapped in the component supplies the description.

```
import { Feature } from "~/components"
<Feature header="Astro" href="/style-guide/components/feature/">   Hello, world!</Feature>
```

###  Astro 

Hello, world!

[ Use Astro ](https://developers.cloudflare.com/style-guide/components/feature/)

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/components/feature/#page","headline":"Feature · Cloudflare Style Guide","description":"Display a feature card on overview pages.","url":"https://developers.cloudflare.com/style-guide/components/feature/","inLanguage":"en","image":"https://developers.cloudflare.com/cf-twitter-card.png","dateModified":"2026-04-24","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/components/","name":"Components"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/components/feature/","name":"Feature"}}]}
```