Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
UsageSizesContentResponsive designBest practicesUsageSizesContentResponsive designBest practices

Usage

Use a code block to highlight code text only, no other styles should be included.

When to use a code block

If a block of code text needs to be highlighted separate from paragraphs or other elements, use a code block.

Sizes

A code block container can adhere to the width of content within or be fixed width.

Image of fluid width and fixed width code block sizes with text labels below

Content

The length of code text and the number of lines can change the width and height of a code block.

Image of two code blocks; one code block is fluid width showing only one line and the other code block is fixed width showing 10 lines

Responsive design

Large breakpoints

Image of code blocks on desktop and tablet breakpoints

Small breakpoints

Container spacing and code text size reduces as breakpoints get smaller.

Image of code blocks on large and small mobile breakpoints

Best practices

Font family

Code block text using Red Hat Mono

Use --rh-font-family-code.

 Code block text using Red Hat Text

Do not use a different font family token than --rh-font-family-code.

Customizing

Code block using default styling

Use the available options for customizing code block. (Adjusting syntax highlighting is ok.)

 Code block with white background and black border

Do not change the code block styling, especially if it will look like other text containers on the same page.
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify