Swegon Component Library

Card: With Border 

<div class="card card--image card--bordered card--product">
    <a href="#" class="card__cta">
        <figure class="card__figure">
            <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
        </figure>

        <div class="card__body">

            <h4 class="card__title">
                Behovs&shy;styrda system
            </h4>

            <p class="card__description">System och crossover-produkter som arbetar på flera nivåer för att få en komplett lösning för inomhusklimat.</p>

        </div>
    </a>
</div>
 
<div class="card {{ getmodifiers modifiers "card" }}">
    {{!-- use a-tag as wrapper element if href is present, else use div --}}
    <{{getelement tag "a"}} {{#unlessequals tag "div"}}href="#"{{/unlessequals}} class="card__cta">
        {{#if image}}
        <figure class="card__figure">
            {{#if hasNestedLinks}}
            <a href="#"><img src="{{ image.src }}" alt="{{ image.alt }}" class="card__image"></a>
            {{else}}
            <img src="{{ image.src }}" alt="{{ image.alt }}" class="card__image">
            {{/if}}
        </figure>
        {{/if}}

        <div class="card__body">
            {{#ifequals tag "div"}}
                {{#unless hasNestedLinks}}
                    <span class="card__follow-link">
                    {{#if linkIcon}}
                        {{> @icon id=linkIcon}}
                    {{else}}
                        {{> @icon id="chevron-right"}}
                    {{/if}}
                    </span>
                {{/unless}}
            {{/ifequals}}

            {{#if title}}<h4 class="card__title">
                {{#if hasNestedLinks}}
                <a href="#">{{{ title }}}
                    <span class="card__follow-link">
                        {{#if linkIcon}}
                            {{> @icon id=linkIcon}}
                        {{else}}
                            {{> @icon id="chevron-right"}}
                        {{/if}}
                    </span>
                </a>
                {{else}}
                {{{ title }}}
                {{/if}}
            </h4>
            {{/if}}
            {{#if date}}<p class="card__date">{{{ date }}}</p>{{/if}}
            {{#if description}}<p class="card__description">{{{ description }}}</p>{{/if}}

            {{#>@partial-block}}{{/@partial-block}}
        </div>
    </{{getelement tag "a"}}>
    {{#if linkList}}
        <ul class="card__link-list">
            {{#each linkList}}
                <li>
                    <a class="card__link-list-link" href={{href}}>
                        {{title}}
                    </a>
                </li>
            {{/each}}
        </ul>
    {{/if}}
</div>
 
{
  "layoutMaxWidth": "600px",
  "title": "Behovs&shy;styrda system",
  "description": "System och crossover-produkter som arbetar på flera nivåer för att få en komplett lösning för inomhusklimat.",
  "linkIcon": "chevron-right",
  "href": "#",
  "modifiers": [
    "image",
    "bordered",
    "product"
  ],
  "image": {
    "src": "/mocks/img/office-coders.jpg",
    "alt": ""
  }
}
  • Content: 
    .card {
    display: block;
    background-color: $color-white;
    height: 100%;

    &:hover {
        text-decoration: none;
    }

    &--fluid-layout {
        @include breakpoint(0, $xs) {
            padding: size(1);
        }
    }

    .theme--white & {
        background-color: $color-gray-1;
    }

    > *:last-child {
        padding-bottom: size(2);

        @include breakpoint($m) {
            padding-bottom: size(3);
        }
    }

    &--bordered {
        border-bottom:2px solid $color-gray-2;
    }

    &--theme-green {
        background-color: $color-green-pale;
    }
}

.card__cta {
    display: flex;
    flex-direction: column;

    .card--fluid-layout & {
        @include breakpoint(0, $xs) {
            flex-direction: row;
            padding-bottom: 0;
        }
    }

    .card--product & {
        padding-bottom: size(6);
    }
}

a.card__cta {
    &:only-child{
        height: 100%;
    }

    &:hover {
        text-decoration: none;
    }
}

%card-figure-before {
    &:before {
        content: '';
        display: block;
        padding-bottom: percentage(224/304);
    }
}

.card__figure {
    position: relative;
    margin: 0;
    width: 100%;

    .card--image & {
        @extend %card-figure-before;
    }

    .card--logo & {
        @extend %card-figure-before;
    }
    
    .card--theme-green & {
        &:before {
            padding-bottom: percentage(235/640);
        }

        @include breakpoint(0, $xs) {
            &:before {
                padding-bottom: percentage(156/327);
            }
        }
    }

    .card--fluid-layout & {
        width: auto;
        min-width: 98px;

        @extend %card-figure-before;

        @include breakpoint(0, $xs) {
            &:before {
                content: '';
                display: block;
                padding-bottom: percentage(72/98);
            }
        }
    }
}


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

.card__image {
    display: block;

    .card--icon & {
        width: auto;
        height: 100%;
        margin: auto;
        min-height: 200px;
        padding: 3rem 0;
    }

    .card--logo & {
        position: absolute;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        object-fit: cover;
        font-family: 'object-fit: cover;';
        max-width: 325px;
        transform: translate(-50%, -50%);
        max-height: 85%;
    }

    .card--image & {
        @extend %card-image-cover;
    }

    .card--fluid-layout & {
        @extend %card-image-cover;

        @include breakpoint(0, $xs) {
            min-height: size(9.5);
        }
    }
}

.card__body {
    position: relative;
    margin-top: size(2);
    padding: 0 size(2) 0 size(2);
    min-height: size(3);

    > *:last-child:not(.card__title) {
        margin-bottom: 0;
    }

    @include breakpoint($m) {
        margin-top: size(3);
        padding: 0 size(3) 0 size(3);
    }

    .card--fluid-layout & {
        @include breakpoint(0, $xs) {
            margin-top: 0;
            padding: 2px size(2);
        }
    }

    .card--centered & {
        text-align: center;
    }
}

.card__follow-link {
    position: absolute;
    margin-top: size(-.75);
    top: 0;
    right: size(2);
    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);

    .card--fluid-layout & {
        display: none;

        @include breakpoint($xs) {
            display: flex;
        }
    }

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

    .icon {
        margin-right: -2px;
        width: 16px;
        height: 16px;
    }

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

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

.card__title {
    color: $color-black;
    margin-right: size(6);
    word-break: break-word;

    @include dark-theme {
        color: $color-black;
    }

    @include breakpoint(0, $xs) {
        margin-bottom: size(0.5);
    }

    @include breakpoint($xs) {
        font-size: size(3);
        line-height: size(4);
        margin-right: size(6);
    }

    .card--fluid-layout & {
        @include breakpoint(0, $xs) {
            font-size: size(1.75);
            line-height: size(2.5);
            margin-right: 0;
        }
    }

    .card--has-nested-links & {
        margin: 0;

        a {
            color: $color-black;
            display: flex;
            justify-content: space-between;

            .card__follow-link {
                position: relative;
                right: 0;
                margin-top: -2px;
            }
        }
    }

    &+.card__date {
        @include breakpoint(0, $xs) {
            margin-top: 0;
        }

        margin-top: size(-1.5);
    }
}

.card__date {
    @include breakpoint(0, $xs) {
        margin-bottom: size(0.5);
    }

    color: $color-gray-3;
}

.card__description {
    color: $color-gray-5;
    font-size: size(1.75);
    line-height: size(2.5);

    @include dark-theme {
        color: $color-gray-5;
    }

    @include breakpoint($xs) {
        font-size: size(2);
        line-height: size(3);
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.card__link {
    display: block;
    text-decoration: none;

    &:hover {
        text-decoration: none;
    }
}

.card__link-list {
    list-style: none;
    margin: 0;
    padding: 0 size(2) 0 size(2);

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

.card__link-list-link {
    display: block;
    font-weight: $font-weight-bold;
    background: url(../../assets/icons/icon-chevron-right.svg) no-repeat;
    background-size: size(1.5);
    background-position: -2px size(.75);
    padding-left: size(2.5);

    @include breakpoint(0, $xs) {
        background-position: -2px size(.4);
        font-size: size(1.75);
        line-height: size(2.5);
    }
}
  • URL: /components/raw/card/card.scss
  • Filesystem Path: src/components/card/card.scss
  • Size: 6.2 KB

No notes defined.