Swegon Component Library

Product Card: Default 

<div class="product-card ">
    <a href="#" class="product-card__cta">
        <div class="product-card__cta-holder">
            <div class="product-card__body">
                <div class="product-card__heading-holder">
                    <div class="product-card__heading">
                        <h4 class="product-card__title">Eagle Ceiling CR 125 - 400</h4>
                        <span class="product-card__follow-link">
                            <svg class="icon " focusable="false">
                                <use xlink:href="#icon-chevron-right"></use>
                            </svg>
                        </span>
                    </div>
                </div>

                <ul class="product-card__info">
                    <li class="product-card__info-item">
                        Artikelnummer:
                        <strong>64401</strong>
                    </li>
                    <li class="product-card__info-item">
                        Mått - Bredd x höjd x längd (mm):
                        <strong>125 x 395 x 395</strong>
                    </li>
                    <li class="product-card__info-item">
                        Luftflöde - 25, 30, 35 (dB):
                        <strong>39, 46, 54</strong>
                    </li>
                </ul>

            </div>
        </div>
    </a>
</div>
 
<div class="product-card {{ getmodifiers modifiers "product-card" }}">
    {{!-- use a-tag as wrapper element if href is present, else use div --}}
    <{{getelement tag "a"}} {{#unlessequals tag "div"}}href="#"{{/unlessequals}} class="product-card__cta">
        <div class="product-card__cta-holder">
            {{#if image}}
                <figure class="product-card__figure">
                    <img src="{{ image.src }}" alt="{{ image.alt }}" class="product-card__image">
                </figure>
            {{/if}}
            <div class="product-card__body">
                <div class="product-card__heading-holder">
                    <div class="product-card__heading">
                        <h4 class="product-card__title">{{{ title }}}</h4>
                        <span class="product-card__follow-link">
                            {{> @icon id=linkIcon}}
                        </span>
                    </div>
                </div>

                <ul class="product-card__info">
                    {{#each items}}
                        <li class="product-card__info-item">
                            {{{ title }}}
                            <strong>{{{ info }}}</strong>
                        </li>
                    {{/each}}
                </ul>
                {{#>@partial-block}}{{/@partial-block}}
            </div>
        </div>
    </{{getelement tag "a"}}>
</div>
 
{
  "title": "Eagle Ceiling CR 125 - 400",
  "linkIcon": "chevron-right",
  "href": "#",
  "numberTitle": "Artikelnummer:",
  "numberInfo": "64401",
  "accessoriesList": false,
  "items": [
    {
      "title": "Artikelnummer:",
      "info": "64401"
    },
    {
      "title": "Mått - Bredd x höjd x längd (mm):",
      "info": "125 x 395 x 395"
    },
    {
      "title": "Luftflöde - 25, 30, 35 (dB):",
      "info": "39, 46, 54"
    }
  ]
}
  • Content: 
    %product-card-figure-before {
    &:before {
        content: '';
        display: block;
        padding-bottom: percentage(172/172);
    }
}

%product-card-image-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

.product-card {
    display: block;
    background-color: $color-white;
    border: 1px solid $color-gray-2;

    &:hover {
        text-decoration: none;
    }

    &__cta {
        color: $color-black;
        display: block;
        width: 100%;
        padding: size(4) size(3) size(4) size(3);

        @include breakpoint($m) {
            padding: size(5);
        }

        &:hover {
            text-decoration: none
        };

        &-holder {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    &__heading {
        position: relative;
        display: inline-block;
        padding-right: 48px;
    }

    &__figure {
        position: relative;
        margin: 0 24px 0 0;
        width: 80px;
        flex-shrink: 0;
        @extend %product-card-figure-before;

        @include breakpoint($m) {
            margin: 0 48px 0 0;
            width: 172px;
        }
    }

    &__image {
        @extend %product-card-image-cover;
    }

    &__follow-link {
        position: absolute;
        margin-top: size(-.75);
        top: 0;
        right: 0;
        display: flex;
        width: size(4);
        height: size(4);
        padding: size(0.75);
        border: 2px solid $color-white;
        border-radius: 50%;
        background-color: $color-gray-1;
        fill: $color-green;
        transition: transform .2s cubic-bezier(0.4, 0.0, 0.2, 1);

        .product-card:hover & {
            transform: translateX(3px);
        }

        .icon {
            margin-right: -2px;
        }

        @include color-theme {
            fill: $arg-theme-color;
        }

        @include breakpoint($m) {
            margin-top: 0px;
        }
    }

    &__info {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            margin-top: 8px;

            &:first-child {
                margin: 0;
            }
        }

        strong {
            margin-left: 4px; 
        }
    }
}
  • URL: /components/raw/product-card/product-card.scss
  • Filesystem Path: src/components/product-card/product-card.scss
  • Size: 2.3 KB

No notes defined.