ecardilly Design Components

Preview App 

<html>

<head>
    <title>ecardilly • Components</title>

    <!-- // SEO META -->
    <meta charset="utf-8" />

    <!-- // FUNCTIONAL META -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="theme-color" content="#f5c346" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2"></script>

    <!-- // ASSETS -->
    <link href="../../compodilly.min.css?v=c7e0ad3" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../application.min.js?v=c7e0ad3" defer></script>

</head>

<body class="layout--app">
    <aside class="app_sidebar">
        <header>
            <a href="/" class="logo">
                <img src="../../ecardilly.svg" alt="ecardilly" width="171" height="32" />
            </a>

            <button type="button" class="btn btn--ghost --no_desktop" data-toggle-menu="">
                <i class="ph ph-bold ph-list ph--large"></i>
            </button>
        </header>

        <section class="drawer" data-menu="">
            <nav class="app_menu">
                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="--active">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="--new">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>

                <a href="#galleries" class="--comingsoon">
                    <i class="ph ph-bold ph-grid-nine"></i>
                    <span>Fotowände</span>
                </a>
            </nav>

            <nav class="app_menu">
                <a href="#support">
                    <i class="ph ph-bold ph-question"></i>
                    <span>Support</span>
                </a>
            </nav>

            <div class="divider">
                <span class="divider_title">Admin</span>
            </div>

            <nav class="app_menu --admin">
                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>

                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>

                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>
            </nav>
            <nav class="app_menu --admin">
                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>

                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>

                <a href="#menu">
                    <i class="ph ph-bold ph-storefront"></i>
                    <span>Shop</span>
                </a>

                <a href="#ecards" class="">
                    <i class="ph ph-bold ph-cards"></i>
                    <span>eCards</span>
                </a>

                <a href="#events" class="">
                    <i class="ph ph-bold ph-calendar-heart"></i>
                    <span>Events</span>
                </a>
            </nav>

            <div class="stretcher"></div>

            <div class="app_account">
                <div>
                    <strong class="font--small text--subdued">
                        <i class="ph-bold ph-user-circle"></i>
                        kleiber.huegel@gmail.com
                    </strong>
                    <a href="#logout" class="btn btn--tiny">Logout</a>
                </div>

                <div>
                    <strong class="font--small text--subdued">
                        <i class="ph-bold ph-storefront"></i>
                        demo-store.myshopify.com
                    </strong>
                </div>
            </div>
        </section>

    </aside>

    <ul class="toast_list">
    </ul>

    <main class="main">
        <div class="yield flow--two">

        </div>

        <footer class="footer--minimal">
            <div class="container">
                <div class="row">
                    <div class="d_grid-12">
                        © 2025 eCardilly – Alle Rechte vorbehalten –
                        <a href="#impressum" class="ahref--subdued">Impressum</a>
                    </div>
                </div>
            </div>
        </footer>
    </main>
</body>

</html>
 
<html>
	<head>
		<title>ecardilly • Components</title>

		<!-- // SEO META -->
		<meta charset="utf-8" />

		<!-- // FUNCTIONAL META -->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, user-scalable=no"
		/>
		<meta name="theme-color" content="#f5c346" />

		{{! OUTSIDE ASSETS }}
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
			rel="stylesheet"
		/>
		<script
			src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2"
		></script>

		<!-- // ASSETS -->
		<link
			href="{{path '/compodilly.min.css'}}?v={{buildId}}"
			rel="stylesheet"
			type="text/css"
		/>
		<script
			type="text/javascript"
			src="{{path '/application.min.js'}}?v={{buildId}}"
			defer
		></script>

	</head>
	<body class="layout--app">
		{{> @app_menu}}

		<ul class="toast_list">
			{{#if toast}}
				<li class="toast --error">
					<div class="toast_icon"><i class="ph-bold ph-warning-circle"></i></div>
					<div class="toast_message">Error 420 – Das hat nicht geklappt</div>
				</li>
			{{/if}}
		</ul>


		<main class="main">
			<div class="yield flow--two">
				{{{yield}}}
			</div>

			{{> @footer modifier="footer--minimal" }}
		</main>
	</body>
</html>
 
/* No context defined. */

No notes defined.