<heroicc-deck>

HTML Web Component

The <heroicc-deck> component embeds a Digimon deck on your site.

A legal deck representation shows the languages the deck is able to compete in. This is followed by a breakdown of the cards within the deck by card category, level, and colour. And then the deck code itself that can be copied. All of this information is overlaid on top of the "deck icon"; a card to represent the deck chosen by the deck author.

The name of the deck beneath the card links to the deck page on Heroicc.

The following example shows a legal deck that is valid for a variety of different languages and has a deck icon to represent the deck as a whole (ST1-11 WarGreymon).

<heroicc-deck lang="en" data-deck-code="DCGUbtlgJydAUEDAZydAU8DAgMBAwEDAQMBAQEDAQMBAQEBAQMBAwEDAQEBAQFTVDEtMTEgIFN0YXJ0ZXIgRGVjaywgR2FpYSBSZWQgW1NULTFd">
    <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-deck.css?v=4a563a5" />
    <div class="overlay">
        <header>
            <dl class="deck-languages">
                <dt class="sr-only">Deck Languages</dt>
                <dd class="pill">
                    <abbr title="Japanese">ja</abbr>
                </dd>
                <dd class="pill">
                    <abbr title="English">en</abbr>
                </dd>
                <dd class="pill">
                    <abbr title="Chinese (Simplified)">zh-Hans</abbr>
                </dd>
                <dd class="pill">
                    <abbr title="Korean">ko</abbr>
                </dd>
            </dl>
        </header>
        <div>
            <div>
                <strong>Digi-Egg</strong>
                <label for="progress-0">
                    <span>
                        <span>4 cards </span>
                        <small>(4 Red)</small>
                    </span>
                    <progress id="progress-0" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="4">4 cards</progress>
                </label>
                <strong>Lv.3</strong>
                <label for="progress-1">
                    <span>
                        <span>12 cards </span>
                        <small>(12 Red)</small>
                    </span>
                    <progress id="progress-1" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="12">12 cards</progress>
                </label>
                <strong>Lv.4</strong>
                <label for="progress-2">
                    <span>
                        <span>10 cards </span>
                        <small>(10 Red)</small>
                    </span>
                    <progress id="progress-2" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="10">10 cards</progress>
                </label>
                <strong>Lv.5</strong>
                <label for="progress-3">
                    <span>
                        <span>8 cards </span>
                        <small>(8 Red)</small>
                    </span>
                    <progress id="progress-3" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="8">8 cards</progress>
                </label>
                <strong>Lv.6</strong>
                <label for="progress-4">
                    <span>
                        <span>4 cards </span>
                        <small>(4 Red)</small>
                    </span>
                    <progress id="progress-4" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="4">4 cards</progress>
                </label>
                <strong>Tamer</strong>
                <label for="progress-7">
                    <span>
                        <span>4 cards </span>
                        <small>(4 Red)</small>
                    </span>
                    <progress id="progress-7" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="4">4 cards</progress>
                </label>
                <strong>Option</strong>
                <label for="progress-8">
                    <span>
                        <span>12 cards </span>
                        <small>(12 Red)</small>
                    </span>
                    <progress id="progress-8" style="--gradient:linear-gradient(to right,#E90022 100.0%,#E90022 100.0%);" max="12" value="12">12 cards</progress>
                </label>
            </div>
        </div><heroicc-copyable data-select-all="">
            <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-copyable.css?v=4a563a5" />
            <script type="module" src="https://assets.heroi.cc/js/heroicc-copyable.js?v=4a563a5"></script>
            <pre><code>DCGUbtlgJydAUEDAZydAU8DAgMBAwEDAQMBAQEDAQMBAQEBAQMBAwEDAQEBAQFTVDEtMTEgIFN0YXJ0ZXIgRGVjaywgR2FpYSBSZWQgW1NULTFd</code></pre>
        </heroicc-copyable>
    </div><heroicc-card lang="en" data-card-id="ST1-11">
        <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>
        <span aria-hidden="true">ST1-11 WarGreymon</span>
        <picture>
            <img width="430" height="600" loading="lazy" alt="" src="https://images.heroi.cc/cards/en/ST1-11.webp" />
        </picture>
    </heroicc-card>
    <span class="credit">
        <a href="https://heroi.cc/decks/DCGUbtlgJydAUEDAZydAU8DAgMBAwEDAQMBAQEDAQMBAQEBAQMBAwEDAQEBAQFTVDEtMTEgIFN0YXJ0ZXIgRGVjaywgR2FpYSBSZWQgW1NULTFd">Starter Deck, Gaia Red [ST-1]</a>
        <span> on </span>
        <a href="https://heroi.cc">Heroicc</a>
    </span>
</heroicc-deck>
Deck Languages
ja
en
zh-Hans
ko
Digi-EggLv.3Lv.4Lv.5Lv.6TamerOption
DCGUbtlgJydAUEDAZydAU8DAgMBAwEDAQMBAQEDAQMBAQEBAQMBAwEDAQEBAQFTVDEtMTEgIFN0YXJ0ZXIgRGVjaywgR2FpYSBSZWQgW1NULTFd
Starter Deck, Gaia Red [ST-1] on Heroicc

§ Incomplete Deck

When a deck is incomplete or otherwise not legal for play in any official language it has no languages visible.

You'll also note that this deck lacks a deck icon card so the default card backing is shown by default.

<heroicc-deck lang="en" data-deck-code="DCGUABPAEluY29tcGxldGUgRGVjaw">
    <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-deck.css?v=4a563a5" />
    <div class="overlay">
        <header></header>
        <div>
            <div></div>
        </div><heroicc-copyable data-select-all="">
            <link rel="stylesheet" href="https://assets.heroi.cc/css/components/heroicc-copyable.css?v=4a563a5" />
            <script type="module" src="https://assets.heroi.cc/js/heroicc-copyable.js?v=4a563a5"></script>
            <pre><code>DCGUABPAEluY29tcGxldGUgRGVjaw</code></pre>
        </heroicc-copyable>
    </div><heroicc-card></heroicc-card>
    <span class="credit">
        <a href="https://heroi.cc/decks/DCGUABPAEluY29tcGxldGUgRGVjaw">Incomplete Deck</a>
        <span> on </span>
        <a href="https://heroi.cc">Heroicc</a>
    </span>
</heroicc-deck>

DCGUABPAEluY29tcGxldGUgRGVjaw
Incomplete Deck on Heroicc