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

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 columnSelectorVariableValue
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block--BackgroundColor
(In light theme) #f2f2f2
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block--BorderRadius
16px
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__header--BorderBlockEndWidth
1px
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__header--BorderBlockEndColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__header--PaddingBlockStart
0.25rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__header--PaddingBlockEnd
0.25rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__header--PaddingInlineEnd
0.5rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__header--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__content--PaddingBlockStart
1rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__content--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__content--PaddingBlockEnd
1rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__content--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__pre--FontFamily
"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
:where(:root, .pf-v6-c-code-block)--pf-v6-c-code-block__pre--FontSize
0.75rem