<heroicc-card>

HTML Web Component

The <heroicc-card> component has a few configuration options for embedding a Digimon card on your site.

§ Default Embed

The default embed code has the card image and attribution that links back to Heroicc and the specific card page.

<heroicc-card lang="en" data-card-id="EX2-008_P1">
    <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-card.css?v=4a563a5" />
    <script type="module" src="https://assets.heroi.cc/js/heroicc-card.js?v=4a563a5"></script>
    <picture>
        <img width="430" height="600" loading="lazy" alt="EX2-008 Guilmon · Alternate Art #1" src="https://images.heroi.cc/cards/en/EX2-008_P1.webp" />
    </picture>
    <span class="credit">
        <a href="https://heroi.cc/cards/en/EX2-008_P1">EX2-008 Guilmon<span> · </span>
            <small>
                <em>Alternate Art #1</em>
            </small>
        </a>
        <span> on </span>
        <a href="https://heroi.cc">Heroicc</a>
    </span>
</heroicc-card>

EX2-008 Guilmon · Alternate Art #1 on Heroicc

§ Showcase

The data-showcase attribute animates the card on a loop. The card back for a digi-egg card requires also specifying data-category="digi-egg".

<heroicc-card lang="en" data-card-id="EX2-025_P1" data-showcase>
    <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-card.css?v=4a563a5" />
    <script type="module" src="https://assets.heroi.cc/js/heroicc-card.js?v=4a563a5"></script>
    <picture>
        <img width="430" height="600" loading="lazy" alt="EX2-025 Terriermon · Alternate Art #1" src="https://images.heroi.cc/cards/en/EX2-025_P1.webp" />
    </picture>
    <span class="credit">
        <a href="https://heroi.cc/cards/en/EX2-025_P1">EX2-025 Terriermon<span> · </span>
            <small>
                <em>Alternate Art #1</em>
            </small>
        </a>
        <span> on </span>
        <a href="https://heroi.cc">Heroicc</a>
    </span>
</heroicc-card>

EX2-025 Terriermon · Alternate Art #1 on Heroicc

§ Interactive

The data-interactive attribute responds to the user's pointer/touch location on the card.

<heroicc-card lang="en" data-card-id="EX2-019_P1" data-interactive>
    <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-card.css?v=4a563a5" />
    <script type="module" src="https://assets.heroi.cc/js/heroicc-card.js?v=4a563a5"></script>
    <picture>
        <img width="430" height="600" loading="lazy" alt="EX2-019 Renamon · Alternate Art #1" src="https://images.heroi.cc/cards/en/EX2-019_P1.webp" />
    </picture>
    <span class="credit">
        <a href="https://heroi.cc/cards/en/EX2-019_P1">EX2-019 Renamon<span> · </span>
            <small>
                <em>Alternate Art #1</em>
            </small>
        </a>
        <span> on </span>
        <a href="https://heroi.cc">Heroicc</a>
    </span>
</heroicc-card>

EX2-019 Renamon · Alternate Art #1 on Heroicc