ecardilly Design Components

Flextable 

<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">
		<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>

			{{#each orders}}
				<li>
					<a href="#item_{{id}}" class="--no_style">
						<span>{{id}}</span>
						<span class="span_2">{{customer}}</span>
						<span>{{type}}</span>
						<span>{{price}}</span>
						<span>{{date}}</span>
						<span><span
								class="pill {{statusClass}}"
							>{{status}}</span></span>
						<span>
							<button type="button" class="btn btn--ghost">
								<i class="ph ph-pencil-simple-line"></i>
							</button>
						</span>
					</a>
				</li>
			{{/each}}
		</ul>

		{{> @pagination}}
	</div>
</div>
 
{
  "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"
    }
  ]
}

No notes defined.