Skip to main content
Version: v6.0.0

ontario-card

Use a card to provide an entry point to information on a different page.

Usage guidance​

Please refer to the Ontario Design System for current documentation guidance. This component needs to be used in conjunction with the ontario-card-collection component. Please reference the ontario-card-collection readme for further details.

Configuration​

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the ontario-card 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 bare-bones ontario-card component where the label and description for the card is provided.

<ontario-card label="Card Title" description="Lorem Ipsum Lorem Ipsum"></ontario-card>

Example of an ontario-card component with an image, which includes the headerColour, image, imageAltText, label and description properties.

<ontario-card
	label="Card Title"
	header-colour="sky"
	image="https://picsum.photos/300/225"
	image-alt-text="Randomly generated image from picsum."
	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
>
</ontario-card>

This is another example of an ontario-card component with a horizontal layout containing an image. This will require more properties, including the horizontalImagePositionType and the horizontalImageSizeType.

<ontario-card
	layout-direction="horizontal"
	label="Card Title"
	image="https://picsum.photos/300/225"
	horizontal-image-position-type="left"
	horizontal-image-size-type="one-fourth"
	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
>
</ontario-card>

Custom property types​

headerColour​

The header-colour property supports a wide range of values, including:

  • dark-accent
  • light-accent
  • light-gold
  • light-yellow
  • light-taupe
  • light-green
  • light-lime
  • light-teal
  • light-sky
  • light-blue
  • light-purple
  • light-orange
  • light-red
  • light-magenta
  • gold
  • yellow
  • taupe
  • green
  • lime
  • teal
  • sky
  • blue
  • purple
  • orange
  • red
  • magenta

Technical Note: SSR (Server-Side Rendering) Considerations​

The Ontario Card component is SSR-compatible and will render static HTML for the card’s image, heading, and description based on its props.

For best SSR results:

  • Always provide the label prop to ensure the heading and link are rendered with visible content. During SSR, fallback content using host.textContent is not reliably available. This is why it is recommended to pass the card label through the label prop.
  • If ariaLabelText is used, consider whether it’s appropriate for both the image and heading links, or whether separate values should be passed (if split becomes available in future versions).

SSR-safe example:​

<OntarioCard
	label="Card Title"
	image="https://example.com/image.jpg"
	description="This is a short description"
></OntarioCard>

Properties​

PropertyAttributeDescriptionTypeDefault
ariaLabelTextaria-label-textProvides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides. This is optional.string | undefinedundefined
cardLinkcard-linkAction link for when the card is clicked. This is optional.string | undefinedundefined
descriptiondescriptionText to be displayed within the card description container. This is optional.string | undefinedundefined
headerColourheader-colourSet the card's header colour. This is optional."teal" | "gold" | "yellow" | "taupe" | "green" | "lime" | "sky" | "blue" | "purple" | "light-teal" | "red" | "dark-accent" | "light-accent" | "light-gold" | "light-yellow" | "light-taupe" | "light-green" | "light-lime" | "light-sky" | "light-blue" | "light-purple" | "light-orange" | "light-red" | "light-magenta" | "orange" | "magenta" | undefinedundefined
headingLevelheading-levelThe heading level that the label will be rendered as."h2" | "h3" | "h4" | "h5" | "h6"'h2'
horizontalImagePositionTypehorizontal-image-position-typeThe position of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'."left" | "right" | undefined'left'
horizontalImageSizeTypehorizontal-image-size-typeThe size of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'."one-fourth" | "one-third" | undefined'one-third'
imageimageImage to be displayed within the card image container. This is optional.string | undefinedundefined
imageAltTextimage-alt-textAlt text for the card's image. This is optional prop, but may be required for an image due to accessibility requirements. You can find guidance on when to add alt text to an image on the Ontario.ca web content editing guide. https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup for decorative images. If left as undefined, the alt attribute will not render in markup.string | undefined''
labellabelText to be displayed within the header.stringundefined
layoutDirectionlayout-directionThe layout direction/orientation of the card. If no type is passed, it will default to 'vertical'."horizontal" | "vertical" | undefined'vertical'

Built with StencilJS