Callouts and asides

In progress

Use callouts and asides to highlight in-page content.

  • 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;
    }
}
  • URL: /components/raw/callouts-asides/callouts-asides.scss
  • Filesystem Path: fractal/components/components/alerts-highlights/callouts-asides/callouts-asides.scss
  • Size: 1.4 KB
  • Content: 
    .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}
  • URL: /components/raw/callouts-asides/callouts-asides.css
  • Filesystem Path: fractal/components/components/alerts-highlights/callouts-asides/callouts-asides.css
  • Size: 1 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

Help improve this page

If you have other suggestions or advice or any questions on callouts and asides, the design system team would love to hear from you.