NordSecurity.Design

Code Snippet

Overview

The Code Snippet component is designed to display blocks of code in a clear and readable formart. It provides options for copying the code to the clipboard and supports variants for placing it inline within text or as a separate block.

When to use

  • When you need to display code examples in documentation or articles.
  • When users need to copy code snippets.

When not to use

  • Displaying large blocks of code may require extensive scrolling.
  • For code that is meant to be edited directly within the UI.
  • When the content is not code-related.

Anatomy

  1. CodeSnippet
  2. Code

Variants & States

Inline

The Inline variant of the Code Snippet provides smaller padding to display code seamlessly within a paragraph of text.

Variant: hasCopyButton

Variant with a button allowing users to copy the code to their clipboard.

Internalization

For RTL (right-to-left) languages, there are no custom adjustments made.

Properties

Name Type Values Description
Inline Boolean true
false		 Display code inline within text.
hasCopyButton Boolean true
false		 Include a copy button.
value String The code snippet content.

Usage Guidelines

DoUse inline code snippets for short pieces of code within paragraphs.c
Don’tDon't use inline code snippets for large blocks of code.
DoInclude a copy button if you expect the user to use the code example directly.

Content Guidelines

We use the CodeSnippet component to display blocks of code or technical commands. It provides options for copying the code to the clipboard and supports variants for placing it inline within text or as a separate block.

Voice and tone

Our tone is credible and factual.

Copy

  • We ensure the code uses the correct syntax so that it won’t break when the user copies it to their clipboard.
  • We use plain language to explain the purpose of the code, what it does, and how to use it.
  • We use sentence case.

Accessibility

  • We present code snippets as plain text that screen readers can easily read and users can select.
  • When a “Copy” button is activated, we provide immediate, visible, and screen-reader-announceable confirmation to inform the user that the action was successful.