We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.

Skip to content
PatternFly logo

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-c-code-block
<div>
Initiates the code block component. Required
.pf-c-chip-group__header
<div>
Initiates the code block header.
.pf-c-chip-group__actions
<div>
Initiates the code block actions.
.pf-c-chip-group__actions-item
<div>
Initiates a code block action item.
.pf-c-chip-group__content
<div>
Initiates the code block content. Required
.pf-c-chip-group__pre
<pre>
Initiates the code block <pre> element. Required
.pf-c-chip-group__code
<code>
Initiates the code block <code> element. Required

CSS variables

.pf-c-code-block--pf-c-code-block--BackgroundColor
#f0f0f0
.pf-c-code-block--pf-c-code-block__header--BorderBottomWidth
1px
.pf-c-code-block--pf-c-code-block__header--BorderBottomColor
#d2d2d2
.pf-c-code-block--pf-c-code-block__content--PaddingTop
1rem
.pf-c-code-block--pf-c-code-block__content--PaddingRight
1rem
.pf-c-code-block--pf-c-code-block__content--PaddingBottom
1rem
.pf-c-code-block--pf-c-code-block__content--PaddingLeft
1rem
.pf-c-code-block--pf-c-code-block__pre--FontFamily
'"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
.pf-c-code-block--pf-c-code-block__pre--FontSize
0.875rem

View source on GitHub