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. |