ecardilly Design Components

Customer Dashboard Mvp 

<div class="container">
    <div class="row">
        <div class="grid-12 rte">
            <h1 class="h1">Alle deine eCards</h1>
            <p>Die du bei uns bestellt hast. Cool, oder?</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="item_action_menu row --between">
        <form class="form_single_input d_grid-6" accept-charset="UTF-8" method="get">
            <input type="text" name="search" id="search" placeholder="Search.." class="input" />
            <button type="submit" class="btn">Suchen
            </button>
        </form>

        <div class="d_grid-2">
            <a href="#new" class="btn btn--primary btn--fullwidth">
                <i class="ph-bold ph-basket"></i>
                <span>Zum Shop</span>
            </a>
        </div>
    </div>
</div>
<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">
    <div class="row">
        <div class="pagination d_grid-12 m_grid-4">
            <div class="text--subdued font--medium">Seite 1 von 3</div>
            <div class="btn_pair">
                <a href="#prev" class="btn btn--ghost btn--small">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <a href="#next" class="btn btn--small">
                    <i class="ph ph-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="container">
	<div class="row">
		<div class="grid-12 rte">
			<h1 class="h1">Alle deine eCards</h1>
			<p>Die du bei uns bestellt hast. Cool, oder?</p>
		</div>
	</div>
</div>

{{> @item_action_menu}}
{{> @item_list}}

<div class="container">
	<div class="row">
		{{> @pagination}}
	</div>
</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.