Vechtsport Online Components for Magento 2

Card 

<div class="card col-xs-12 col-md-6">
    <div class="card__content">
        <a href="#" class="card__inner">
            <img src="https://images.unsplash.com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80" class="card__image image" />
            <h2 class="card__title">
                Stranger Things: The sound of the Upside Down
            </h2>
            <p class="card__intro-text">The antsy bingers of Netflix will eagerly anticipate the digital release of the Survive soundtrack, out today.</p>
        </a>
        <div class="card__bottom">
            <div class="card__info">
                <img src="https://i.pravatar.cc/300" class="card__author" />
                <a href="#" class="card__button button">Read more</a>
            </div>
        </div>
    </div>
</div>
 
<div class="card col-xs-12 col-md-6">
    <div class="card__content">
        <a href="#" class="card__inner">
            <img src="https://images.unsplash.com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80"
                class="card__image image" />
            <h2 class="card__title">
                Stranger Things: The sound of the Upside Down
            </h2>
            <p class="card__intro-text">The antsy bingers of Netflix will eagerly anticipate the digital release of the Survive soundtrack, out today.</p>
        </a>
        <div class="card__bottom">
            <div class="card__info">
                <img src="https://i.pravatar.cc/300"
                     class="card__author" />
                <a href="#" class="card__button button">Read more</a>
            </div>
        </div>
    </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .card {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    padding: $spacer--m;

    &__content {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        background: $white;
        overflow: hidden;
        border-radius: $border-radius;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        position: relative;
        padding-bottom: 90px;
    }

    &__inner {
        display: flex;
        flex-wrap: wrap;
    }

    &__image {
        padding-bottom: $spacer--m;
    }

    &__title {
        font-size: $spacer--m;
        line-height: $spacer--m;
        padding-left: $spacer--m;
        padding-right: $spacer--m;
    }

    &__intro-text {
        padding-left: $spacer--m;
        padding-right: $spacer--m;
        margin-bottom: $spacer--default;
    }

    &__bottom {
        position: absolute;
        bottom: 0;
        padding: $spacer--m;
        margin-top: auto;
        background: $white;
        width: 100%;
    }

    &__info {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &__author {
        border-radius: 9999px;
        width: $spacer--xl;
        height: $spacer--xl;
        margin-right: $spacer--medium;
    }

    &__button {
        padding: $spacer--medium;
    }
}
  • URL: /components/raw/card/_card.scss
  • Filesystem Path: build/components/03-modules/card/_card.scss
  • Size: 1.4 KB

There are no notes for this item.