Skip to main content Red Hat Design System logo Contribute on Github

Code block

Overview Style Guidelines Code Demos Accessibility

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

Different font

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

Image of a code block showing the Red Hat Text font used for code text which is incorrect usage

Different styling

Do not change any of the code block styling.

Image of a code block showing different styles which is incorrect usage
© 2021-2024 Red Hat, Inc. Deploys by Netlify