Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
CSS variables
.pf-c-sidebar | --pf-c-sidebar--BackgroundColor | #fff | |
.pf-c-sidebar | --pf-c-sidebar__main--FlexDirection | column | |
.pf-c-sidebar | --pf-c-sidebar__main--md--FlexDirection | row | |
.pf-c-sidebar | --pf-c-sidebar__main--AlignItems | stretch | |
.pf-c-sidebar | --pf-c-sidebar__main--md--AlignItems | start | |
.pf-c-sidebar | --pf-c-sidebar__main--child--MarginTop | 0 | |
.pf-c-sidebar | --pf-c-sidebar__main--child--MarginLeft | 0 | |
.pf-c-sidebar | --pf-c-sidebar--m-gutter__main--Gap | 1rem | |
.pf-c-sidebar | --pf-c-sidebar--m-gutter__main--xl--Gap | 1.5rem | |
.pf-c-sidebar | --pf-c-sidebar--m-panel-right__panel--Order | 0 | |
.pf-c-sidebar | --pf-c-sidebar--m-panel-right__panel--md--Order | 1 | |
.pf-c-sidebar | --pf-c-sidebar--m-stack__main--FlexDirection | column | |
.pf-c-sidebar | --pf-c-sidebar--m-stack__main--AlignItems | stretch | |
.pf-c-sidebar | --pf-c-sidebar--m-stack__panel--Position | sticky | |
.pf-c-sidebar | --pf-c-sidebar--m-stack__panel--Top | 0 | |
.pf-c-sidebar | --pf-c-sidebar--m-stack__panel--BoxShadow | 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16) | |
.pf-c-sidebar | --pf-c-sidebar--m-stack--m-panel-right__panel--Order | 0 | |
.pf-c-sidebar | --pf-c-sidebar--m-split__main--AlignItems | start | |
.pf-c-sidebar | --pf-c-sidebar--m-split__main--FlexDirection | row | |
.pf-c-sidebar | --pf-c-sidebar--m-split__panel--Position | static | |
.pf-c-sidebar | --pf-c-sidebar--m-split__panel--Top | auto | |
.pf-c-sidebar | --pf-c-sidebar--m-split--m-panel-right__panel--Order | 1 | |
.pf-c-sidebar | --pf-c-sidebar__panel--BoxShadow--base | 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16) | |
.pf-c-sidebar | --pf-c-sidebar__panel--BoxShadow | 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16) | |
.pf-c-sidebar | --pf-c-sidebar__panel--Top | 0 | |
.pf-c-sidebar | --pf-c-sidebar__panel--md--Top | auto | |
.pf-c-sidebar | --pf-c-sidebar__panel--Position | sticky | |
.pf-c-sidebar | --pf-c-sidebar__panel--md--Position | static | |
.pf-c-sidebar | --pf-c-sidebar__panel--FlexBasis | auto | |
.pf-c-sidebar | --pf-c-sidebar__panel--md--FlexBasis | 15.625rem | |
.pf-c-sidebar | --pf-c-sidebar__panel--m-split--FlexBasis | 15.625rem | |
.pf-c-sidebar | --pf-c-sidebar__panel--m-stack--FlexBasis | auto | |
.pf-c-sidebar | --pf-c-sidebar__panel--ZIndex | 100 | |
.pf-c-sidebar | --pf-c-sidebar__panel--Order | 0 | |
.pf-c-sidebar | --pf-c-sidebar__panel--BackgroundColor | #fff | |
.pf-c-sidebar | --pf-c-sidebar__content--BackgroundColor | #fff | |
.pf-c-sidebar | --pf-c-sidebar__panel--m-sticky--Top | 0 | |
.pf-c-sidebar | --pf-c-sidebar__panel--m-sticky--Position | sticky | |
.pf-c-sidebar.pf-m-gutter | --pf-c-sidebar__main--child--MarginTop | 1rem | |
.pf-c-sidebar.pf-m-gutter | --pf-c-sidebar__main--child--MarginLeft | 0 | |
.pf-c-sidebar.pf-m-panel-right | --pf-c-sidebar__panel--Order | 0 | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__main--FlexDirection | column | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__main--AlignItems | stretch | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__main--child--MarginTop | 1rem | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__main--child--MarginLeft | 0 | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__panel--Position | sticky | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__panel--Top | 0 | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__panel--BoxShadow | 0 0.25rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16) | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar__panel--FlexBasis | auto | |
.pf-c-sidebar.pf-m-stack | --pf-c-sidebar--m-panel-right__panel--Order | 0 | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__main--FlexDirection | row | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__main--AlignItems | start | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__main--child--MarginTop | 0 | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__main--child--MarginLeft | 1rem | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__panel--Position | static | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__panel--Top | auto | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__panel--BoxShadow | none | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar__panel--FlexBasis | 15.625rem | |
.pf-c-sidebar.pf-m-split | --pf-c-sidebar--m-panel-right__panel--Order | 1 | |
.pf-c-sidebar__panel.pf-m-sticky | --pf-c-sidebar__panel--Position | sticky | |
.pf-c-sidebar__panel.pf-m-sticky | --pf-c-sidebar__panel--Top | 0 | |
.pf-c-sidebar__panel.pf-m-static | --pf-c-sidebar__panel--Position | static | |
.pf-c-sidebar__panel.pf-m-static | --pf-c-sidebar__panel--Top | auto | |
.pf-c-sidebar__content.pf-m-no-background | --pf-c-sidebar__content--BackgroundColor | transparent | |
.pf-c-sidebar__panel.pf-m-width-default | --pf-c-sidebar__panel--FlexBasis | undefined | |
.pf-c-sidebar__panel.pf-m-width-25 | --pf-c-sidebar__panel--FlexBasis | 25% | |
.pf-c-sidebar__panel.pf-m-width-33 | --pf-c-sidebar__panel--FlexBasis | 33% | |
.pf-c-sidebar__panel.pf-m-width-50 | --pf-c-sidebar__panel--FlexBasis | 50% | |
.pf-c-sidebar__panel.pf-m-width-66 | --pf-c-sidebar__panel--FlexBasis | 66% | |
.pf-c-sidebar__panel.pf-m-width-75 | --pf-c-sidebar__panel--FlexBasis | 75% | |
.pf-c-sidebar__panel.pf-m-width-100 | --pf-c-sidebar__panel--FlexBasis | 100% |
View source on GitHub