Card

<auro-card> is an HTML custom element that groups an image, a header, a description, and a call to action into one summary of information, such as a destination, offer, or article teaser. Add href to make the whole card a link.

Use cases

Use <auro-card> when you want to:

• Link to another page: Add href to make the whole card a link to a page, file, or section.
• Feature content: Show an offer, destination, or article that deserves attention.
• Group related information: Keep an image, header, description, and call to action together as one unit.
• Organize a page: Place cards in a row or grid so people can scan the page quickly.
• Summarize and lead to detail: Give a short overview that points to the full story.

Install

Define dependency in project

Import the component in each project that uses <auro-card>.

Use CDN

If your project can't process JS assets, use the pre-processed assets. Legacy browsers, such as IE11, aren't supported.

Basic example

Custom component registration for version management

Every Auro component has two key parts: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

Installing the component as described in the Install section imports the class and registers the component globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), register the class manually under a custom element name to avoid conflicts.

To do this, import only the component class and call the register(name) method with a unique name:

This creates a new custom element <custom-card> that behaves exactly like <auro-card>, allowing both to coexist on the same page without interfering with each other.