Shopify UI Craft Cards – Interactive Expanding Cards
Add stunning interactive expanding cards to your Shopify store. Features smooth animations, customizable content, and responsive design. Perfect for showcasing features, products, or services.
Liquid Code
<!-- ======================================== Section Name: UI Craft Cards Tech Stack: Liquid, HTML, CSS, JavaScript What This Section Does: - Displays an interactive card system with expanding animation on hover/click. - Includes customizable titles, descriptions, icons, buttons, and background images. - Features a stylish grid layout with smooth transitions between active states. - Fully responsive design that adapts gracefully to mobile and desktop devices. Promotion: Enhance your Shopify store with eye-catching interactive cards. Create engaging user experiences with smooth animations and stylish design. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/). ======================================== --> <section class="craft-ui-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;"> <h1 class="craft-ui-title fluid">{{ section.settings.title }}</h1> <p class="craft-ui-description">{{ section.settings.description }}</p> <ul class="craft-ui-cards"> {% for block in section.blocks %} <li class="craft-ui-card {% if forloop.first %}craft-ui-card--active{% endif %}" data-active="{{ forloop.first }}" {{ block.shopify_attributes }}> <article class="craft-ui-article"> <h3 class="craft-ui-article-title">{{ block.settings.title }}</h3> <p class="craft-ui-article-description">{{ block.settings.description }}</p> {% if block.settings.icon != blank %} <div class="craft-ui-icon">{{ block.settings.icon }}</div> {% else %} <div class="craft-ui-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M6 3h12l4 6-10 13L2 9Z" /> <path d="M11 3 8 9l4 13 4-13-3-6" /> <path d="M2 9h20" /> </svg> </div> {% endif %} {% if block.settings.button_text != blank and block.settings.button_link != blank %} <a href="{{ block.settings.button_link }}" class="craft-ui-button"> <span>{{ block.settings.button_text }}</span> </a> {% endif %} {% if block.settings.image != blank %} <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.title }}" class="craft-ui-image"> {% else %} <img src="{{ 'lifestyle-1' | placeholder_svg_tag | img_url: 'master' }}" alt="{{ block.settings.title }}" class="craft-ui-image"> {% endif %} </article> </li> {% endfor %} </ul> </section> <style> @import url('https://unpkg.com/normalize.css'); .craft-ui-section { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding-block: 2rem; position: relative; } .craft-ui-section::before { --size: 45px; --line: color-mix(in hsl, currentColor, transparent 70%); content: ''; height: 100%; width: 100%; position: absolute; background: linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size), linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% / var(--size) var(--size); mask: linear-gradient(-20deg, transparent 50%, white); top: 0; transform-style: flat; pointer-events: none; z-index: -1; } .craft-ui-title { margin: 0; --font-size-min: 22; --font-level: 4.25; --fluid-min: calc(var(--font-size-min) * pow(1.2, var(--font-level, 0))); --fluid-max: calc(20 * pow(1.33, var(--font-level, 0))); --fluid-preferred: calc((var(--fluid-max) - var(--fluid-min)) / (1500 - 375)); --fluid-type: clamp( (var(--fluid-min) / 16) * 1rem, ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * 375) / 16) * 1rem) + (var(--fluid-preferred) * 100vi), (var(--fluid-max) / 16) * 1rem ); font-size: var(--fluid-type); } .craft-ui-description { width: 74ch; max-width: calc(100% - 4rem); text-wrap: balance; font-family: monospace; margin: 0 0 4rem 0; line-height: 1.5; opacity: 0.8; font-weight: 400; text-align: center; } .craft-ui-cards { --gap: 8px; --base: clamp(2rem, 8cqi, 80px); --easing: linear( 0 0%, 0.1538 4.09%, 0.2926 8.29%, 0.4173 12.63%, 0.5282 17.12%, 0.6255 21.77%, 0.7099 26.61%, 0.782 31.67%, 0.8425 37%, 0.8887 42.23%, 0.9257 47.79%, 0.9543 53.78%, 0.9752 60.32%, 0.9883 67.11%, 0.9961 75%, 1 100% ); --speed: 0.6s; display: grid; container-type: inline-size; grid-template-columns: 10fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: var(--gap); list-style-type: none; justify-content: center; padding: 0; height: clamp(300px, 40dvh, 474px); margin: 0; width: 820px; max-width: calc(100% - 4rem); transition: grid-template-columns var(--speed) var(--easing); } .craft-ui-card { position: relative; overflow: hidden; min-width: var(--base); border-radius: 8px; border: 1px solid rgba(128, 128, 128, 0.3); } .craft-ui-article { width: calc(var(--article-width) * 1px); height: 100%; position: absolute; font-family: monospace; top: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding-inline: calc(var(--base) * 0.5 - 9px); padding-bottom: 1rem; overflow: hidden; } .craft-ui-article-title { position: absolute; top: 1rem; left: calc(var(--base) * 0.5); transform-origin: 0 50%; rotate: 90deg; font-size: 1rem; font-weight: 300; text-transform: uppercase; font-family: monospace; white-space: nowrap; margin: 0; opacity: 0.6; transition: opacity calc(var(--speed) * 1.2) var(--easing); } .craft-ui-icon { width: 18px; fill: none; opacity: 0.6; transition: opacity calc(var(--speed) * 1.2) var(--easing); } .craft-ui-article-description { font-size: 13px; text-wrap: balance; line-height: 1.25; --opacity: 0.8; opacity: 0; transition: opacity calc(var(--speed) * 1.2) var(--easing); width: fit-content; margin: 0; } .craft-ui-button { position: absolute; bottom: 1rem; height: 18px; line-height: 1; color: inherit; opacity: 0; transition: opacity calc(var(--speed) * 1.2) var(--easing); width: fit-content; } .craft-ui-button:is(:focus-visible, :hover) { outline: none; } .craft-ui-button:is(:focus-visible, :hover) span { text-decoration: underline; text-underline-offset: 4px; } .craft-ui-button span { display: inline-block; line-height: 18px; translate: calc(var(--base) * 0.5); font-weight: 500; } .craft-ui-image { position: absolute; pointer-events: none; inset: 0; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(100% 100% at 100% 0, #fff, #0000); filter: grayscale(1) brightness(1.5); scale: 1.1; transition-property: filter, scale; transition-duration: calc(var(--speed) * 1.2); transition-timing-function: var(--easing); } .craft-ui-card[data-active="true"] .craft-ui-article-title, .craft-ui-card[data-active="true"] .craft-ui-icon { opacity: 1; } .craft-ui-card[data-active="true"] .craft-ui-article-description, .craft-ui-card[data-active="true"] .craft-ui-button { opacity: var(--opacity, 1); transition-delay: calc(var(--speed) * 0.25); } .craft-ui-card[data-active="true"] .craft-ui-image { filter: grayscale(0) brightness(1); scale: 1; transition-delay: calc(var(--speed) * 0.25); } h1.craft-ui-title.fluid, p.craft-ui-description, ul.craft-ui-cards , h3.craft-ui-article-title , p.craft-ui-article-description , .craft-ui-icon svg{ color:{{section.settings.text_color}} } @media (max-width: 768px) { .craft-ui-description { text-align: center; } .craft-ui-cards { grid-template-columns: 1fr; height: auto; } .craft-ui-card { height: 300px; } .craft-ui-card[data-active="true"] { grid-row: span 3; } } </style> <script> document.addEventListener('DOMContentLoaded', function() { const list = document.querySelector('.craft-ui-cards'); const items = list.querySelectorAll('.craft-ui-card'); const setIndex = (event) => { const closest = event.target.closest('.craft-ui-card'); if (closest) { const index = [...items].indexOf(closest); const cols = new Array(list.children.length) .fill() .map((_, i) => { items[i].dataset.active = (index === i).toString(); return index === i ? '10fr' : '1fr'; }) .join(' '); list.style.setProperty('grid-template-columns', cols); } }; list.addEventListener('focus', setIndex, true); list.addEventListener('click', setIndex); list.addEventListener('pointermove', setIndex); const resync = () => { const w = Math.max( ...[...items].map((i) => { return i.offsetWidth; }) ); list.style.setProperty('--article-width', w); }; window.addEventListener('resize', resync); resync(); }); </script> {% schema %} { "name": "UI Craft Cards", "settings": [ { "type": "color", "id": "background_color", "label": "Background Color", "default": "#000000" }, { "type": "range", "id": "padding_top", "label": "Padding Top", "default": 60, "min": 0, "max": 100, "step": 5 }, { "type": "range", "id": "padding_bottom", "label": "Padding Bottom", "default": 60, "min": 0, "max": 100, "step": 5 }, { "type": "color", "id": "text_color", "label": "Text Color" }, { "type": "text", "id": "title", "label": "Title", "default": "Lorem ipsum dolor " }, { "type": "textarea", "id": "description", "label": "Description", "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } ], "blocks": [ { "type": "card", "name": "Card", "settings": [ { "type": "text", "id": "title", "label": "Title", "default": "The Craft" }, { "type": "textarea", "id": "description", "label": "Description", "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { "type": "html", "id": "icon", "label": "Custom Icon (SVG)", "info": "Optional. Leave blank to use default icon." }, { "type": "text", "id": "button_text", "label": "Button Text", "default": "Watch now" }, { "type": "url", "id": "button_link", "label": "Button Link" }, { "type": "image_picker", "id": "image", "label": "Background Image" } ] } ], "presets": [ { "name": "UI Craft Cards", "category": "Interactive", "blocks": [ { "type": "card", "settings": { "title": "The Craft", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } }, { "type": "card", "settings": { "title": "CSS Animation", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } }, { "type": "card", "settings": { "title": "SVG Filters", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } }, { "type": "card", "settings": { "title": "Scroll Animation", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } }, { "type": "card", "settings": { "title": "Taming Canvas", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } }, { "type": "card", "settings": { "title": "Layout Tricks", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } }, { "type": "card", "settings": { "title": "Mastering Time", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." } } ] } ] } {% endschema %}