ecardilly Design Components

Customer Dashboard 

<div class="container">
    <div class="row">
        <div class="grid-12 rte">
            <h1 class="h1">Hello, dear Customer!</h1>
            <p>Hier findest du alles zu deinen Events. Von der Vorbereitung bis zum Feiern - alles digital!</p>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <ul class="action_prompts d_grid-12">
            <li>
                <a href="#action" class="--no_style">
                    <div class="ap_icon">
                        <i class="ph ph-bold ph-cards"></i>
                    </div>

                    <div class="ap_desc">
                        <strong>eCard gestalten</strong>
                        <p class="font--medium">
                            Schnell &amp; liebevoll online erstellen.
                        </p>
                    </div>

                    <button type="button" class="btn btn--primary btn--tiny">
                        <i class="ph ph-bold ph-plus-circle"></i>
                        <span>eCard erstellen</span>
                    </button>
                </a>
            </li>
            <li>
                <a href="#action" class="--no_style">
                    <div class="ap_icon">
                        <i class="ph ph-bold ph-calendar-heart"></i>
                    </div>

                    <div class="ap_desc">
                        <strong>Event organisieren</strong>
                        <p class="font--medium">
                            Alles für dein Fest an einem Ort.
                        </p>
                    </div>

                    <button type="button" class="btn btn--primary btn--tiny">
                        <i class="ph ph-bold ph-plus-circle"></i>
                        <span>Eventseite erstellen</span>
                    </button>
                </a>
            </li>
            <li>
                <a href="#action" class="--no_style">
                    <div class="ap_icon">
                        <i class="ph ph-bold ph-grid-nine"></i>
                    </div>

                    <div class="ap_desc">
                        <strong>Deine Fotowand</strong>
                        <p class="font--medium">
                            Halte eure schönsten Momente fest.
                        </p>
                    </div>

                    <button type="button" class="btn btn--primary btn--tiny">
                        <i class="ph ph-bold ph-plus-circle"></i>
                        <span>Fotowand erstellen</span>
                    </button>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="row">
        <ul class="flextable d_grid-12">
            <li class="ft_header">
                <div>
                    <span>Bestellung</span>
                    <span class="span_2">Kunde</span>
                    <span>Art</span>
                    <span>Preis</span>
                    <span>Datum</span>
                    <span>Status</span>
                    <span>&nbsp;</span>
                </div>
            </li>

            <li>
                <a href="#item_#12345-1" class="--no_style">
                    <span>#12345-1</span>
                    <span class="span_2">Mona Müller</span>
                    <span>eCard</span>
                    <span>13,50 €</span>
                    <span>07.07.2025</span>
                    <span><span class="pill --green">Veröffentlicht</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
            <li>
                <a href="#item_#12346-2" class="--no_style">
                    <span>#12346-2</span>
                    <span class="span_2">Hans Weber</span>
                    <span>Event</span>
                    <span>8,90 €</span>
                    <span>06.07.2025</span>
                    <span><span class="pill --yellow">Entwurf</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
            <li>
                <a href="#item_#12347-3" class="--no_style">
                    <span>#12347-3</span>
                    <span class="span_2">Anna Schmidt</span>
                    <span>Fotowand</span>
                    <span>15,20 €</span>
                    <span>05.07.2025</span>
                    <span><span class="pill --green">Veröffentlicht</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
            <li>
                <a href="#item_#12348-4" class="--no_style">
                    <span>#12348-4</span>
                    <span class="span_2">Thomas Fischer</span>
                    <span>eCard</span>
                    <span>12,75 €</span>
                    <span>04.07.2025</span>
                    <span><span class="pill --red">Gelöscht</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
            <li>
                <a href="#item_#12349-5" class="--no_style">
                    <span>#12349-5</span>
                    <span class="span_2">Sarah Wagner</span>
                    <span>Event</span>
                    <span>9,99 €</span>
                    <span>03.07.2025</span>
                    <span><span class="pill --yellow">Entwurf</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
            <li>
                <a href="#item_#12350-6" class="--no_style">
                    <span>#12350-6</span>
                    <span class="span_2">Peter Klein</span>
                    <span>Fotowand</span>
                    <span>22,40 €</span>
                    <span>02.07.2025</span>
                    <span><span class="pill --green">Veröffentlicht</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
            <li>
                <a href="#item_#12351-7" class="--no_style">
                    <span>#12351-7</span>
                    <span class="span_2">Lisa Hoffmann</span>
                    <span>eCard</span>
                    <span>11,80 €</span>
                    <span>01.07.2025</span>
                    <span><span class="pill --red">Gelöscht</span></span>
                    <span>
                        <button type="button" class="btn btn--ghost">
                            <i class="ph ph-pencil-simple-line"></i>
                        </button>
                    </span>
                </a>
            </li>
        </ul>

        <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">Hello, dear Customer!</h1>
			<p>Hier findest du alles zu deinen Events. Von der Vorbereitung bis zum Feiern - alles digital!</p>
		</div>
	</div>
</div>
{{> @action_prompt actions=actions}}
{{> @flextable orders=orders}}
 
{
  "orders": [
    {
      "id": "#12345-1",
      "customer": "Mona Müller",
      "type": "eCard",
      "price": "13,50 €",
      "date": "07.07.2025",
      "status": "Veröffentlicht",
      "statusClass": "--green"
    },
    {
      "id": "#12346-2",
      "customer": "Hans Weber",
      "type": "Event",
      "price": "8,90 €",
      "date": "06.07.2025",
      "status": "Entwurf",
      "statusClass": "--yellow"
    },
    {
      "id": "#12347-3",
      "customer": "Anna Schmidt",
      "type": "Fotowand",
      "price": "15,20 €",
      "date": "05.07.2025",
      "status": "Veröffentlicht",
      "statusClass": "--green"
    },
    {
      "id": "#12348-4",
      "customer": "Thomas Fischer",
      "type": "eCard",
      "price": "12,75 €",
      "date": "04.07.2025",
      "status": "Gelöscht",
      "statusClass": "--red"
    },
    {
      "id": "#12349-5",
      "customer": "Sarah Wagner",
      "type": "Event",
      "price": "9,99 €",
      "date": "03.07.2025",
      "status": "Entwurf",
      "statusClass": "--yellow"
    },
    {
      "id": "#12350-6",
      "customer": "Peter Klein",
      "type": "Fotowand",
      "price": "22,40 €",
      "date": "02.07.2025",
      "status": "Veröffentlicht",
      "statusClass": "--green"
    },
    {
      "id": "#12351-7",
      "customer": "Lisa Hoffmann",
      "type": "eCard",
      "price": "11,80 €",
      "date": "01.07.2025",
      "status": "Gelöscht",
      "statusClass": "--red"
    }
  ],
  "actions": [
    {
      "icon": "ph-cards",
      "title": "eCard gestalten",
      "description": "Schnell & liebevoll online erstellen.",
      "button_text": "eCard erstellen",
      "href": "#action"
    },
    {
      "icon": "ph-calendar-heart",
      "title": "Event organisieren",
      "description": "Alles für dein Fest an einem Ort.",
      "button_text": "Eventseite erstellen",
      "href": "#action"
    },
    {
      "icon": "ph-grid-nine",
      "title": "Deine Fotowand",
      "description": "Halte eure schönsten Momente fest.",
      "button_text": "Fotowand erstellen",
      "href": "#action"
    }
  ]
}

No notes defined.