Code, built on top of Text, is a typographic component used to visually mark short, technical references apart from surrounding body text. Use cases include, but are not limited to, the following forms:

Attributes: email, customer_id
HTML or CSS syntax: <table>, opacity
Template variables: {{snippets.name}}
System identifiers: API keys, segment IDs

Avoid using Code for non-technical items or items that would be better served being written as plain body text.

Code vs. CodeBlock

Code and CodeBlock are both used to display technical text. However, it's important to understand the difference as they are not fully interchangeable:

Code is used for displaying source code or technical terms inline within body text.
CodeBlock supports multi-line text with syntax highlighting. It's best suited for code snippets and text that can be copied to the user's clipboard.

Appearance

Size

Code uses a relative font size of 90%, allowing it to remain visually proportional to its parent text block.

Configure `email` attributes

Set the `timezone` value

Use the customer_id attribute to identify profiles.

Triggered by form_submit

Within text

Code adapts to the font size of its surrounding text, maintaining visual proportion at every level.

Content

Exact terminology

Code should contain the exact technical text a user would encounter in their codebase, API, or data model. Avoid reformatting or shortening terms to prevent confusion.

Add the anonymous_id attribute to your identify call.

Do: Use the exact casing and formatting from the source system.

Add the Anonymous ID attribute to your identify call.

Don't: Reformat technical identifiers to match prose conventions.

Inline context

Code is designed to co-exist with other text in a sentence or phrase instead of standing alone. Use surrounding body copy to help provide context for what the technical reference means or does.

Set the timezone attribute to override the workspace default.

Do: Include Code within a sentence that explains its purpose or usage.

timezone

Don't: Use Code as a standalone label without surrounding context.

Scope

Code is best kept short and to a singular reference per Code component. For longer technical text that may require multi-line support, use CodeBlock instead.

The form_submit event fires when a visitor completes the form.

Do: Wrap a single identifier or short syntax reference.

The form_submit event fires when a visitor completes the form.

Don't: Wrap an entire clause or sentence in Code.

Code

Anatomy

Guidelines

When to use

Code vs. CodeBlock

Appearance

Size

Configure `email` attributes

Set the `timezone` value

Content

Exact terminology

Inline context

Scope

On this page

Code

Configure email attributes

Set the timezone value

On this page

Configure `email` attributes

Set the `timezone` value