-
Content:
@use 'sass:meta'; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography; @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/mixins/global.mixins' as globalMixins; .ontario-callout, .ontario-aside { border-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal; padding: spacing.$spacing-5; * { max-width: globalVariables.$standard-width; &:last-child { margin-bottom: spacing.$spacing-2; } } } .ontario-callout { margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0; background-color: colours.$ontario-greyscale-5; } .ontario-aside { margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6; } @media screen and (max-width: breakpoints.$small-breakpoint) { .ontario-aside { margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4; } } .ontario-callout__title, .ontario-aside__title { margin-bottom: spacing.$spacing-4; } // ----------------------------------- // Callout & Aside border variants // ----------------------------------- $highlight-colours: ( 'teal': colours.$ontario-colour-dark-teal, 'gold': colours.$ontario-colour-dark-gold, 'yellow': colours.$ontario-colour-dark-yellow, 'taupe': colours.$ontario-colour-dark-taupe, 'green': colours.$ontario-colour-dark-green, 'lime': colours.$ontario-colour-dark-lime, 'sky': colours.$ontario-colour-dark-sky, 'blue': colours.$ontario-colour-dark-blue, 'purple': colours.$ontario-colour-dark-purple, ); @each $color-name, $hex in $highlight-colours { .ontario-border-highlight--#{$color-name} { border-color: $hex !important; } } - URL: /components/raw/callouts-asides/callouts-asides.scss
- Filesystem Path: fractal/components/components/alerts-highlights/callouts-asides/callouts-asides.scss
- Size: 2.3 KB
-
Content:
.ontario-margin-top-0-\!{margin-top:0}.ontario-padding-top-0-\!{padding-top:0}.ontario-margin-bottom-0-\!{margin-bottom:0}.ontario-padding-bottom-0-\!{padding-bottom:0}.ontario-margin-left-0-\!{margin-left:0}.ontario-padding-left-0-\!{padding-left:0}.ontario-margin-right-0-\!{margin-right:0}.ontario-padding-right-0-\!{padding-right:0}.ontario-margin-top-4-\!{margin-top:0.25rem}.ontario-padding-top-4-\!{padding-top:0.25rem}.ontario-margin-bottom-4-\!{margin-bottom:0.25rem}.ontario-padding-bottom-4-\!{padding-bottom:0.25rem}.ontario-margin-left-4-\!{margin-left:0.25rem}.ontario-padding-left-4-\!{padding-left:0.25rem}.ontario-margin-right-4-\!{margin-right:0.25rem}.ontario-padding-right-4-\!{padding-right:0.25rem}.ontario-margin-top-8-\!{margin-top:0.5rem}.ontario-padding-top-8-\!{padding-top:0.5rem}.ontario-margin-bottom-8-\!{margin-bottom:0.5rem}.ontario-padding-bottom-8-\!{padding-bottom:0.5rem}.ontario-margin-left-8-\!{margin-left:0.5rem}.ontario-padding-left-8-\!{padding-left:0.5rem}.ontario-margin-right-8-\!{margin-right:0.5rem}.ontario-padding-right-8-\!{padding-right:0.5rem}.ontario-margin-top-12-\!{margin-top:0.75rem}.ontario-padding-top-12-\!{padding-top:0.75rem}.ontario-margin-bottom-12-\!{margin-bottom:0.75rem}.ontario-padding-bottom-12-\!{padding-bottom:0.75rem}.ontario-margin-left-12-\!{margin-left:0.75rem}.ontario-padding-left-12-\!{padding-left:0.75rem}.ontario-margin-right-12-\!{margin-right:0.75rem}.ontario-padding-right-12-\!{padding-right:0.75rem}.ontario-margin-top-16-\!{margin-top:1rem}.ontario-padding-top-16-\!{padding-top:1rem}.ontario-margin-bottom-16-\!{margin-bottom:1rem}.ontario-padding-bottom-16-\!{padding-bottom:1rem}.ontario-margin-left-16-\!{margin-left:1rem}.ontario-padding-left-16-\!{padding-left:1rem}.ontario-margin-right-16-\!{margin-right:1rem}.ontario-padding-right-16-\!{padding-right:1rem}.ontario-margin-top-24-\!{margin-top:1.5rem}.ontario-padding-top-24-\!{padding-top:1.5rem}.ontario-margin-bottom-24-\!{margin-bottom:1.5rem}.ontario-padding-bottom-24-\!{padding-bottom:1.5rem}.ontario-margin-left-24-\!{margin-left:1.5rem}.ontario-padding-left-24-\!{padding-left:1.5rem}.ontario-margin-right-24-\!{margin-right:1.5rem}.ontario-padding-right-24-\!{padding-right:1.5rem}.ontario-margin-top-32-\!{margin-top:2rem}.ontario-padding-top-32-\!{padding-top:2rem}.ontario-margin-bottom-32-\!{margin-bottom:2rem}.ontario-padding-bottom-32-\!{padding-bottom:2rem}.ontario-margin-left-32-\!{margin-left:2rem}.ontario-padding-left-32-\!{padding-left:2rem}.ontario-margin-right-32-\!{margin-right:2rem}.ontario-padding-right-32-\!{padding-right:2rem}.ontario-margin-top-40-\!{margin-top:2.5rem}.ontario-padding-top-40-\!{padding-top:2.5rem}.ontario-margin-bottom-40-\!{margin-bottom:2.5rem}.ontario-padding-bottom-40-\!{padding-bottom:2.5rem}.ontario-margin-left-40-\!{margin-left:2.5rem}.ontario-padding-left-40-\!{padding-left:2.5rem}.ontario-margin-right-40-\!{margin-right:2.5rem}.ontario-padding-right-40-\!{padding-right:2.5rem}.ontario-margin-top-48-\!{margin-top:3rem}.ontario-padding-top-48-\!{padding-top:3rem}.ontario-margin-bottom-48-\!{margin-bottom:3rem}.ontario-padding-bottom-48-\!{padding-bottom:3rem}.ontario-margin-left-48-\!{margin-left:3rem}.ontario-padding-left-48-\!{padding-left:3rem}.ontario-margin-right-48-\!{margin-right:3rem}.ontario-padding-right-48-\!{padding-right:3rem}.ontario-margin-top-64-\!{margin-top:4rem}.ontario-padding-top-64-\!{padding-top:4rem}.ontario-margin-bottom-64-\!{margin-bottom:4rem}.ontario-padding-bottom-64-\!{padding-bottom:4rem}.ontario-margin-left-64-\!{margin-left:4rem}.ontario-padding-left-64-\!{padding-left:4rem}.ontario-margin-right-64-\!{margin-right:4rem}.ontario-padding-right-64-\!{padding-right:4rem}.ontario-padding-top-0-\!{padding-top:0 !important}.ontario-padding-bottom-0-\!{padding-bottom:0 !important}.ontario-padding-right-0-\!{padding-right:0 !important}.ontario-padding-left-0-\!{padding-left:0 !important}.ontario-padding-top-4-\!{padding-top:.25rem !important}.ontario-padding-bottom-4-\!{padding-bottom:.25rem !important}.ontario-padding-right-4-\!{padding-right:.25rem !important}.ontario-padding-left-4-\!{padding-left:.25rem !important}.ontario-padding-top-8-\!{padding-top:.5rem !important}.ontario-padding-bottom-8-\!{padding-bottom:.5rem !important}.ontario-padding-right-8-\!{padding-right:.5rem !important}.ontario-padding-left-8-\!{padding-left:.5rem !important}.ontario-padding-top-12-\!{padding-top:.75rem !important}.ontario-padding-bottom-12-\!{padding-bottom:.75rem !important}.ontario-padding-right-12-\!{padding-right:.75rem !important}.ontario-padding-left-12-\!{padding-left:.75rem !important}.ontario-padding-top-16-\!{padding-top:1rem !important}.ontario-padding-bottom-16-\!{padding-bottom:1rem !important}.ontario-padding-right-16-\!{padding-right:1rem !important}.ontario-padding-left-16-\!{padding-left:1rem !important}.ontario-padding-top-24-\!{padding-top:1.5rem !important}.ontario-padding-bottom-24-\!{padding-bottom:1.5rem !important}.ontario-padding-right-24-\!{padding-right:1.5rem !important}.ontario-padding-left-24-\!{padding-left:1.5rem !important}.ontario-padding-top-32-\!{padding-top:2rem !important}.ontario-padding-bottom-32-\!{padding-bottom:2rem !important}.ontario-padding-right-32-\!{padding-right:2rem !important}.ontario-padding-left-32-\!{padding-left:2rem !important}.ontario-padding-top-40-\!{padding-top:2.5rem !important}.ontario-padding-bottom-40-\!{padding-bottom:2.5rem !important}.ontario-padding-right-40-\!{padding-right:2.5rem !important}.ontario-padding-left-40-\!{padding-left:2.5rem !important}.ontario-padding-top-48-\!{padding-top:3rem !important}.ontario-padding-bottom-48-\!{padding-bottom:3rem !important}.ontario-padding-right-48-\!{padding-right:3rem !important}.ontario-padding-left-48-\!{padding-left:3rem !important}.ontario-padding-top-64-\!{padding-top:4rem !important}.ontario-padding-bottom-64-\!{padding-bottom:4rem !important}.ontario-padding-right-64-\!{padding-right:4rem !important}.ontario-padding-left-64-\!{padding-left:4rem !important}.ontario-padding-top-80-\!{padding-top:5rem !important}.ontario-padding-bottom-80-\!{padding-bottom:5rem !important}.ontario-padding-right-80-\!{padding-right:5rem !important}.ontario-padding-left-80-\!{padding-left:5rem !important}.ontario-margin-top-0-\!{margin-top:0 !important}.ontario-margin-bottom-0-\!{margin-bottom:0 !important}.ontario-margin-right-0-\!{margin-right:0 !important}.ontario-margin-left-0-\!{margin-left:0 !important}.ontario-margin-top-4-\!{margin-top:.25rem !important}.ontario-margin-bottom-4-\!{margin-bottom:.25rem !important}.ontario-margin-right-4-\!{margin-right:.25rem !important}.ontario-margin-left-4-\!{margin-left:.25rem !important}.ontario-margin-top-8-\!{margin-top:.5rem !important}.ontario-margin-bottom-8-\!{margin-bottom:.5rem !important}.ontario-margin-right-8-\!{margin-right:.5rem !important}.ontario-margin-left-8-\!{margin-left:.5rem !important}.ontario-margin-top-12-\!{margin-top:.75rem !important}.ontario-margin-bottom-12-\!{margin-bottom:.75rem !important}.ontario-margin-right-12-\!{margin-right:.75rem !important}.ontario-margin-left-12-\!{margin-left:.75rem !important}.ontario-margin-top-16-\!{margin-top:1rem !important}.ontario-margin-bottom-16-\!{margin-bottom:1rem !important}.ontario-margin-right-16-\!{margin-right:1rem !important}.ontario-margin-left-16-\!{margin-left:1rem !important}.ontario-margin-top-24-\!{margin-top:1.5rem !important}.ontario-margin-bottom-24-\!{margin-bottom:1.5rem !important}.ontario-margin-right-24-\!{margin-right:1.5rem !important}.ontario-margin-left-24-\!{margin-left:1.5rem !important}.ontario-margin-top-32-\!{margin-top:2rem !important}.ontario-margin-bottom-32-\!{margin-bottom:2rem !important}.ontario-margin-right-32-\!{margin-right:2rem !important}.ontario-margin-left-32-\!{margin-left:2rem !important}.ontario-margin-top-40-\!{margin-top:2.5rem !important}.ontario-margin-bottom-40-\!{margin-bottom:2.5rem !important}.ontario-margin-right-40-\!{margin-right:2.5rem !important}.ontario-margin-left-40-\!{margin-left:2.5rem !important}.ontario-margin-top-48-\!{margin-top:3rem !important}.ontario-margin-bottom-48-\!{margin-bottom:3rem !important}.ontario-margin-right-48-\!{margin-right:3rem !important}.ontario-margin-left-48-\!{margin-left:3rem !important}.ontario-margin-top-64-\!{margin-top:4rem !important}.ontario-margin-bottom-64-\!{margin-bottom:4rem !important}.ontario-margin-right-64-\!{margin-right:4rem !important}.ontario-margin-left-64-\!{margin-left:4rem !important}.ontario-margin-top-80-\!{margin-top:5rem !important}.ontario-margin-bottom-80-\!{margin-bottom:5rem !important}.ontario-margin-right-80-\!{margin-right:5rem !important}.ontario-margin-left-80-\!{margin-left:5rem !important}.ontario-callout,.ontario-aside{border-left:.25rem solid #367a76;padding:1.5rem}.ontario-callout *,.ontario-aside *{max-width:48rem}.ontario-callout *:last-child,.ontario-aside *:last-child{margin-bottom:.5rem}.ontario-callout{margin:2rem 0 2.5rem 0;background-color:#f2f2f2}.ontario-aside{margin:2rem 0 2.5rem 2rem}@media screen and (max-width: 40em){.ontario-aside{margin:2rem 0 2.5rem 1rem}}.ontario-callout__title,.ontario-aside__title{margin-bottom:1rem}.ontario-border-highlight--teal{border-color:#367a76 !important}.ontario-border-highlight--gold{border-color:#86743d !important}.ontario-border-highlight--yellow{border-color:#8a600d !important}.ontario-border-highlight--taupe{border-color:#7b725c !important}.ontario-border-highlight--green{border-color:#2b8737 !important}.ontario-border-highlight--lime{border-color:#5f8129 !important}.ontario-border-highlight--sky{border-color:#1080a6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278f !important} - URL: /components/raw/callouts-asides/callouts-asides.css
- Filesystem Path: fractal/components/components/alerts-highlights/callouts-asides/callouts-asides.css
- Size: 9.8 KB
When to use this component
Callouts and asides are excerpts or related information that have been pulled out from a larger piece of content and given a different visual treatment to draw users’ attention. They may be used for:
- important snippets of information
- examples
- additional information about the page
Callouts
A callout is used to emphasize an important snippet of information within the flow of a page. Content in a callout should be something on the page that you want to highlight, but that is not critical information.
Asides
An aside should include content that is not directly related to surrounding content on the page. Content in an aside could be considered separate from the rest of the page content.
Use an aside rather than a callout when the content can be skipped over without affecting the natural flow of the rest of the content. Asides are coded differently from callouts so they don’t interrupt the flow of content for screen readers.
Best practices
Do:
- keep text brief and aim for a maximum of 280 characters
- minimize the use of callouts and asides – avoid having multiple per page if possible
- choose a maximum of two accent colours that match branding initiatives
Do not:
- use a callout or aside as a substitute for critical alerts or page alerts
- put an entire block of content (rather than a short excerpt) in a callout or aside
Colour options
You can use dedicated colours for the callout and aside accent line. Add the following class names to the callout or aside div to apply.
| Colour | Colour name | Hex code | SCSS variable | Class Name |
|---|---|---|---|---|
| Dark teal (default) | #367A76 |
$ontario-colour-dark-teal |
ontario-border-highlight--teal |
|
| Dark gold | #86743D |
$ontario-colour-dark-gold |
ontario-border-highlight--gold |
|
| Dark yellow | #8A600D |
$ontario-colour-dark-yellow |
ontario-border-highlight--yellow |
|
| Dark taupe | #7B725C |
$ontario-colour-dark-taupe |
ontario-border-highlight--taupe |
|
| Dark lime | #5F8129 |
$ontario-colour-dark-lime |
ontario-border-highlight--lime |
|
| Dark sky | #1080A6 |
$ontario-colour-dark-sky |
ontario-border-highlight--sky |
|
| Dark purple | #92278F |
$ontario-colour-dark-purple |
ontario-border-highlight--purple |
If you have any questions or feedback, please get in touch.