ecardilly Design Components

Item List 

<div class="container">
    <ul class="item_list row">
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <video id="videocard-0" src="https://ucarecdn.com/bcc3a5a4-8b3d-4323-bd18-027b81000426/ecardilly202507222ixr1qh.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                    </video>
                </div>

                <div class="item_desc">
                    <span>#64189</span>
                    <strong>WhatsApp Einladung &quot;18. Geburtstag&quot;</strong>
                    <p class="text--subdued">vor 3 Wochen</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <video id="videocard-1" src="https://ucarecdn.com/e5e65a25-cacc-45c4-851a-dd12d4d1059c/ecardilly202507212figjmw.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                    </video>
                </div>

                <div class="item_desc">
                    <span>#64190</span>
                    <strong>Einladung Kindergeburtstag &quot;Girlande&quot;</strong>
                    <p class="text--subdued">vor 1 Woche</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <video id="videocard-2" src="https://ucarecdn.com/a0b0d28e-bde6-4b9f-80aa-c352f4adbe04/ecardilly202507212ldhrtl.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                    </video>
                </div>

                <div class="item_desc">
                    <span>#64191</span>
                    <strong>Karte Viel Glück - Good Luck</strong>
                    <p class="text--subdued">vor 2 Tagen</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <video id="videocard-3" src="https://ucarecdn.com/c59ded37-dca1-4b80-9287-d0b2efddd3df/ecardilly2025072021ssfyd.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                    </video>
                </div>

                <div class="item_desc">
                    <span>#64192</span>
                    <strong>Karte Viel Glück - Glücksbogen</strong>
                    <p class="text--subdued">vor 5 Tagen</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <video id="videocard-4" src="https://ucarecdn.com/c5c97215-dd9d-4fd5-9eb0-31199846d2af/ecardilly2025072026zud57.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                    </video>
                </div>

                <div class="item_desc">
                    <span>#64193</span>
                    <strong>WhatsApp Glückwunschkarte - Viel Glück</strong>
                    <p class="text--subdued">vor 1 Tag</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <video id="videocard-5" src="https://ucarecdn.com/075fa995-732c-47da-94cd-fe1b1d8c6ef9/ecardilly2025072026ux6uj.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                    </video>
                </div>

                <div class="item_desc">
                    <span>#64194</span>
                    <strong>Einladung Hochzeit - Elegante Rose</strong>
                    <p class="text--subdued">vor 4 Tagen</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <img src="../../dummy_cards/65e4d252021e230280bc354f8c233e1a.webp" alt="ecard" width="90" height="160" />
                </div>

                <div class="item_desc">
                    <span>#64195</span>
                    <strong>Geburtstagskarte - Bunter Ballon</strong>
                    <p class="text--subdued">vor 6 Tagen</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                <div class="media_ecard">
                    <img src="../../dummy_cards/cb616c6b8c5cf0f87585f11c6a6be3d1.webp" alt="ecard" width="90" height="160" />
                </div>

                <div class="item_desc">
                    <span>#64196</span>
                    <strong>Dankeskarte - Herzliche Grüße</strong>
                    <p class="text--subdued">vor 2 Wochen</p>

                </div>
                <div class="btn_wrap --center">
                    <a href="#open" class="btn btn--small">Öffnen</a>
                </div>
            </div>
        </li>
    </ul>
</div>
 
<div class="container">
    <ul class="item_list row">
        {{#each items}}
        <li class="item_card d_grid-3 m_grid-2">
            <div>
                {{> @media_ecard_thumbnail mediaUrl=mediaUrl mediaType=mediaType}}

                <div class="item_desc">
                    <span>#{{id}}</span>
                    <strong>{{title}}</strong>
                    <p class="text--subdued">{{timeAgo}}</p>

                </div>
				<div class="btn_wrap --center">
					<a href="#open" class="btn btn--small">Öffnen</a>
				</div>
            </div>
        </li>
        {{/each}}
    </ul>
</div>
 
{
  "items": [
    {
      "id": "64189",
      "title": "WhatsApp Einladung \"18. Geburtstag\"",
      "timeAgo": "vor 3 Wochen",
      "mediaUrl": "https://ucarecdn.com/bcc3a5a4-8b3d-4323-bd18-027b81000426/ecardilly202507222ixr1qh.mp4",
      "mediaType": "video"
    },
    {
      "id": "64190",
      "title": "Einladung Kindergeburtstag \"Girlande\"",
      "timeAgo": "vor 1 Woche",
      "mediaUrl": "https://ucarecdn.com/e5e65a25-cacc-45c4-851a-dd12d4d1059c/ecardilly202507212figjmw.mp4",
      "mediaType": "video"
    },
    {
      "id": "64191",
      "title": "Karte Viel Glück - Good Luck",
      "timeAgo": "vor 2 Tagen",
      "mediaUrl": "https://ucarecdn.com/a0b0d28e-bde6-4b9f-80aa-c352f4adbe04/ecardilly202507212ldhrtl.mp4",
      "mediaType": "video"
    },
    {
      "id": "64192",
      "title": "Karte Viel Glück - Glücksbogen",
      "timeAgo": "vor 5 Tagen",
      "mediaUrl": "https://ucarecdn.com/c59ded37-dca1-4b80-9287-d0b2efddd3df/ecardilly2025072021ssfyd.mp4",
      "mediaType": "video"
    },
    {
      "id": "64193",
      "title": "WhatsApp Glückwunschkarte - Viel Glück",
      "timeAgo": "vor 1 Tag",
      "mediaUrl": "https://ucarecdn.com/c5c97215-dd9d-4fd5-9eb0-31199846d2af/ecardilly2025072026zud57.mp4",
      "mediaType": "video"
    },
    {
      "id": "64194",
      "title": "Einladung Hochzeit - Elegante Rose",
      "timeAgo": "vor 4 Tagen",
      "mediaUrl": "https://ucarecdn.com/075fa995-732c-47da-94cd-fe1b1d8c6ef9/ecardilly2025072026ux6uj.mp4",
      "mediaType": "video"
    },
    {
      "id": "64195",
      "title": "Geburtstagskarte - Bunter Ballon",
      "timeAgo": "vor 6 Tagen",
      "mediaUrl": "/dummy_cards/65e4d252021e230280bc354f8c233e1a.webp"
    },
    {
      "id": "64196",
      "title": "Dankeskarte - Herzliche Grüße",
      "timeAgo": "vor 2 Wochen",
      "mediaUrl": "/dummy_cards/cb616c6b8c5cf0f87585f11c6a6be3d1.webp"
    }
  ]
}

No notes defined.