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 PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
GuidelinesSizesWriting contentResponsive designBest practicesGuidelinesSizesWriting contentResponsive designBest practices

Guidelines

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

Sizes

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

One horizontally shorter and one horizontally longer code block. Both have identical content.

Writing content

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

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

A code block does not change much as screens get smaller.

Code blocks on desktop, tablet, and mobile breakpoints

Best practices

Font family

A code block with the default red hat code font family

Always use the --rh-font-family-code token.

 A code block with a non-monospaced font with tighter letter spacing

Do not use a different font family.

Customizing

A code block with a block of HTML that is syntax highlighted

Customize code text using syntax highlighting only.

 A code block with a white background and black borders.

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