Code block

A code block contains 2 or more lines of read-only code, which can be copied to a user's 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-v6-c-code-block`	`<div>`	Initiates the code block component. Required
`.pf-v6-c-code-block__header`	`<div>`	Initiates the code block header.
`.pf-v6-c-code-block__actions`	`<div>`	Initiates the code block actions.
`.pf-v6-c-code-block__actions-item`	`<div>`	Initiates a code block action item.
`.pf-v6-c-code-block__content`	`<div>`	Initiates the code block content. Required
`.pf-v6-c-code-block__pre`	`<pre>`	Initiates the code block `<pre>` element. Required
`.pf-v6-c-code-block__code`	`<code>`	Initiates the code block `<code>` element. Required

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-code-block	--pf-v6-c-code-block--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-block--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-block	--pf-v6-c-code-block--BorderRadius	16px
--pf-v6-c-code-block--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--BorderBlockEndWidth	1px
--pf-v6-c-code-block__header--BorderBlockEndWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-code-block__header--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingBlockStart	0.25rem
--pf-v6-c-code-block__header--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingBlockEnd	0.25rem
--pf-v6-c-code-block__header--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingInlineEnd	0.5rem
--pf-v6-c-code-block__header--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingInlineStart	0.5rem
--pf-v6-c-code-block__header--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingBlockStart	1rem
--pf-v6-c-code-block__content--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingInlineEnd	1rem
--pf-v6-c-code-block__content--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingBlockEnd	1rem
--pf-v6-c-code-block__content--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingInlineStart	1rem
--pf-v6-c-code-block__content--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__pre--FontFamily	"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
--pf-v6-c-code-block__pre--FontFamily --pf-t--global--font--family--mono --pf-t--global--font--family--300 "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
	.pf-v6-c-code-block	--pf-v6-c-code-block__pre--FontSize	0.75rem
--pf-v6-c-code-block__pre--FontSize --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem

Edit this page on GitHub