FTSE Russell Styleguide

Featured Articles 

<section class="featured__articles">
    <div class="featured__articles--wrapper container">
        <h3 class="featured__articles__title">Featured Blog Articles <span>Because you read Lorem Ipsum</span></h3>
        <div class="featured__articles--inner">

            <div class="card card--is-collapsed card--is-inactive col-6 col-lg-3">
                <div class="card--inner">
                    <article class="blog__card blog__card__with_image grid">
                        <div class="blog__card__header">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                            <div class="blog__card__category">
                                <a href="#">
        <svg class="icon">
          <use xlink:href="/assets/sprites/icons.svg#ico-uk"></use>
        </svg>
      </a>
                            </div>

                            <div class="blog__card__type">Test</div>

                        </div>
                        <div class="blog__card__content">
                            <h4 class="blog__card__title text--center">
                                <a href="#">Advisors see bright future for smart beta</a>
                            </h4>

                            <div class="blog__card__author text--center">
                                Rolf Agather
                            </div>

                        </div>
                        <div class="blog__card__footer grid">
                            <div class="blog__card__topic col col-7">
                                <a href="#">#Lorem ipsum</a>
                            </div>
                            <div class="blog__card__date col col-5 text--right">February 26, 2018</div>
                        </div>
                    </article>

                </div>
            </div>

            <div class="card card--is-collapsed card--is-inactive col-6 col-lg-3">
                <div class="card--inner">
                    <article class="blog__card blog__card__with_image grid">
                        <div class="blog__card__header">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                            <div class="blog__card__category">
                                <a href="#">
        <svg class="icon">
          <use xlink:href="/assets/sprites/icons.svg#ico-uk"></use>
        </svg>
      </a>
                            </div>

                            <div class="blog__card__type">Test</div>

                        </div>
                        <div class="blog__card__content">
                            <h4 class="blog__card__title text--center">
                                <a href="#">Index IDEA: Catching up with Russell US indexes reconstitution class of 2017</a>
                            </h4>

                            <div class="blog__card__author text--center">
                                Rolf Agather
                            </div>

                        </div>
                        <div class="blog__card__footer grid">
                            <div class="blog__card__topic col col-7">
                                <a href="#">#Alternatively Weighted</a>
                            </div>
                            <div class="blog__card__date col col-5 text--right">February 26, 2018</div>
                        </div>
                    </article>

                </div>
            </div>

            <div class="card card--is-collapsed card--is-inactive col-6 col-lg-3">
                <div class="card--inner">
                    <article class="blog__card blog__card__with_image grid">
                        <div class="blog__card__header">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                            <div class="blog__card__category">
                                <a href="#">
        <svg class="icon">
          <use xlink:href="/assets/sprites/icons.svg#ico-uk"></use>
        </svg>
      </a>
                            </div>

                            <div class="blog__card__type">Test</div>

                        </div>
                        <div class="blog__card__content">
                            <h4 class="blog__card__title text--center">
                                <a href="#">Advisors see bright future for smart beta</a>
                            </h4>

                            <div class="blog__card__author text--center">
                                Rolf Agather
                            </div>

                        </div>
                        <div class="blog__card__footer grid">
                            <div class="blog__card__topic col col-7">
                                <a href="#">#Lorem ipsum</a>
                            </div>
                            <div class="blog__card__date col col-5 text--right">February 26, 2018</div>
                        </div>
                    </article>

                </div>
            </div>

            <div class="card card--is-collapsed card--is-inactive col-6 col-lg-3">
                <div class="card--inner">
                    <article class="blog__card blog__card__with_image grid">
                        <div class="blog__card__header">
                            <a href="#">
                                <picture>
                                    <source media="(min-width: 1350px)" srcset="/assets/images/Great-Wall-China-HD.jpeg">
                                    <img src="/assets/images/Great-Wall-China-HD.jpeg" />
                                </picture>
                            </a>
                            <div class="blog__card__category">
                                <a href="#">
        <svg class="icon">
          <use xlink:href="/assets/sprites/icons.svg#ico-uk"></use>
        </svg>
      </a>
                            </div>

                            <div class="blog__card__type">Test</div>

                        </div>
                        <div class="blog__card__content">
                            <h4 class="blog__card__title text--center">
                                <a href="#">Advisors see bright future for smart beta</a>
                            </h4>

                            <div class="blog__card__author text--center">
                                Rolf Agather
                            </div>

                        </div>
                        <div class="blog__card__footer grid">
                            <div class="blog__card__topic col col-7">
                                <a href="#">#Lorem ipsum</a>
                            </div>
                            <div class="blog__card__date col col-5 text--right">February 26, 2018</div>
                        </div>
                    </article>

                </div>
            </div>

        </div>
        <div class="featured__articles--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="/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="/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="/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>
    </div>
