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
StyleColor schemeVariantsSpaceStyleColor schemeVariantsSpace

Style

A code block displays read-only and code-formatted text. Included are buttons to copy the code text or toggle how it is displayed in the container.

Anatomy

Code block anatomy showing six annotations. See figcaption below for more information.
  1. Line numbers
  2. Code text
  3. Expand/collapse button
  4. Copy to clipboard button
  5. Toggle overflow button
  6. Toggle word wrapping button

Color scheme

Code block is available for both light and dark color schemes.

Light scheme

Light scheme code block has a gray background and black text

Dark scheme

Dark scheme code block has a dark gray background thats slightly lighter than black and white text

Variants

Line numbers

A code block may or may not show line numbers.

Two code blocks. One with and one without line numbers.

Fixed width

A code block can adhere to the width of code text or be a fixed width.

Two code blocks. One short, taking up 70% width and one 100% width.

Compact size

The Large size is the default and there is a Compact size for smaller use cases like mobile.

Two code blocks. The top is the default/large code block with larger text and more padding. The bottom is the compact code block with a slightly smaller font size and less exterior padding.

Syntax highlighting

Code text can be highlighted with various colors to enhance readability.

Two code blocks. One default and one compact. Both have an example rh-alert HTML that is syntax highlighted.

Space

The default code block has 32px padding around the outer edges, 16px between the line numbers and the code excerpt, 8px around the show more button, and 16px margin top between the code and the show more button. The compact code block decreases outer padding to 16px and the gap between the code and line numbers/floating action buttons is 8px.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify