ecardilly Design Components

Preview Orderpages 

<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--public">
    <header class="header">
        <div class="container">
            <div class="row --between --acenter">
                <div class="d_grid-4 m_grid-2">
                    <a href="/" class="logo">
                        <img src="../../ecardilly.svg" alt="ecardilly" width="171" height="32" />
                    </a>
                </div>

                <div class="button_navigation d_grid-8 m_grid-2">
                    <a href="#register" class="btn btn--small btn--ghost">
                        Registrieren
                    </a>
                    <a href="#login" class="btn btn--small btn--primary">Login</a>
                </div>
            </div>
        </div>
    </header>

    <ul class="toast_list">
        <li class="toast --info">
            <div class="toast_icon"><i class="ph ph-bold ph-check-circle"></i></div>
            <div class="toast_message">URL in die Zwischenlage kopiert</div>
        </li>
    </ul>

    <main class="main"></main>

    <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>
</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--public">
		{{> @header }}

		<ul class="toast_list">
			<li class="toast --info">
				<div class="toast_icon"><i class="ph ph-bold ph-check-circle"></i></div>
				<div class="toast_message">URL in die Zwischenlage kopiert</div>
			</li>
		</ul>

		<main class="main">{{{yield}}}</main>

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

No notes defined.