Compass

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Examples

Basic

In a basic compass layout, content can be passed to the following props to populate areas of the page:

header: content rendered in the top of the page. This will typically be a CompassHeader component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.
sidebarStart: content rendered in the left side or start side of the page
main: content rendered in the center of the page. This will typically consist of a CompassMainHeader or CompassHero, along with a CompassContent filled with one or more CompassPanel components.
sidebarEnd: content rendered in the right side or end side of the page
footer: content rendered in the bottom of the page

The background image of the Compass and CompassHero may be customized by using their respective backgroundSrcLight and backgroundSrcDark props. The CompassHero also allows customization of a color gradient across its container by using the gradientLight and gradientDark props.

Hero

Content title

Content

Demo

Props

Compass

*required
Name	Type	Default
isFooterExpanded	No type info	true
isHeaderExpanded	No type info	true
isSidebarEndExpanded	No type info	true
isSidebarStartExpanded	No type info	true

CompassHeader

*required
Name	Type	Default	Description

CompassContent

*required
Name	Type	Default	Description

CompassHero

*required
Name	Type	Default	Description

CompassMainHeader

*required
Name	Type	Default	Description

CompassPanel

*required
Name	Type	Default	Description

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-compass	--pf-v6-c-compass--BackgroundImage	none
--pf-v6-c-compass--BackgroundImage --pf-v6-c-compass--BackgroundImage--light none
	.pf-v6-c-compass	--pf-v6-c-compass--BackgroundImage--light	none
	.pf-v6-c-compass	--pf-v6-c-compass--BackgroundImage--dark	none
	.pf-v6-c-compass	--pf-v6-c-compass--Padding	1.5rem
--pf-v6-c-compass--Padding --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass--RowGap	2rem
--pf-v6-c-compass--RowGap --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-compass	--pf-v6-c-compass--ColumnGap	2rem
--pf-v6-c-compass--ColumnGap --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-compass	--pf-v6-c-compass__nav--RowGap	0.5rem
--pf-v6-c-compass__nav--RowGap --pf-t--global--spacer--gap--group--vertical --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__sidebar--Padding	0.5rem
--pf-v6-c-compass__sidebar--Padding --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__main--RowGap	1rem
--pf-v6-c-compass__main--RowGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor--rgb--light	255,255,255
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor--opacity--light	.8
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor--light	(In light theme) rgba(255,255,255, .8)
--pf-v6-c-compass__panel--BackgroundColor--light rgba(--pf-v6-c-compass__panel--BackgroundColor--rgb--light, --pf-v6-c-compass__panel--BackgroundColor--opacity--light) rgba(255,255,255, .8)
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor--rgb--dark	0,0,0
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor--opacity--dark	.8
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackgroundColor--dark	(In light theme) rgba(0,0,0, .8)
--pf-v6-c-compass__panel--BackgroundColor--dark rgba(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark, --pf-v6-c-compass__panel--BackgroundColor--opacity--dark) rgba(0,0,0, .8)
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackdropFilter	blur(75px)
--pf-v6-c-compass__panel--BackdropFilter --pf-v6-c-compass__panel--BackdropFilter--light blur(75px)
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackdropFilter--light	blur(75px)
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BackdropFilter--dark	blur(75px)
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BorderRadius	24px
--pf-v6-c-compass__panel--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	.pf-v6-c-compass	--pf-v6-c-compass__panel--m-pill--BorderRadius	999px
--pf-v6-c-compass__panel--m-pill--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-compass	--pf-v6-c-compass__panel--Padding	1.5rem
--pf-v6-c-compass__panel--Padding --pf-t--global--spacer--inset--page-chrome --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BorderWidth	1px
--pf-v6-c-compass__panel--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BorderColor	(In light theme) #ffffff
--pf-v6-c-compass__panel--BorderColor --pf-t--global--border--color--alt --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-compass	--pf-v6-c-compass__panel--BoxShadow	0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
--pf-v6-c-compass__panel--BoxShadow --pf-t--global--box-shadow--md --pf-t--global--box-shadow--X--md--default --pf-t--global--box-shadow--Y--md--default --pf-t--global--box-shadow--blur--md --pf-t--global--box-shadow--spread--md--default --pf-t--global--box-shadow--color--md--default --pf-t--global--box-shadow--X--400 --pf-t--global--box-shadow--Y--600 --pf-t--global--box-shadow--blur--200 --pf-t--global--box-shadow--spread--100 --pf-t--global--box-shadow--color--100 0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
	.pf-v6-c-compass	--pf-v6-c-compass__message-bar--Width	450px
	.pf-v6-c-compass	--pf-v6-c-compass__message-bar--MinWidth	300px
	.pf-v6-c-compass	--pf-v6-c-compass__message-bar--MaxWidth	600px
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--angle	109deg
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--stop-1--light	transparent
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--stop-2--light	transparent
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--stop-3--light	transparent
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--stop-1--dark	transparent
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--stop-2--dark	transparent
	.pf-v6-c-compass	--pf-v6-c-compass__hero--gradient--stop-3--dark	transparent
	.pf-v6-c-compass	--pf-v6-c-compass__hero--BackgroundImage--light	none
	.pf-v6-c-compass	--pf-v6-c-compass__hero--BackgroundImage--dark	none
	.pf-v6-c-compass	--pf-v6-c-compass__hero-body--Width	800px
	.pf-v6-c-compass	--pf-v6-c-compass__hero-body--MaxWidth	80%
	.pf-v6-c-compass__sidebar	--pf-v6-c-compass__panel--Padding	0.5rem
--pf-v6-c-compass__panel--Padding --pf-v6-c-compass__sidebar--Padding --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass	--pf-v6-c-compass--glass--opacity	100%
	:where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass	--pf-v6-c-compass--glass--border	(In light theme) #c7c7c7
--pf-v6-c-compass--glass--border --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass	--pf-v6-c-compass--glass--blend-mode	none
	:where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass	--pf-v6-c-compass--glass--blend-mode--dark	none

Edit this page on GitHub