Site header
Documentation
Style Guide
Theme
Icons
PageHeader Theme
PageHeader Variables
Overview
Guidance
Background
▸
Roots
--qp-document-background-color
--qp-document-background-image
--qp-document-background-repeat
--qp-document-background-size
Border
▸
Roots
--qp-image-border
Border Width
▸
Roots
--qp-border-width
--qp-focus-width
Color
▸
Available Values
--qp-color-black
--qp-color-blue
--qp-color-blue-light
--qp-color-ink
--qp-color-ink-dark
--qp-color-ink-soft
--qp-color-mist
--qp-color-mist-dark
--qp-color-mist-light
--qp-color-white
Roots
--qp-accent-color
--qp-background
--qp-border-color
--qp-border-color--strong
--qp-lightbox__item-border-color--selected
--qp-focus-color
--qp-surface-background--hover
--qp-surface-background--muted
--qp-heading-text-color
--qp-link-text-color
--qp-text-color
--qp-text-color--inverse
--qp-text-color--inverse-muted
--qp-text-color--muted
--qp-text-color--strong
Systems
--qp-system-color-highlight
--qp-system-color-highlight-text
--qp-system-color-transparent
Effect
▸
Roots
--qp-lightbox-backdrop-filter
--qp-modal-backdrop-filter
--qp-site-header-backdrop-filter
--qp-sticky-tray-bar-backdrop-filter
--qp-sticky-tray-panel-backdrop-filter
Font Family
▸
Roots
--qp-code-font-family
--qp-document-font-family
Font Size
▸
Roots
--qp-font-size-xs
--qp-font-size-sm
--qp-font-size-md
--qp-font-size-lg
--qp-font-size-xl
--qp-font-size-2xl
--qp-font-size-3xl
Font Weight
▸
Roots
--qp-font-weight-regular
--qp-font-weight-medium
--qp-font-weight-semibold
--qp-font-weight-bold
Layer
▸
Systems
--qp-system-layer-system
--qp-system-layer-modal
--qp-system-layer-overlay
--qp-system-layer-persistent
Layout
▸
Roots
--qp-card-title-row-justify
--qp-menu-mobile-list-display
--qp-site-header-justify
--qp-site-header-menu-offset
--qp-sticky-tray-bottom-offset
--qp-sticky-tray-top-offset
Systems
--qp-sticky-tray-occupied-bottom
--qp-sticky-tray-occupied-top
Line Height
▸
Roots
--qp-line-body
--qp-heading-line-height
Radius
▸
Roots
--qp-radius-sm
--qp-radius-md
--qp-radius-lg
Systems
--qp-system-radius-none
Shadow
▸
Roots
--qp-raised-content-shadow
--qp-cta-shadow
--qp-cta-shadow--alternate-hover
--qp-sticky-tray-bar-shadow
Size
▸
Roots
--qp-card-icon-glyph-size
--qp-card-icon-size
--qp-card-list-min-column-width
--qp-gallery-max-width
--qp-image-width
--qp-lightbox-close-size
--qp-menu-link-min-height
--qp-menu-mobile-list-width
--qp-menu-mobile-toggle-size
--qp-menu-submenu-toggle-size
--qp-cta-max-width
--qp-cta-min-height
--qp-footer-content-width
--qp-footer-menu-max-width
--qp-footer-menu-width
--qp-gallery-image-height
--qp-menu-mobile-toggle-icon-size
--qp-modal-max-width
--qp-page-header-hero-aspect-ratio
--qp-page-max-width
--qp-product-list-image-ratio
--qp-section-width-default
--qp-section-width-wide
--qp-site-header-content-width
--qp-site-header-min-height
--qp-socials-icon-size
--qp-socials-link-size
--qp-sticky-tray-max-width
--qp-sticky-tray-panel-max-height
--qp-subtitle-max-width
--qp-gallery-item-aspect-ratio
--qp-gallery-item-min-width
--qp-gallery-portrait-aspect-ratio
--qp-icon-size
--qp-image-max-height
--qp-toast-max-width
--qp-toast-min-width
--qp-toc-link-min-height
--qp-video-max-height
--qp-video-play-icon-size
--qp-video-play-size
--qp-video-ratio
Spacing
▸
Roots
--qp-menu-gap
--qp-menu-nested-gap
--qp-space-md
--qp-control-padding-block-sm
--qp-control-padding-block-md
--qp-control-padding-inline
--qp-cta-padding-inline
--qp-menu__mobile-link-padding-block
--qp-menu__mobile-list-margin
--qp-footer-margin-top
--qp-site-header-padding-block
--qp-surface-padding-inline
--qp-toast-padding
Systems
--qp-system-space-none
☰
Theme
▾
Theme
Overview
Guidance
Background
▸
Roots
--qp-document-background-color
--qp-document-background-image
--qp-document-background-repeat
--qp-document-background-size
Border
▸
Roots
--qp-image-border
Border Width
▸
Roots
--qp-border-width
--qp-focus-width
Color
▸
Available Values
--qp-color-black
--qp-color-blue
--qp-color-blue-light
--qp-color-ink
--qp-color-ink-dark
--qp-color-ink-soft
--qp-color-mist
--qp-color-mist-dark
--qp-color-mist-light
--qp-color-white
Roots
--qp-accent-color
--qp-background
--qp-border-color
--qp-border-color--strong
--qp-lightbox__item-border-color--selected
--qp-focus-color
--qp-surface-background--hover
--qp-surface-background--muted
--qp-heading-text-color
--qp-link-text-color
--qp-text-color
--qp-text-color--inverse
--qp-text-color--inverse-muted
--qp-text-color--muted
--qp-text-color--strong
Systems
--qp-system-color-highlight
--qp-system-color-highlight-text
--qp-system-color-transparent
Effect
▸
Roots
--qp-lightbox-backdrop-filter
--qp-modal-backdrop-filter
--qp-site-header-backdrop-filter
--qp-sticky-tray-bar-backdrop-filter
--qp-sticky-tray-panel-backdrop-filter
Font Family
▸
Roots
--qp-code-font-family
--qp-document-font-family
Font Size
▸
Roots
--qp-font-size-xs
--qp-font-size-sm
--qp-font-size-md
--qp-font-size-lg
--qp-font-size-xl
--qp-font-size-2xl
--qp-font-size-3xl
Font Weight
▸
Roots
--qp-font-weight-regular
--qp-font-weight-medium
--qp-font-weight-semibold
--qp-font-weight-bold
Layer
▸
Systems
--qp-system-layer-system
--qp-system-layer-modal
--qp-system-layer-overlay
--qp-system-layer-persistent
Layout
▸
Roots
--qp-card-title-row-justify
--qp-menu-mobile-list-display
--qp-site-header-justify
--qp-site-header-menu-offset
--qp-sticky-tray-bottom-offset
--qp-sticky-tray-top-offset
Systems
--qp-sticky-tray-occupied-bottom
--qp-sticky-tray-occupied-top
Line Height
▸
Roots
--qp-line-body
--qp-heading-line-height
Radius
▸
Roots
--qp-radius-sm
--qp-radius-md
--qp-radius-lg
Systems
--qp-system-radius-none
Shadow
▸
Roots
--qp-raised-content-shadow
--qp-cta-shadow
--qp-cta-shadow--alternate-hover
--qp-sticky-tray-bar-shadow
Size
▸
Roots
--qp-card-icon-glyph-size
--qp-card-icon-size
--qp-card-list-min-column-width
--qp-gallery-max-width
--qp-image-width
--qp-lightbox-close-size
--qp-menu-link-min-height
--qp-menu-mobile-list-width
--qp-menu-mobile-toggle-size
--qp-menu-submenu-toggle-size
--qp-cta-max-width
--qp-cta-min-height
--qp-footer-content-width
--qp-footer-menu-max-width
--qp-footer-menu-width
--qp-gallery-image-height
--qp-menu-mobile-toggle-icon-size
--qp-modal-max-width
--qp-page-header-hero-aspect-ratio
--qp-page-max-width
--qp-product-list-image-ratio
--qp-section-width-default
--qp-section-width-wide
--qp-site-header-content-width
--qp-site-header-min-height
--qp-socials-icon-size
--qp-socials-link-size
--qp-sticky-tray-max-width
--qp-sticky-tray-panel-max-height
--qp-subtitle-max-width
--qp-gallery-item-aspect-ratio
--qp-gallery-item-min-width
--qp-gallery-portrait-aspect-ratio
--qp-icon-size
--qp-image-max-height
--qp-toast-max-width
--qp-toast-min-width
--qp-toc-link-min-height
--qp-video-max-height
--qp-video-play-icon-size
--qp-video-play-size
--qp-video-ratio
Spacing
▸
Roots
--qp-menu-gap
--qp-menu-nested-gap
--qp-space-md
--qp-control-padding-block-sm
--qp-control-padding-block-md
--qp-control-padding-inline
--qp-cta-padding-inline
--qp-menu__mobile-link-padding-block
--qp-menu__mobile-list-margin
--qp-footer-margin-top
--qp-site-header-padding-block
--qp-surface-padding-inline
--qp-toast-padding
Systems
--qp-system-space-none
Base theme variables owned by the PageHeader architecture Key.
Architecture Key:
PageHeader
--qp-page-header-hero-aspect-ratio
Choose the framing proportion of PageHeader hero media.
