Implementation

Classes

Name	Description
`qld__callout`	Default style, can be applied to divs, span or paragraph tags.
`qld__callout__heading`	Class for callout headings.
`qld__callout__heading--sronly`	Class to remove headings so they appear only for screen readers.
`qld__callout--calendar-event`	Modifying class used to style calander events
`qld__callout--calendar-event__lede`	Applies text styles for the 'lead (intro)' text on the date callout component
`qld__callout--calendar-event__time`	Applies text styles for the 'time' text on the date callout component
`qld__callout--calendar-event__time`	Applies text styles for the 'event name' text on the date callout component

Variables

Name	Description
`$QLD-color-light-designAccent`	Colour of design accent used on light backgrounds for callouts and other decorative borders.
`$QLD-color-dark-designAccent`	Colour of design accent used on dark backgrounds for callouts and other decorative borders.

Last updated: April 2026

Back to top