FTSE Russell Styleguide

Card Preview 

<div class="card__preview">
    <div class="card__preview--wrapper container">
        <div class="modal__close"><span></span></div>
        <div class="card__preview--inner grid">
            <div class="card__preview--left">
                <img src="/assets/images/Great-Wall-China-HD.jpeg">
            </div>
            <div class="card__preview--right">
                <h3 class="card__preview__title">Magna Commodo Ligula Sed Tortor Ipsum Lorem Salem</h3>
                <p class="card__preview__description">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabit blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque
                    nisl consectetur et.</p>
                <a href="#" class="btn btn--inverted btn--small">Read More</a>
            </div>
        </div>
    </div>
</div>
 
<div class="card__preview">
  <div class="card__preview--wrapper container">
    <div class="modal__close"><span></span></div>
    <div class="card__preview--inner grid">
      <div class="card__preview--left">
        <img src="{{ image }}">
      </div>
      <div class="card__preview--right">
        <h3 class="card__preview__title">{{ title }}</h3>
        <p class="card__preview__description">{{ text }}</p>
        <a href="{{ cta.url }}" class="btn btn--inverted btn--small">{{ cta.label }}</a>
      </div>
    </div>
  </div>
</div>
 
{
  "title": "Magna Commodo Ligula Sed Tortor Ipsum Lorem Salem",
  "image": "/assets/images/Great-Wall-China-HD.jpeg",
  "text": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabit blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
  "cta": {
    "label": "Read More",
    "url": "#"
  }
}
  • Content: 
    .card__preview {

  background: $gray-darker;
  padding: $space-md;
  
  &--wrapper {
    padding: $space-big;
  }


  &--inner {
    @include mq($breakpoint-lg) {
      grid-template-columns: 1fr 2fr;
      padding: 0 $space-md;
    }
  }

  &--left {
    @include mq($breakpoint-lg) {
      flex-basis: calc(33.33333% - 2rem);
    }
  }

  &--right {
    @include mq($breakpoint-lg) {
      flex-basis: calc(66.66667% - 2rem);
    }
  }

  &--left img {
    width: 100%;

    @include mq($breakpoint-lg) {
      width: calc(100% - 2rem);
    }
  }

  &__title {
    color: $gray-light;
    font-size: $font-size-xl;
  }
}
  • URL: /components/raw/card_preview/_card_preview.scss
  • Filesystem Path: src/components/molecules/card_preview/_card_preview.scss
  • Size: 624 Bytes

There are no notes for this item.