Code block

A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.


Code block has 4 main components.

Elements of the code block component
  1. Code snippet: the content that will be copied to the user’s clipboard.
  2. Action buttons: completes an action when clicked. The copy button is the most common, but different or additional action buttons can be added on an as-needed basis.
  3. Tooltip: informs users that clicking the button will copy the content to their clipboard, or that the content has successfully been copied.
  4. Show more/less (optional): expands and collapses the code snippet.

Multiple action buttons

Code block with multiple actions

Code blocks can include multiple actions. Any actions are optional and customizable, but the copy action is the most common.

The additional actions to the copy action can include the option to show a checkmark after the user has clicked the action button. The checkmark can be used to indicate to the user that the action was successfully triggered.

Show more/less

Expanded and collapsed code block

There is the option to include a show more/less section in the code block. The show more/less section can be used to collapse larger code snippets. An expandable code block allows for long lines of code to be stored in an expansion panel. Expanding the code block allows the user to view the full string that they can copy.

View source on GitHub