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.

Examples

Basic

apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Expandable

apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
  spec:
  connectionConfig:
  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Expandable expanded

apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
  spec:
  connectionConfig:
  url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Documentation

Usage

Class	Applied to	Outcome
`.pf-v5-c-code-block`	`<div>`	Initiates the code block component. Required
`.pf-v5-c-code-block__header`	`<div>`	Initiates the code block header.
`.pf-v5-c-code-block__actions`	`<div>`	Initiates the code block actions.
`.pf-v5-c-code-block__actions-item`	`<div>`	Initiates a code block action item.
`.pf-v5-c-code-block__content`	`<div>`	Initiates the code block content. Required
`.pf-v5-c-code-block__pre`	`<pre>`	Initiates the code block `<pre>` element. Required
`.pf-v5-c-code-block__code`	`<code>`	Initiates the code block `<code>` element. Required

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-code-block	--pf-v5-c-code-block--BackgroundColor	#f0f0f0
--pf-v5-c-code-block--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-code-block	--pf-v5-c-code-block__header--BorderBottomWidth	1px
--pf-v5-c-code-block__header--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-block	--pf-v5-c-code-block__header--BorderBottomColor	#d2d2d2
--pf-v5-c-code-block__header--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingTop	1rem
--pf-v5-c-code-block__content--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingRight	1rem
--pf-v5-c-code-block__content--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingBottom	1rem
--pf-v5-c-code-block__content--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingLeft	1rem
--pf-v5-c-code-block__content--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__pre--FontFamily	'"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
--pf-v5-c-code-block__pre--FontFamily --pf-v5-global--FontFamily--monospace $pf-v5-global--FontFamily--monospace '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
	.pf-v5-c-code-block	--pf-v5-c-code-block__pre--FontSize	0.875rem
--pf-v5-c-code-block__pre--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem

View source on GitHub