HomeAbout
About the design system
How we build
RoadmapGet started
Overview
Designers
DevelopersFoundations
Overview
Color
Grid
Personalization patterns
Spacing
TypographyTokens
Overview
Global color
Box shadow
Typography
Border
Opacity
Space
Length
Icon
Breakpoints
Media queriesElements
All elements
Accordion
Alert
Audio player
Avatar
Back to top
Badge
Blockquote
Breadcrumb
Button
Call to action
Card
Code block
Dialog
Footer
Health index
Icon
Navigation (primary)
Planned
Navigation (secondary)
Pagination
Popover
Planned
Progress steps
Planned
Site status
Skip link
Spinner
Statistic
Subnavigation
Surface
Switch
Table
Tabs
Tag
Tile
Timestamp
Tooltip
Video embedPatterns
All patterns
Announcement
Card
Disclosure
Filter
Form
Link
Link with icon
Logo wall
Search bar
Skip navigation
Sticky banner
Sticky card
Tabs
Tile
Video thumbnailTheming
Overview
Color palettes
Customizing
DevelopersAccessibility
Fundamentals
Content
Design
Development
Contributors
Qa and testing
Assistive technologies
Resources
Icons
Design/code status
Release notes
Get support
The content of code-block snippets must be contained within a non-executable
<script> tag. By "non-executable", we mean that the script element must have
a type attribute which is not module, importmapjavascript, or any of
the executable javascript mimetypes. With the exception of javascript,
use the correct mime type for your content, e.g. text/html for HTML content.
<rh-code-block><scripttype="text/html"><!DOCTYPE html><title>Title</title><style>body {width: 500px;}</style><body><p checked class="title" id="title">Title</p><!-- here goes the rest of the page --></body></script></rh-code-block>
Warning
When slotting HTML content into the code-block, if that HTML content contains a `` end tag, you must escape it.
One approach to escaping script tags that is to close the containing <script type="text/html"> within the sample's closing script tag, then immediately open
a new sample script tag containing the rest of the snippet. Another method is to
insert a zero-width-joiner (or some other unusual unicode character) in
the closing script tag, and use javascript to remove it before copying the
content to the clipboard. Each method has benefits and drawbacks.
<rh-code-block><scripttype="text/html"><p>Script tags inHTML must be escaped</p><script>console.log('Success!');<</script><scripttype="text/html">/script></script></rh-code-block>
To add javascript content, use the text/sample-javascript type.
A non-executable script tag containing the sample content. JavaScript samples should use the type text/sample-javascript. HTML samples containing script tags must escape the closing </script> tag. Can also be a <pre> tag.
action-label-copy
tooltip content for the copy action button
action-label-wrap
tooltip content for the wrap action button
show-more
text content for the expandable toggle button when the code block is collapsed.
show-less
text content for the expandable toggle button when the code block is expanded.
legend
<dl> element containing rh-badges in the <dt> and legend text in the <dd> elements
var(----rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif)
