Canary components are unstable components that are released for testing purposes.

We value any feedback from users willing to try them in their applications.

These components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.

For more information on Canary components, read our approach to releases and versions .

Additional details on the props and events for this component can be found in the Canary web components and Canary React storybooks.

A horizontal card uses the same structure as clickable and static vertical cards, although presenting the content in a horizontal layout with the image on either the left or right.

Horizontal cards do not currently contain an interaction area.

Use a horizontal card when vertical space is limited and you need to display information about an item in a visually pleasing way.

Don’t use a horizontal card to display large amounts of content about an item, consider using a Data Table instead.

Horizontal cards utilise a heading area which controls interactions with the card. The heading area can be either static or clickable. If you need a card to contain an interaction area, consider using a vertical instead of horizontal card.

Interaction with a horizontal card containing a static heading is limited to the card menu.

A horizontal card with a clickable heading contains the card heading as a clickable link element.

Clickable cards contain one interaction, therefore text in the card body cannot be hidden.

Use the size options to resize the horizontal card to fit your design space. Match the selected size to other components in the same section so that they are aligned.

Use the small size when available width is limited and use the large size for a wide horizontal card display.

A horizontal card with a default layout has no margin between the image and card border, for a more compact styling.

Horizontal card content is similar to the static and clickable variants of Vertical card ; however, it does not include an interaction area.

The default horizontal card layout cannot contain a subheading or adornment due to space limitations.

The heading area can contain:

If an image is displayed, it can be placed to the left or right of the content.

Add a descriptive message within the card content section. Static cards can include a 'see more' link to expand hidden content.

Since clickable cards can only contain one interaction, text can't be hidden.