Card: With Image 

<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 img.url %} kx-card--has-img{% endif %}">
    {% if img.url %}
    <img class="kx-card__img" src="{{ img.url }}" alt="{{ img.alt }}">
    {% endif %}
    <header class="kx-card__header">
        <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",
  "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.",
  "img": {
    "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);
}

.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 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-base, 0.3), $color-navy-shade-40);
        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: 2.9 KB

There are no notes for this item.