ecardilly Design Components

Eventpage: Preview 

<div class="template--eventpage">
    <section class="event_hero">
        <div class="container">
            <div class="row --center">
                <div class="media_ecard ">
                    <img src="../../ecard_001.webp" alt="ecard" width="90" height="160" />
                </div>
            </div>
        </div>
    </section>
    <section class="event_teaser">
        <div class="container">
            <div class="row --center">
                <div class="d_grid-9 m_grid-4 text--center">
                    <h1 class="h0">Ich werde 37</h1>
                    <div class="rte font--large">
                        <p>Und was könnte da wohl anstehen - eine
                            <strong>Mottoparty</strong>! Lasst uns einen
                            wunderschönen Abend haben und im Spukschloss Hügel
                            feiern.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="event_date">
        <div class="container">
            <div class="row --center">
                <div class="d_grid-9 flow--half flow--center">
                    <div class="title_icon">
                        <i class="ph-bold ph-calendar-heart"></i>
                    </div>
                    <h3 class="h3">Datum</h3>
                    <p>am Dienstag den 17. Februar 2026 von 14 Uhr bis 23 Uhr</p>
                    <a href="../../dummy.ics" class="btn btn--small">
                        <i class="ph-bold ph-plus-circle"></i>
                        <span>
                            Termin im Kalender speichern
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="event_location">
        <div class="container">
            <div class="row --center">
                <div class="d_grid-6 flow--one flow--center">
                    <div class="title_icon">
                        <i class="ph-bold ph-map-pin-line"></i>
                    </div>

                    <div class="description">
                        <h3 class="h3">Spukschloss Hügel</h3>
                        <p>buero huegel, H7 37, 68159 Mannheim</p>
                    </div>

                    <div class="media_iframe">
                        <iframe src="https://www.google.com/maps?q=buero+huegel,+H7+37,+68159+Mannheim&output=embed" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>

                    <div class="directions rte">Kurz vorm Burgtor liegt links ein
                        geheimer Pfad. Klopft 3x mal an der alten Eiche und ein
                        Zombie erscheint, der euch den Weg zum Parkplatz freigibt.</div>

                    <a href="https://www.google.com/maps?q=buero+huegel,+H7+37,+68159+Mannheim" target="_blank" class="btn btn--small">
                        <i class="ph-bold ph-arrow-square-out"></i>
                        <span>In Google Maps öffnen</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="event_playlist">
        <div class="container">
            <div class="row --center">
                <div class="d_grid-9 flow--one flow--center">
                    <div class="title_icon">
                        <i class="ph-bold ph-cassette-tape"></i>
                    </div>
                    <h3 class="h3">Musikliste</h3>

                    <div class="media_iframe --applemusic*">
                        <iframe src="https://open.spotify.com/embed/playlist/5cItqUKT7Ieq0haLUSnxp9?utm_source=generator&theme=1" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="event_wishlist">
        <div class="container">
            <div class="row --center">
                <div class="d_grid-9 flow--one flow--center">
                    <div class="title_icon">
                        <i class="ph-bold ph-gift"></i>
                    </div>
                    <h3 class="h3">Meine Wunschliste</h3>

                    <ul class="wishlist">
                        <li>
                            <a class="button_pill" href="https://www.goldengoose.com/es/es/calcetines-de-algod%C3%B3n-efecto-desgastado-blanco-con-rayas-rojas-y-azul-marino-cod-8050235509061.html?utm_source&#x3D;google&amp;utm_medium&#x3D;cpc&amp;utm_campaign&#x3D;gg_ao.es.restodeiprodotti.pmax.conv.perf_cpc_google_conv_purchase__perf&amp;gclsrc&#x3D;aw.ds&amp;gad_source&#x3D;1&amp;gad_campaignid&#x3D;17336183916&amp;gbraid&#x3D;0AAAAAC4YWtfaGVII3BBb8ofioj2xcjgeB&amp;gclid&#x3D;Cj0KCQiArt_JBhCTARIsADQZaymHCxwDtMgcXD8brLDeUwVkH4fcK_-e0Bcm1zioUd58Hl8gTmsm3GoaAvufEALw_wcB" target="_blank">
                                <span>Socken</span>
                                <i class="ph-bold ph-arrow-square-out"></i>
                            </a>
                        </li>
                        <li>
                            <a class="button_pill" href="https://www.lego.com/es-es/product/medieval-horse-knight-castle-31168?cmp&#x3D;KAC-INI-GOOGEU-GO-ES-ES-SP-BUY-SHOP-PLA-BP-SP-RN-Shopping&amp;ef_id&#x3D;Cj0KCQiArt_JBhCTARIsADQZaymXcJOf1LoTzZFqDjyy-GLPIW_3he_96g9PRON3PwwxmssNMBybZbwaAgwDEALw_wcB:G:s&amp;s_kwcid&#x3D;AL!933!3!!!!x!!!19829032441!&amp;cmp&#x3D;KAC-INI-GOOGEU-GO-ES_GL-ES-RE-SP-BUY-CREATE-MB_ALWAYS_ON-SHOP-BP-PMAX-ALL-CIDNA00000-PMAX-MEDIUM_PRIORITY&amp;gad_source&#x3D;1" target="_blank">
                                <span>Lego Ritterburg</span>
                                <i class="ph-bold ph-arrow-square-out"></i>
                            </a>
                        </li>
                        <li>
                            <a class="button_pill" href="https://www.ecardilly.de/" target="_blank">
                                <span>Keine Deadlines mehr</span>
                                <i class="ph-bold ph-arrow-square-out"></i>
                            </a>
                        </li>
                        <li>
                            <a class="button_pill" href="https://www.akaipro.com/mpc-live-3.html" target="_blank">
                                <span>MPC Live III</span>
                                <i class="ph-bold ph-arrow-square-out"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

</div>
<div>&nbsp;</div>
 
<div class="template--eventpage">
	{{> @event_hero}}
	{{> @event_teaser}}
	{{> @event_date}}
	{{{render "@event_location"}}}
	{{> @event_playlist}}
	{{{render "@event_wishlist"}}}
</div>
<div>&nbsp;</div>
 
/* No context defined. */

No notes defined.