Implementation
Classes
Global header classes
| Name | Description |
|---|---|
| Applies to <body> this class applies the vertical navigation header patterns. |
| Class that defines main header container and default styles |
Pre-header and mobile navigation controls
| Name | Description |
|---|---|
Pre-header | |
| Default style for pre-header container with not modifying class this is set to use the default light background colour. |
| Modifying class that changes the pre-header and any components within it to use the dark theme. |
| Modifying class that changes the pre-header and any components within it to use the dark-alt theme. |
| Use to apply styles to a group radio buttons. |
| On mobile the pre-header contains the primary brand identifier which in most cases is the Queensland Government Coat of Arms. |
| Right aligned container holds the pre-header site wide utility links. |
| Set the size and style for utility links in the pre-header |
| Defines the size and colour of utility link icons |
Mobile navigation | |
| Container for main navigation controls (Search and Menu buttons on mobile and tablet screens). These controls toggle the search or mobile menu. |
qld__main-nav__toggle-search | Defines the size and appearance of the 'search button' in the main nav control. |
qld__header__toggle-main-nav | Defines the size and appearance of the 'menu button' in the main nav control. |
qld__main-nav__toggle-text | Defines the style of labels for mobile menu buttons. |
Header content
| Name | Description |
|---|---|
| This is the class for the main content section of banner. |
| Modifier class that sets the content area to to use the dark theme |
| Modifier class that sets the content area to to use the dark-alt theme |
| Container for logo and site name |
| Defines size and shape of primary site logo on desktop. |
| Defines the position of site name |
| Defines the size and text style of site name |
| Defines the size and text style for subheadings in the site name |
| Class applied to the search form wrapper. See search field for more informaiton on search classes. |