Skip to content
Patternfly Logo

Code block

A code block is a component that contains 2 or more lines of ready-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