Use callouts and asides to highlight in-page content.
@use "sass:meta";
@import "../../../../theme/assets/styles/sass/variables-import";
.ontario-callout,
.ontario-aside {
border-left: $spacing-1 solid $ontario-colour-dark-teal;
padding: $spacing-5;
* {
max-width: 48rem;
}
}
.ontario-callout {
margin: $spacing-6 0 $spacing-7 0;
background-color: $ontario-greyscale-5;
}
.ontario-aside {
margin: $spacing-6 0 $spacing-7 $spacing-6;
}
@media screen and (max-width: $small-breakpoint) {
.ontario-aside {
margin: $spacing-6 0 $spacing-7 $spacing-4;
}
}
.ontario-callout:last-child,
.ontario-aside:last-child {
margin-bottom: $spacing-2;
}
.ontario-callout__title,
.ontario-aside__title {
margin-bottom: $spacing-4;
}
// -----------------------------------
// Callout & Aside border variants
// -----------------------------------
$highlight-colours: (
"teal": $ontario-colour-dark-teal,
"gold": $ontario-colour-dark-gold,
"yellow": $ontario-colour-dark-yellow,
"taupe": $ontario-colour-dark-taupe,
"green": $ontario-colour-dark-green,
"lime": $ontario-colour-dark-lime,
"sky": $ontario-colour-dark-sky,
"blue": $ontario-colour-dark-blue,
"purple": $ontario-colour-dark-purple,
);
@each $color-name, $hex in $highlight-colours {
.ontario-border-highlight--#{$color-name} {
border-color: $hex !important;
}
}
.ontario-callout,.ontario-aside{border-left:.25rem solid #367a76;padding:1.5rem}.ontario-callout *,.ontario-aside *{max-width:48rem}.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:last-child,.ontario-aside:last-child{margin-bottom:.5rem}.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}
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:
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.
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.
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 other suggestions or advice or any questions on callouts and asides, the design system team would love to hear from you.