Implementation
Classes
| Name | Description |
|---|---|
qld__promo-panelCopy | This class defines the overall styling for the promotional panel, which includes layout, background, and general presentation. It is a foundational class that identifies the section as a promotional panel. This class also sets the default appearance for the promo which is the indented large image pattern. |
qld__body | This is the default qld body section class, using it alone will apply the white background colour the to the qld__promo-panel__container |
qld__body--light | This is modifier class that applies the light background colour the qld__promo-panel__container |
qld__body--alt | This is modifier class that applies the alt background colour the qld__promo-panel__container |
qld__body--dark | This is modifier class that applies the dark background colour the qld__promo-panel__container |
qld__body--dark-alt | This is modifier class that applies the dark-alt background colour the qld__promo-panel__container |
qld__body--large-text | This is a modifier class that applies the styling for the indented text promo panel variant. |
qld__body--contained | This is a modifier class that applies the styling for the contained image promo panel variant. |
qld__body--full-image | This is a modifier class that applies the styling for the full image promo panel variant. |
qld__promo-panel--image-left | This is a modifier class specifies that the image within the promo panel should be aligned to the left side of the content. It influences the layout by positioning the image container to the left. |
qld__promo-panel--image-right | This modifier class indicates that the image within the promo panel should be aligned to the right side of the content. It adjusts the layout by positioning the image container to the right. |
qld__promo-panel__container | This class is applied to the container that holds the content and image of the promo panel. It typically controls the layout and spacing within the panel, ensuring that the elements are displayed in a row. Its colour is determined by the qld__body colour class applied the the section. |
qld__promo-panel__container-image | This class is used for the container that holds the image within the promo panel. |
qld__promo-panel__imageCopy | This class applies styles to the image itself, including the background image settings such as |
qld__promo-panel__container-content | This class is used for the container that holds the textual content within the promo panel its sets width of the content. |
qld__promo-panel__container-inner | This class is applied to an inner container within the content area. It provides additional structure and spacing, often used to group related content elements together. Its what controls padding and background shadows for the content section. |
qld__promo-panel__container-icon | This class styles an icon container in promo panels. |
qld__promo-panel__icon | This class specifically targets the icon itself, applying necessary styles such as font size and colours. |
qld__promo-panel__container-btn | This class is applied to the container that holds buttons within the promo panel. |