Skip to Main Content
Let's Talk
<section class="relative overflow-hidden" data-background-transition="{{ background.color }}"> <div class="{{ padding }}"> <div class="container intro intro-slide-up"> <div class="flex flex-col sm:flex-row items-center justify-center -mx-8 -my-4"> <div class="relative px-8 py-4"> <svg class="absolute inset-0 w-full h-full text-accent transition-colors duration-500 ease-linear"> <use class="opacity-0" xlink:href="#svg-scribble"/> </svg> <h2 class="relative text-2xl sm:text-3xl text-center sm:text-left"> {{ block.heading|striptags('<br><em><a>')|trim|raw }} </h2> </div> <div class="px-8 py-4"> {{ block.button.link({ class: 'button button-blue' }) }} </div> </div> </div> </div> </section>
export default els => { const components = { 'animation': () => import('./components/Animation.svelte' /* webpackChunkName: 'animation' */), 'cursor': () => import('./components/Cursor.svelte' /* webpackChunkName: 'cursor' */), 'badge': () => import('./components/Badge.svelte' /* webpackChunkName: 'badge' */), 'code': () => import('./components/Code.svelte' /* webpackChunkName: 'code' */), 'tabbed-content': () => import('./components/TabbedContent.svelte' /* webpackChunkName: 'tabbed-content' */), 'featurette': () => import('./components/Featurette.svelte' /* webpackChunkName: 'featurette' */), 'mailchimp': () => import('./components/Mailchimp.svelte' /* webpackChunkName: 'mailchimp' */), 'news-updates': () => import('./components/NewsUpdates.svelte' /* webpackChunkName: 'news-updates' */) }; els.forEach(target => { const component = target.getAttribute('component'); const request = components[component]; if (request) { Promise.all([ request(), import('./store' /* webpackChunkName: 'store' */) ]).then(([ { default: Component }, { default: store } ]) => { const slot = target.innerHTML; target.innerHTML = ''; new Component({ target, store, props: { slot, ...target.dataset } }); }); } }); };
<?php namespace Modules; use Craft; use craft\web\View; use yii\base\Event; use craft\services\Assets; use craft\events\TemplateEvent; use craft\helpers\StringHelper; use craft\events\ReplaceAssetEvent; class App extends \yii\base\Module { public function init() { Craft::setAlias('@Modules', __DIR__); if (Craft::$app->getRequest()->getIsConsoleRequest()) { $this->controllerNamespace = 'Modules\\Console\\Controllers'; } else { $this->controllerNamespace = 'Modules\\Controllers'; } if (Craft::$app->request->getIsCpRequest()) { Event::on( View::class, View::EVENT_BEFORE_RENDER_TEMPLATE, function (TemplateEvent $event) { $view = Craft::$app->getView(); $view->registerCss(' .button { display: inline-block; margin-top: 0.5rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: bold; } .button:hover { text-decoration: none; } .button.button-primary { padding: 0.5rem 1rem; border: 3px solid currentcolor; } .color-swatches { padding: 0 3px 3px 3px; } .text-lg { font-size: 1.125rem; } .font-bold { font-weight: 800; } .uppercase { text-transform: uppercase; } '); } ); } else { Event::on( View::class, View::EVENT_AFTER_RENDER_PAGE_TEMPLATE, function (TemplateEvent $event) { $event->output = str_replace( '', '<x-svelte component="mailchimp"></x-svelte>', $event->output ); } ); } Event::on( Assets::class, Assets::EVENT_BEFORE_REPLACE_ASSET, function (ReplaceAssetEvent $asset) { $asset->filename = implode('.', [ pathinfo($asset->filename, PATHINFO_FILENAME), StringHelper::randomStringWithChars('abcdefghijklmnopqrstuvwxyz0123456789', 7), strtolower(pathinfo($asset->filename, PATHINFO_EXTENSION)) ]); } ); } }
.intro { @apply opacity-0; will-change: transform, opacity; } .intro-active { @apply opacity-100 ease-in-out; transition-duration: 800ms; transition-property: transform, clip-path, opacity; &[class*="intro-slide"] { @apply ease-out; transition-duration: 800ms, 500ms, 500ms; transform: translate(0) !important; } &[class*="intro-wipe"] { transition-duration: 800ms, 500ms, 500ms; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; } } @screen prefers-motion { .is-animated { & .intro-slide-left { transform: translateX(calc(5% + 25px)); } & .intro-slide-right { transform: translateX(calc(-5% - 25px)); } & .intro-slide-up { transform: translateY(calc(5% + 25px)); } & .intro-slide-down { transform: translateY(calc(-5% - 25px)); } & .intro-wipe-left { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } & .intro-wipe-right { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } & .intro-wipe-up { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } & .intro-wipe-down { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } } }
<div class="prism"> {#if label} <h2 class="prism-label">{label}</h2> {/if} <pre class="pr-6 line-numbers"><code class="language-{lang}" data-dependencies={dependencies ? dependencies : undefined}>{@html slot}</code></pre> </div> <script> import Prism from 'prismjs'; export let slot; export let lang; export let label; export let dependencies; /* eslint-disable-next-line camelcase */ Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/components/'; window.Prism = window.Prism || Prism; </script>

Tell us about your project.