Shopify UI Craft Cards – Interactive Expanding Cards

                    <!-- 
========================================
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 %}