Size Theme

--qp-card-icon-glyph-size

Choose the visual scale of glyphs inside Card icon containers. 0 Derived variables; 0 Inherited variables

1.25rem

--qp-card-icon-size

Choose the physical prominence of Card icon containers. 0 Derived variables; 0 Inherited variables

2rem

--qp-card-list-min-column-width

Choose the minimum useful Card column measure before a CardList reflows. 0 Derived variables; 0 Inherited variables

15.625rem

--qp-cta-max-width

Choose the maximum horizontal prominence of CTA controls. 0 Derived variables; 0 Inherited variables

100%

--qp-cta-min-height

Choose the minimum interactive height of CTA controls. 0 Derived variables; 0 Inherited variables

2.625rem

--qp-footer-content-width

Choose the maximum content measure inside the SiteFooter. 0 Derived variables; 0 Inherited variables

min(75rem, 100%)

--qp-footer-menu-max-width

Choose the maximum measure available to Footer navigation. 0 Derived variables; 0 Inherited variables

100%

--qp-footer-menu-width

Choose whether Footer navigation fills or shrink-wraps its available measure. 0 Derived variables; 0 Inherited variables

fit-content

--qp-gallery-image-height

Choose the common rendered height used to align Gallery imagery. 0 Derived variables; 0 Inherited variables

auto

--qp-gallery-item-aspect-ratio

Choose the standard framing proportion of Gallery items. 0 Derived variables; 0 Inherited variables

auto

--qp-gallery-item-min-width

Choose the minimum useful Gallery item measure before the Gallery reflows. 0 Derived variables; 0 Inherited variables

220px

--qp-gallery-max-width

Choose the maximum composition width of a Gallery. 0 Derived variables; 0 Inherited variables

none

--qp-gallery-portrait-aspect-ratio

Choose the framing proportion used for portrait Gallery items. 0 Derived variables; 0 Inherited variables

auto

--qp-icon-size

Choose the default scale of inline icons relative to surrounding content. 0 Derived variables; 0 Inherited variables

1em

--qp-image-max-height

Choose the maximum displayed height of ordinary inline images. 0 Derived variables; 0 Inherited variables

none

--qp-image-width

Choose whether ordinary inline images occupy their available content width or shrink to the rendered media width. 0 Derived variables; 0 Inherited variables

auto

--qp-lightbox-close-size

Choose the physical size of the Lightbox close control. 0 Derived variables; 0 Inherited variables

2.5rem

--qp-menu-link-min-height

Choose the minimum interactive height of Menu links. 0 Derived variables; 0 Inherited variables

2.75rem

--qp-menu-mobile-list-width

Choose the maximum usable width of the mobile Menu surface. 0 Derived variables; 0 Inherited variables

min(32rem, 100%)

--qp-menu-mobile-toggle-icon-size

Choose the visual scale of the mobile Menu toggle glyph. 0 Derived variables; 0 Inherited variables

1.25rem

--qp-menu-mobile-toggle-size

Choose the physical size of the mobile Menu toggle control. 0 Derived variables; 0 Inherited variables

2.75rem

--qp-menu-submenu-toggle-size

Choose the physical size of submenu disclosure controls. 0 Derived variables; 0 Inherited variables

2rem

--qp-modal-max-width

Choose the maximum composition width of Modal surfaces. 0 Derived variables; 0 Inherited variables

720px

--qp-page-header-hero-aspect-ratio

Choose the framing proportion of PageHeader hero media. 0 Derived variables; 0 Inherited variables

16 / 9

--qp-page-max-width

Choose the maximum width of the QP page canvas. 0 Derived variables; 0 Inherited variables

none

--qp-product-list-image-ratio

Choose the consistent framing proportion used for product imagery across a ProductList. 0 Derived variables; 0 Inherited variables

4 / 3

--qp-section-width-default

Choose the standard content measure used by ordinary QP sections. 0 Derived variables; 1 Inherited variable

60rem

--qp-section-width-wide

Choose the expanded content measure used by wide QP compositions. 0 Derived variables; 1 Inherited variable

75rem

--qp-site-header-content-width

Choose the maximum content measure inside the SiteHeader. 0 Derived variables; 0 Inherited variables

min(75rem, 100%)

--qp-site-header-min-height

Choose the minimum physical height of the SiteHeader. 0 Derived variables; 0 Inherited variables

4rem

--qp-socials-icon-size

Choose the visual scale of Socials glyphs. 0 Derived variables; 0 Inherited variables

1.25rem

--qp-socials-link-size

Choose the physical size of Socials link controls. 0 Derived variables; 0 Inherited variables

2.75rem

--qp-sticky-tray-max-width

Choose the maximum horizontal extent of the StickyTray. 0 Derived variables; 0 Inherited variables

48rem

--qp-sticky-tray-panel-max-height

Choose the maximum viewport capacity of an open StickyTray panel. 0 Derived variables; 0 Inherited variables

60vh

--qp-subtitle-max-width

Choose the standard readable measure for explanatory subtitles across major QP compositions. 0 Derived variables; 2 Inherited variables

48rem

--qp-toast-max-width

Choose the maximum readable width of Toast messages. 0 Derived variables; 0 Inherited variables

40rem

--qp-toast-min-width

Choose the minimum physical width of Toast messages. 0 Derived variables; 0 Inherited variables

0px

--qp-toc-link-min-height

Choose the minimum interactive height of TOC links. 0 Derived variables; 0 Inherited variables

2.5rem

--qp-video-max-height

Choose the maximum displayed height of Video media. 1 Derived variable; 0 Inherited variables

min(80vh, 50rem)

--qp-video-play-icon-size

Choose the visual scale of the Video play glyph. 0 Derived variables; 0 Inherited variables

3rem

--qp-video-play-size

Choose the physical prominence of the Video play control. 0 Derived variables; 0 Inherited variables

3rem

--qp-video-ratio

Choose the framing proportion of Video media. 0 Derived variables; 0 Inherited variables

16 / 9