Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
GuidelinesWriting contentBehaviorResponsive designBest practicesGuidelinesWriting contentBehaviorResponsive designBest practices

Guidelines

Use a code block to visually separate code text from other content on the page.

Writing content

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

Warning

The toggle overflow/toggle word wrapping and expand/collapse buttons are not visible when there is minimal amounts of code text.

 Two code blocks; one code block is fluid width showing only one line and the other code block is fixed width with seven lines showing as an expanded code block.

Behavior

Expanding/collapsing

When the expand/collapse button is selected, a code block expands to reveal the rest of the code text in its entirety. A code block must include at least 5 lines of code text in order for this feature to be activated.

Helpful tip

A code block is collapsed by default when the expand/collapse button becomes visible.

 Two code blocks. One showing four lines and is collapsed. The other expanded showing 1-100 lines, with middle lines omitted so the image isn't huge.

Responsive design

A code block switches to the Compact size on mobile breakpoints.

Code blocks on desktop, tablet, and mobile breakpoints

Best practices

Customizing code text

A code block with the default syntax highlighting.

Customize code text using syntax highlighting only.

 A black and white code block with no background color, no syntax highlighting, and a solid black border.

Do not change other code block styles.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify