Cloudflare Enablement
Style Guide
Testing
GitHub icon
Edit this page on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Style Guide
  3. ...
  4. Component attributes
  5. Glossary entry

Glossary entry

​​ Definition

A single term and corresponding definition in the glossary.

​​ Used in

Glossary, documentation pages, tooltips.

​​ Structure

​​ Data

The data underlying our glossary lives with YAML files in the /data/glossary/* folder.

Each file should be structured similar to the following:

Relevant values include the following:

  • productName string required

    • Core product associated with this file. Should always match the same formatting / styling used in associated_products.

  • entries object required

    • term string required

      • The glossary term itself.

    • general_definition string required

      • Definition of the term. Should be general enough to apply to multiple products. Should also start with a lowercase letter unless starting with a proper noun.

    • associated_products array optional

      • If the term is associated with other products. Any names used should correspond to the productName of that associated file.

​​ Usage

Because of the structured data associated with our glossaries, we can pull these terms into multiple places.

​​ Product-level glossary

A product-level glossary includes all terms associated with a particular product, which will pull in terms directly in that product’s glossary file and any terms that include the product in its associated_products.

​​ Glossary definition

Pull glossary definitions directly into your Markdown by using the {{<glossary-definition>}} component.

An active zone is a DNS zone that is active on Cloudflare requires changing its nameservers to Cloudflare’s for management.

Is a quoted definition that comes from:

Properties are:

  • term_id string required

    • Should match a term within an existing glossary YAML file.

  • prepend string optional

    • Text to add before a definition.

  • length string default: long

    • If specified as short, will only pull the definition text before the first line break in the definition.

​​ Glossary tooltip

Pull component definitions into a focusable tooltip for a specific phrase by using the {{<glossary-tooltip>}} component.

Here’s a tooltip example.

Properties are:

  • term_id string required

    • Should match a term within an existing glossary YAML file.

  • prepend string optional

    • Text to add before a definition.

  • link string optional

    • Wraps the inner text in a markdown link, similar to normal markdown formatting.

Because of space limitations, the tooltip will always default to the short definition of a term, meaning the definition text before the first line break.