ontario-callout

Use callouts to highlight in-page content.

Usage guidance

Please refer to the Ontario Design System for current documentation guidance for callouts.

Configuration

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the callout component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples

Example of a callout component, where the user is explicitly passing in content through the content property.

HTML

<ontario-callout
	heading-type="h2"
	heading-content-type="html"
	heading-content="<a href='#'>This is a callout heading that is a link</a>"
	content="This is the content for the callout component."
></ontario-callout>

React

<OntarioCallout
	headingType="h2"
	headingContentType="html"
	headingContent="<a href='#'>This is a callout heading that is a link</a>"
	content="This is the content for the callout component."
/>

Angular

<ontario-callout
	[headingType]="'h2'"
	[headingContentType]="'html'"
	[headingContent]="'<a href='#'>This is a callout heading that is a link</a>'"
	[content]="'This is the content for the callout component.'"
></ontario-callout>

This is another example of an callout. This time, the content is passed as a child of the ontario-callout component, which allows for HTML content to be passed. A highlightColour option is also passed.

HTML

<ontario-callout
	heading-type="h4"
	heading-content-type="string"
	heading-content="This is a callout heading"
	highlight-colour="gold"
>
	<p><a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p>
</ontario-callout>

React

<OntarioCallout
	headingType="h4"
	headingContentType="string"
	headingContent="This is a callout heading"
	highlightColour="gold"
>
	<p>
		<a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.
	</p>
</OntarioCallout>

Angular

<ontario-callout
	[headingType]="'h4'"
	[headingContentType]="'string'"
	[headingContent]="'This is a callout heading'"
	[highlightColour]="'gold'"
>
	<p><a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence expires.</p>
</ontario-callout>

Sign up for email reminders and we’ll notify you 60 and 30 days before your licence expires.

Technical Note: SSR (Server-Side Rendering) Considerations

The Ontario Callout component supports two ways of defining content:

• Via the content prop (as a string)
• Via slotted children placed between the component's opening and closing tags

While both approaches work in the browser, only the content prop is reliably rendered during Server-Side Rendering (SSR).

SSR-safe example:

During SSR, fallback content using host.textContent is not reliably available. This is why it is recommended to pass the callout content through the content prop. Eg:

<OntarioCallout headingContent="Notice" content="This is the callout content."></OntarioCallout>

Properties

Property	Attribute	Description	Type	Default
content	content	Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag. HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.	string | undefined	undefined
headingContent	heading-content	Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the headingContentType needs to be set to html.	string | undefined	undefined
headingContentType	heading-content-type	The type of the heading content. If no prop is passed, it will default to string.	"html" | "string"	'string'
headingType	heading-type	The heading level of the callout heading.	"h2" | "h3" | "h4" | "h5" | "h6" | undefined	undefined
highlightColour	highlight-colour	Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.	"blue" | "gold" | "green" | "lime" | "purple" | "sky" | "taupe" | "teal" | "yellow" | undefined	'teal'

---

Built with StencilJS