---
description: Highlight example content in a styled block.
title: Example
image: https://developers.cloudflare.com/style-guide/build-the-page/components/example/og.png?v=182958717ee8b975
---
[Skip to content](#main-content)
> 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.
# Example
Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/example/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/)
The `Example` component is used `203` times on `115` pages.
See all examples of pages that use Example
Used **203** times.
**Pages**
- /ai-crawl-control/configuration/ai-crawl-control-with-transform-rules/-Source
- /ai-crawl-control/features/manage-ai-crawlers/-Source
- /browser-run/features/webmcp/-Source
- /cache/how-to/cache-rules/examples/browser-cache-ttl/-Source
- /cache/how-to/cache-rules/examples/bypass-cache-on-cookie/-Source
- /cache/how-to/cache-rules/examples/cache-by-hostname-list/-Source
- /cache/how-to/cache-rules/examples/cache-deception-armor/-Source
- /cache/how-to/cache-rules/examples/cache-device-type/-Source
- /cache/how-to/cache-rules/examples/cache-everything-ignore-query-strings/-Source
- /cache/how-to/cache-rules/examples/cache-everything/-Source
- /cache/how-to/cache-rules/examples/cache-ttl-by-status-code/-Source
- /cache/how-to/cache-rules/examples/custom-cache-key/-Source
- /cache/how-to/cache-rules/examples/edge-ttl/-Source
- /cache/how-to/cache-rules/examples/origin-cache-control/-Source
- /cache/how-to/cache-rules/examples/query-string-sort/-Source
- /cache/how-to/cache-rules/examples/respect-strong-etags/-Source
- /cloudflare-for-platforms/cloudflare-for-saas/saas-customers/how-it-works/-Source
- /cloudflare-for-platforms/cloudflare-for-saas/start/getting-started/-Source
- /cloudflare-one/access-controls/service-credentials/mutual-tls-authentication/-Source
- /cloudflare-one/email-security/policies/inbound/allow-policies/-Source
- /d1/observability/debug-d1/-Source
- /dns/additional-options/reverse-zones/-Source
- /dns/cname-flattening/cname-flattening-diagram/-Source
- /dns/concepts/-Source
- /dns/dnssec/troubleshooting/-Source
- /dns/foundation-dns/setup/-Source
- /dns/internal-dns/get-started/-Source
- /dns/internal-dns/-Source
- /dns/internal-dns/internal-zones/reference-zones/-Source
- /dns/manage-dns-records/how-to/batch-record-changes/-Source
- /dns/manage-dns-records/how-to/create-zone-apex/-Source
- /dns/manage-dns-records/-Source
- /dns/manage-dns-records/reference/dns-record-types/-Source
- /dns/manage-dns-records/reference/vendor-specific-records/-Source
- /dns/manage-dns-records/reference/wildcard-dns-records/-Source
- /dns/manage-dns-records/troubleshooting/existing-ns-record/-Source
- /dns/nameservers/custom-nameservers/account-custom-nameservers/-Source
- /dns/nameservers/custom-nameservers/tenant-custom-nameservers/-Source
- /dns/nameservers/nameserver-options/-Source
- /dns/proxy-status/-Source
- /dns/zone-setups/reference/dns-quick-scan/-Source
- /dns/zone-setups/troubleshooting/delete-all-records/-Source
- /dns/zone-setups/zone-transfers/cloudflare-as-primary/dnssec-for-primary/-Source
- /fundamentals/manage-domains/manage-subdomains/-Source
- /fundamentals/manage-domains/redirect-domain/-Source
- /fundamentals/reference/under-attack-mode/-Source
- /load-balancing/additional-options/load-balancing-rules/create-rules/-Source
- /pages/how-to/redirect-to-custom-domain/-Source
- /pages/how-to/www-redirect/-Source
- /reference-architecture/architectures/email-security-deployments/-Source
- /rules/compression-rules/examples/disable-all-brotli/-Source
- /rules/compression-rules/examples/disable-compression-avif/-Source
- /rules/compression-rules/examples/enable-zstandard/-Source
- /rules/compression-rules/examples/gzip-for-csv/-Source
- /rules/compression-rules/examples/only-brotli-url-path/-Source
- /rules/origin-rules/examples/change-http-host-header/-Source
- /rules/origin-rules/examples/change-port/-Source
- /rules/origin-rules/faq/-Source
- /rules/origin-rules/features/-Source
- /rules/origin-rules/tutorials/change-uri-path-and-host-header/-Source
- /rules/origin-rules/tutorials/point-to-pages-with-custom-domain/-Source
- /rules/origin-rules/tutorials/point-to-r2-bucket-with-custom-domain/-Source
- /rules/page-rules/reference/recommended-rules/-Source
- /rules/reference/page-rules-migration/-Source
- /rules/reference/troubleshooting/-Source
- /rules/transform/examples/add-cors-header/-Source
- /rules/transform/examples/add-request-header-bot-score/-Source
- /rules/transform/examples/add-request-header-static-value/-Source
- /rules/transform/examples/add-request-header-subrequest-other-zone/-Source
- /rules/transform/examples/add-response-header-static-value/-Source
- /rules/transform/examples/normalize-encoded-slash/-Source
- /rules/transform/examples/remove-request-header/-Source
- /rules/transform/examples/remove-response-header/-Source
- /rules/transform/examples/rewrite-archive-urls-new-format/-Source
- /rules/transform/examples/rewrite-moved-section/-Source
- /rules/transform/examples/rewrite-path-archived-posts/-Source
- /rules/transform/examples/rewrite-path-object-storage/-Source
- /rules/transform/examples/rewrite-several-url-different-url/-Source
- /rules/transform/examples/rewrite-url-string-visitors/-Source
- /rules/transform/examples/rewrite-welcome-for-countries/-Source
- /rules/transform/examples/set-response-header-bot-score/-Source
- /rules/transform/examples/set-response-header-static-value/-Source
- /rules/url-forwarding/bulk-redirects/concepts/-Source
- /rules/url-forwarding/examples/perform-mobile-redirects/-Source
- /rules/url-forwarding/examples/redirect-admin-https/-Source
- /rules/url-forwarding/examples/redirect-all-another-domain/-Source
- /rules/url-forwarding/examples/redirect-all-different-domain-root/-Source
- /rules/url-forwarding/examples/redirect-all-different-hostname/-Source
- /rules/url-forwarding/examples/redirect-country-subdomains/-Source
- /rules/url-forwarding/examples/redirect-new-url/-Source
- /rules/url-forwarding/examples/redirect-root-to-www/-Source
- /rules/url-forwarding/examples/redirect-www-to-root/-Source
- /rules/url-forwarding/examples/remove-locale-url/-Source
- /speed/optimization/content/prefetch-urls/-Source
- /ssl/edge-certificates/changing-dcv-method/methods/delegated-dcv/-Source
- /ssl/edge-certificates/geokey-manager/setup/-Source
- /ssl/post-quantum-cryptography/pqc-to-origin/-Source
- /style-guide/build-the-page/components/-Source
- /style-guide/how-we-docs/how-we-ai/control-ai-crawls/-Source
- /support/third-party-software/others/configure-cloudflare-and-heroku-over-https/-Source
- /waf/custom-rules/use-cases/configure-token-authentication/-Source
- /waf/detections/leaked-credentials/examples/-Source
- /waf/managed-rules/check-for-exposed-credentials/how-checks-work/-Source
- /waf/rate-limiting-rules/request-rate/-Source
- /waf/rate-limiting-rules/use-cases/-Source
- /workers/versions-and-deployments/gradual-deployments/version-affinity/-Source
**Partials**
- src/content/partials/byoip/service-bindings-account-info.mdx
- src/content/partials/byoip/service-bindings-create-binding.mdx
- src/content/partials/cloudflare-for-platforms/get-started-fallback-origin.mdx
- src/content/partials/dns/create-subdomain-record.mdx
- src/content/partials/dns/ns-delegation-name-limit.mdx
- src/content/partials/dns/proxy-status-dns-table.mdx
- src/content/partials/ssl/add-client-certificate-rfc9440.mdx
Use the `` component to add a box around some content. This can be useful when you want to demonstrate or showcase something without it being confused by the surrounding text.
```mdx
import { Example } from "~/components"
Hello, world!
{/*
`title` is an optional string which customizes the title of your example card
*/}
Hello, world!
```
Was this helpful?
YesNo
## On this page
[Docs](https://developers.cloudflare.com/)
```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/example/#page","headline":"Example","description":"Highlight example content in a styled block.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/example/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/example/og.png?v=182958717ee8b975","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```