Multiple Cards Example

This demo shows how a developer can use multiple Auro Card components on a page in a flex container.

Usage

<script type="module">
    import '@aurodesignsystem/auro-card';
</script>

<auro-card>
    <img
        slot="image"
        src="https://picsum.photos/300/300?random=0"
        alt="Random insert"/>
    <auro-header slot="header" level="2" display="500">Display card title here</auro-header>
    <p slot="description">
        Context goes here.
    </p>
    <div slot="cta">
        <auro-hyperlink href="/" nav target="_blank">
            More info
        </auro-hyperlink>
    </div>
</auro-card>

How to install

npm install @aurodesignsystem/auro-card

Then later, in your code:

// To just get a component named 'auro-card'
import '@aurodesignsystem/auro-card';