QS Pack

Header

Variable name Default value Description
--b-header purple Background color for the header component.
--h-header 3.5rem Height of the header component. Changes to 4rem on screens 1024px or wider.
--p-header 0 1rem Padding for the header component.
--horizontal-header space-between Horizontal alignment (justify-content) of items within the header.
--mb-header 2rem Bottom margin for the header component on screens 1024px or wider.
--c-logo-header #fff Text color of the logo in the header.
--fs-logo-header 1.1rem Font size for the logo in the header.
--spacing-items-header .3rem Spacing (gap) between items within a 'header-items' container.


CSS Class Description
.header Base class for the main header container. Defines alignment, background, height, padding, position, etc.
.header-items Class for grouping elements within the header. Defines alignment, display, and spacing.
.header-logo Class for the logo element in the header. Defines color and font size.
.btn Class for specific buttons within the header. Used in conjunction with the '.btn' class.
.btn .text Styles for the text within a header button. Controls its visibility on different screen sizes.
.btn .icon Styles for the icon within a header button.