<div class="kx-card kx-card--skin-default kx-card--has-img">
    <img class="kx-card__img" src="/assets/img/content/480x640(3_2)-cargo.jpg" alt="Alternative text">
    <header class="kx-card__header">
        <h3 class="kx-card__title"><a class="kx-card__title-link" href="#">Card title</a></h3>
    </header>
    <div class="kx-card__body">
        <p>A single card will typically include a few different types of media, such as an image, a title, a synopsis, sharing icons, or a call-to-action button — all associated with the same concept.</p>
    </div>
    <footer class="kx-card__footer">
        <div class="kx-card__tags">
            <!-- ICON Component -->
            <i class="kx-icon kx-icon--size-small">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
            <ul class="kx-card__taglist">
                <li class="kx-card__tagitem"><span>Tag</span></li>
                <li class="kx-card__tagitem"><span>Category</span></li>
                <li class="kx-card__tagitem"><span>Whatever</span></li>
            </ul>
        </div>
        <!-- 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": null,
  "skin": "default",
  "content": "A single card will typically include a few different types of media, such as an image, a title, a synopsis, sharing icons, or a call-to-action button — all associated with the same concept.",
  "bgImg": {
    "url": "/assets/img/content/480x640(3_2)-cargo.jpg",
    "alt": "Alternative text"
  },
  "cta": {
    "text": "Learn More",
    "href": "#",
    "size": "base",
    "skin": "flat",
    "classes": [
      "kx-card__cta"
    ]
  },
  "tags": [
    "Tag",
    "Category",
    "Whatever"
  ]
}
  • 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.