Card: With icon svg 

<div class="kx-card kx-card--skin-default">
    <header class="kx-card__header">
        <!-- ICON Component -->
        <i class="kx-icon kx-icon--size-large kx-card__icon kx-ml--auto">
    <svg aria-hidden="true" focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
    </svg>
</i>
        <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Card title</a></h3>
    </header>
    <div class="kx-card__body">
        <p>A card chunks several different (but related) pieces of information into one digestible unit — be it an article on a news website, a product on an ecommerce site, or a post on a social app.</p>
    </div>
    <footer class="kx-card__footer">
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-card__cta" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Learn More</span>
    </span>
</a>
    </footer>
</div>
 
<div class="kx-card{% if skin %} kx-card--skin-{{ skin }}{% endif %}{% if bgImg.url %} kx-card--has-img{% endif %}">
    {% if bgImg.url -%}
    <img class="kx-card__img" src="{{ bgImg.url }}" alt="{{ bgImg.alt }}">
    {% endif -%}
    <header class="kx-card__header">
        {% if icon.url -%}
        <i class="kx-icon kx-icon--size-{{ icon.size }} kx-card__icon">
            <img src="{{ icon.url }}" alt=""{{ ' aria-hidden="true"' if icon.ariaHidden }}>
        </i>
        {% endif -%}
        {% if icon.symbol -%}
            {% render '@icon', icon, true %}
        {% endif -%}
        <h3 class="kx-card__title">{% if cta.href %}<a class="kx-card__title-link" href="{{ cta.href }}">{{ title }}</a>{% else %}{{ title }}{% endif %}</h3>
    </header>
    <div class="kx-card__body">
        <p>{{ content }}</p>
    </div>
    <footer class="kx-card__footer">
        {% if tags -%}
        <div class="kx-card__tags">
            {% render '@icon', { symbol: 'bookmark', size: 'small' } %}
            <ul class="kx-card__taglist">
                {% for tag in tags -%}
                <li class="kx-card__tagitem"><span>{{ tag }}</span></li>
                {% endfor -%}
            </ul>
        </div>
        {% endif -%}
        {% if cta.text -%}
        {% render '@button', cta %}
        {% endif -%}
    </footer>
</div>
 
{
  "title": "Card title",
  "icon": {
    "symbol": "box",
    "size": "large",
    "ariaHidden": true,
    "classes": [
      "kx-card__icon",
      "kx-ml--auto"
    ]
  },
  "skin": "default",
  "content": "A card chunks several different (but related) pieces of information into one digestible unit — be it an article on a news website, a product on an ecommerce site, or a post on a social app.",
  "bgImg": null,
  "cta": {
    "text": "Learn More",
    "href": "#",
    "size": "base",
    "skin": "flat",
    "classes": [
      "kx-card__cta"
    ]
  },
  "tags": null
}
  • Content: 
    // ==========================================================================
// Component: card
// ==========================================================================

// Elements (children)
// ==========================================================================
.kx-card__img {
    object-fit: cover;
}

.kx-card__title-link {
    color: $color-card-title-link-txt;
    text-decoration: none;

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

.kx-card__title {
    @include type-scale(medium);
    @include pr(medium);
    flex: 1 1 auto;

    @each $size, $widths in $icon-scale {
        .kx-icon--size-#{$size} ~ & {
            max-width: calc(100% - #{map-get($widths, width)});
        }
    }
}

.kx-card__icon {
    color: inherit;
    flex: 0 1 auto;
    position: absolute !important;
    right: 2rem;

    img {
        height: 100% !important;
        width: auto !important;
        max-width: none;
        left: auto !important;
        right: 0;
    }
}

.kx-card__tagitem {
    @include type-scale(tiny);
    @include type-weight(bold);
    line-height: 1rem;

    &:not(:last-of-type) {
        &:after {
            @include mr(tiny);
            content: ',';
        }
    }
}

.kx-card__taglist {
    @include reset-list;
    @include flex;
    @include flex-wrap;
    flex: 1 1 auto;
}

.kx-card__tags {
    @include flex;
    @include align-items-start;
    color: $color-card-tags-txt;

    .kx-icon {
        margin-top: rem-calc(1);
        margin-right: rem-calc(4);
        margin-left: rem-calc(-2);
        flex: 0 0 auto;
    }
}

.kx-card__cta {
    margin-left: auto;
    flex: 0 0 auto;

    &.kx-btn--skin-flat {
        margin-right: rem-calc(-12);
    }
}

.kx-card__header {
    @include flex;
    @include align-items-center;
    @include flex-wrap;
    @include p(large, large, none, large);
}

.kx-card__body {
    @include type-scale(small);
    @include p(base, large, base, large);
}

.kx-card__footer {
    @include flex;
    @include align-items-center;
    @include p(base, large, base, large);
    margin-top: auto;
}

// Block (parent)
// ==========================================================================
.kx-card {
    @include shadow(1);
    @include flex;
    position: relative;
    flex-direction: column;
    transition: all $duration-default cubic-bezier(0.25, 0.8, 0.25, 1);
}

// Modifiers
// ==========================================================================

.kx-card--skin-default {
    background-color: $color-card-bg;
}

.kx-card--has-img {
    color: $color-card-has-img-txt;

    .kx-card__img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom, rgba($color-navy-06, 0.3), $color-navy-08);
        z-index: 1;
        opacity: 1;
    }

    .kx-card__header {
        @include p(xxxlarge, large, none, large);
    }

    .kx-card__header,
    .kx-card__body,
    .kx-card__footer {
        position: relative;
        z-index: 1;
    }

    .kx-card__title-link {
        color: inherit;
    }

    .kx-card__tags {
        color: $color-card-has-img-tags-txt;
    }
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: src\components\01-card\_card.scss
  • Size: 3.5 KB

There are no notes for this item.