Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
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 PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Length tokens

Ex. Token name Value Use case
--rh-length-4xs 1px

1px length token

Full CSS Variable Permalink to this token
--rh-length-3xs 2px

2px length token

Full CSS Variable Permalink to this token
--rh-length-2xs 3px

3px length token

Full CSS Variable Permalink to this token
--rh-length-xs 4px

4px length token

Full CSS Variable Permalink to this token
--rh-length-sm 6px

6px length token

Full CSS Variable Permalink to this token
--rh-length-md 8px

8px length token

Full CSS Variable Permalink to this token
--rh-length-lg 16px

16px length token

Full CSS Variable Permalink to this token
--rh-length-xl 24px

24px length token

Full CSS Variable Permalink to this token
--rh-length-2xl 32px

32px length token

Full CSS Variable Permalink to this token
--rh-length-3xl 48px

48px length token

Full CSS Variable Permalink to this token
--rh-length-4xl 64px

64px length token

Full CSS Variable Permalink to this token
--rh-length-5xl 80px

80px length token

Full CSS Variable Permalink to this token
--rh-length-6xl 96px

96px length token

Full CSS Variable Permalink to this token
--rh-length-7xl 128px

128px length token

Full CSS Variable Permalink to this token

Other libraries

To learn more about our other libraries, visit the getting started page.

© 2021-2025 Red Hat, Inc. Deploys by Netlify