</section>
 
<section class="featured__articles">
  <div class="featured__articles--wrapper container">
    <h3 class="featured__articles__title">{{ title }} <span>{{ subtitle }}</span></h3>
    <div class="featured__articles--inner">
    {% for item in cards %}
      <div class="card card--is-collapsed card--is-inactive col-6 col-lg-3">
        <div class= "card--inner">
          {% render '@blog_card--with-image', item %}
        </div>
      </div>
    {% endfor %}
    </div>
    <div class="featured__articles--preview">
      {% for item in cards %}
      {% render '@card_preview' %}
      {% endfor %}
    </div>
  </div>
</section>
 
{
  "title": "Featured Blog Articles",
  "subtitle": "Because you read Lorem Ipsum",
  "cards": [
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": "ico-uk",
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": "ico-uk",
      "title": "Index IDEA: Catching up with Russell US indexes reconstitution class of 2017",
      "topic": "#Alternatively Weighted",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": "ico-uk",
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    },
    {
      "image": "/assets/images/Great-Wall-China-HD.jpeg",
      "icon": "ico-uk",
      "title": "Advisors see bright future for smart beta",
      "topic": "#Lorem ipsum",
      "nodeUrl": "#",
      "author": "Rolf Agather",
      "date": "February 26, 2018",
      "type": "Test"
    }
  ]
}
  • Content: 
    .featured__articles {
  margin: $space-xxl 0;
  position: relative;

  &__title {
  color: $gray-darker;
  margin-left: $space-md;

  span {
    font-size: $font-size-sm;
    color: $gray;
    margin-left: $space-sm;
  }
  }

  &--wrapper {
    overflow: hidden;
  }

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

  &--preview {

    @include mq-only($breakpoint-mob) {
      position: absolute;
      top: 0;
    }

    .card__preview {
      height: 0;
      overflow: hidden;
      margin-top: 0;
      opacity: 0;
      padding: 0;
      position: relative;
      transition: 0.5s;
      width: 100%;

      &.is-expanded {
        height: auto;
        overflow: visible;
        opacity: 1;
        padding: $space-md;
        transition: 0.5s;
      }
    }
  }
}

.card {
  display: flex;
  flex-direction: column;
  height: auto;
  float: left;
  width: 100%;

  &--inner {
    height: 100%;
    padding: 3%;
  }

  @include mq($breakpoint-sm) {
    width: 50%;
  }
  @include mq($breakpoint-xl) {
    width: 25%;
  }
    

  &--is-collapsed {
    .card__preview {
      height: 0;
      overflow: hidden;
      margin-top: 0;
      opacity: 0;
      transition: 0.5s;
    }
  }

  &--is-expanded {
    .card__preview {
      height: auto;
      overflow: visible;
      opacity: 1;
      transition: 0.5s;
    }
  }

}




//Expander Widths
//when 2 cards in a row
@media screen and (min-width: 981px) {
  .card:nth-of-type(2n+2) .card__preview {
    margin-left: -106%;
  }
  .card:nth-of-type(2n+3) .card__preview {
    margin-left: -213%;
  }
  .card:nth-of-type(2n+4) .card__preview {
    margin-left: -319%;
  }
  .card:nth-of-type(2n+3) {
    clear: none;
  }
  .card__preview {
    width:408%;
  }

}


//when 2 cards in a row
@media screen and (min-width: 481px) and (max-width: 980px) {

  .card:nth-of-type(2n+2) .card__preview {
    width:200%;
    margin-left: -103%;
  }

  .card:nth-of-type(2n+3) {
    clear: left;
  }
  .card__preview {
    width: 203%;
  }

}

@media screen and (max-width: 480px) {
  .card__preview {
    width: 103%;
  }
}
  • URL: /components/raw/featured_articles/_featured_articles.scss
  • Filesystem Path: src/components/organisms/featured_articles/_featured_articles.scss
  • Size: 2.1 KB

There are no notes for this item.