cruc components for Magento 2

Quick Cards 

<div class="quick-cards">
    <h3>Snel regelen:</h3>
    <div class="quick-cards__list gab">
        <div class="quick-cards__item width-full bg-green aspect-auto-1/1 ">
            <a href="#" class="color-white">
        <svg
    class="icon w-full fill-white"
    
        role="presentation"
        focusable="false"
>
        <title>Winkelwagen</title>
    <use xlink:href="/images/icons-sprite.svg#new-cart"></use>
</svg>

        <h4 class="color-white">Veelgestelde vragen</h4>
    </a>
        </div>

        <div class="quick-cards__item width-full bg-green aspect-auto-1/1 ">
            <a href="#" class="color-white">
        <svg
    class="icon w-full fill-white"
    
        role="presentation"
        focusable="false"
>
        <title>Telefoon</title>
    <use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>

        <h4 class="color-white">Klantenservice</h4>
    </a>
        </div>

        <div class="quick-cards__item width-full bg-green aspect-auto-1/1 ">
            <a href="#" class="color-white">
        <svg
    class="icon w-full fill-white"
    
        role="presentation"
        focusable="false"
>
        <title>Winkelwagen</title>
    <use xlink:href="/images/icons-sprite.svg#pin"></use>
</svg>

        <h4 class="color-white">Vestigingen</h4>
    </a>
        </div>

        <div class="quick-cards__item width-full bg-green aspect-auto-1/1 ">
            <a href="#" class="color-white">
        <svg
    class="icon w-full fill-white"
    
        role="presentation"
        focusable="false"
>
        <title>Winkelwagen</title>
    <use xlink:href="/images/icons-sprite.svg#new-cart"></use>
</svg>

        <h4 class="color-white">Gratis lenen</h4>
    </a>
        </div>

        <div class="quick-cards__item width-full bg-green aspect-auto-1/1 ">
            <a href="#" class="color-white">
        <svg
    class="icon w-full fill-white"
    
        role="presentation"
        focusable="false"
>
        <title>Winkelwagen</title>
    <use xlink:href="/images/icons-sprite.svg#new-cart"></use>
</svg>

        <h4 class="color-white">Koop online</h4>
    </a>
        </div>

    </div>
</div>
 
<div class="quick-cards">
    <h3>{{ header }}</h3>
    <div class="quick-cards__list gab">
        {{#each quickCards as |quickCard|}}
            {{ render '@quick-card'quickCard merge=true}}
        {{/each}}
    </div>
</div>
 
{
  "title": "Quick Cards",
  "header": "Snel regelen:",
  "quickCards": [
    {
      "text": "Veelgestelde vragen",
      "quickIcon": {
        "id": "new-cart",
        "title": "Winkelwagen",
        "class": "w-full fill-white",
        "hidden": true
      }
    },
    {
      "text": "Klantenservice",
      "quickIcon": {
        "id": "phone",
        "title": "Telefoon",
        "class": "w-full fill-white",
        "hidden": true
      }
    },
    {
      "text": "Vestigingen",
      "quickIcon": {
        "id": "pin",
        "title": "Winkelwagen",
        "class": "w-full fill-white",
        "hidden": true
      }
    },
    {
      "text": "Gratis lenen",
      "quickIcon": {
        "id": "new-cart",
        "title": "Winkelwagen",
        "class": "w-full fill-white",
        "hidden": true
      }
    },
    {
      "text": "Koop online",
      "quickIcon": {
        "id": "new-cart",
        "title": "Winkelwagen",
        "class": "w-full fill-white",
        "hidden": true
      }
    }
  ]
}
  • Content: 
    $quick-card-icon__height            : 100px !default;
$quick-card-icon__width             : 100px !default;
$quick-card__font-size              : $font-size-extra-large !default;
  • URL: /components/raw/quick-cards/_quick-cards-variables.scss
  • Filesystem Path: build/components/Organisms/quick-cards/_quick-cards-variables.scss
  • Size: 179 Bytes
  • Content: 
    @import 'quick-cards-variables';

.quick-cards {
    h3 {
        font-size: $quick-card__font-size;
        font-weight: bold;
    }
    &__list {
        display: flex;
        flex-direction: column;
        @include mq($screen-s) {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
        }
        @include mq($screen-m) {
            grid-template-columns: repeat(3, 1fr);
        }
        @include mq($screen-l) {
            grid-template-columns: repeat(4, 1fr);
        }
        @include mq($screen-xl) {
            grid-template-columns: repeat(5, 1fr);
        }
        .quick-card {
            margin: 2px 2px;
            padding: 20px;
            border-radius: 2px;
            word-wrap: break-word;
            .icon {
                height: $quick-card-icon__height;
                width: $quick-card-icon__width;
            }
            h4 {
                font-size: $quick-card__font-size;
                font-weight: bold;
            }
        }
    }
}
  • URL: /components/raw/quick-cards/_quick-cards.scss
  • Filesystem Path: build/components/Organisms/quick-cards/_quick-cards.scss
  • Size: 1 KB

There are no notes for this item.