FTSE Russell Styleguide

Basic Teaser 

<article class="node__teaser  grid  ">

    <div class="node__teaser--left col col-12 col-lg-3">
        <div class="node__teaser__inner">
            <div class="node__teaser__image">
                <picture>
                    <source media="(min-width: 1350px)" srcset="/assets/images/alex-shutin-205126.jpg">
                    <img src="/assets/images/alex-shutin-205126.jpg" alt="FTSE Russell" />
                </picture>
            </div>
        </div>
    </div>

    <div class="node__teaser--right col col-12 col-lg-9">
        <h3 class="node__teaser__title">
            <a href="#">Institutional Investor Institute Roundtable Corporate Funds & Insurance</a>
        </h3>
        <div class="node__teaser__details">

            <div class="node__teaser__detail event__date--small">
                <span><svg class="icon icon--small icon--calendar">
          <use xlink:href="/assets/sprites/icons.svg#ico-calendar"></use>
        </svg></span>
                <span>28 March, 2018</span></div>

        </div>
        <div class="node_teaser__description">
            <p>Lorem ipsum id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies <a href='#'>vehicula</a> ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi
                erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
        </div>
        <a class="link__read-more" href="#">View & Download PDF</a>
    </div>
</article>
 
<article class="node__teaser {% if image.src %} grid {% endif %} ">
{% if image.src %}
  <div class="node__teaser--left col col-12 col-lg-3">
    <div class="node__teaser__inner">
      <div class="node__teaser__image">
        <picture>
          <source media="(min-width: 1350px)" srcset="{{ image.src }}">
          <img src="{{ image.src }}"  alt="{{ image.alt }}" />
        </picture>
      </div>
    </div>
  </div>
   {% endif %}   
  <div class="node__teaser--right col col-12 col-lg-9">
    <h3 class="node__teaser__title">
      <a href="{{ nodeUrl }}">{{ title }}</a>
    </h3>
    <div class="node__teaser__details">
      {% if date_small %}
      <div class="node__teaser__detail event__date--small">
      <span><svg class="icon icon--small icon--calendar">
          <use xlink:href="/assets/sprites/icons.svg#ico-calendar"></use>
        </svg></span>
        <span>{{ date_small }}</span></div>
       {% endif %}
        {% if location %}
      <div class="node__teaser__detail event__location ">
        <a href="{{ locationUrl }}" target="_blank"><span class="icon icon--small icon--location"> <svg class="icon">
          <use xlink:href="/assets/sprites/icons.svg#ico-location"></use>
        </svg></span> <span>{{ location }}}</span></a>
      </div>
      {% endif %}
    </div>
    <div class="node_teaser__description">
      <p>{{ description }}</p>
    </div>
    <a class="link__read-more" href="{{ nodeUrl }}">{% if link_type == 'download' %}View & Download PDF{% endif %}{% if link_type == 'node' %}Read more{% endif %}</a>
  </div>
</article>
 
{
  "image": {
    "src": "/assets/images/alex-shutin-205126.jpg",
    "alt": "FTSE Russell",
    "size": "360px"
  },
  "title": "Institutional Investor Institute Roundtable Corporate Funds & Insurance",
  "description": "Lorem ipsum id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies <a href='#'>vehicula</a> ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.",
  "readMore": "Learn More",
  "date_small": "28 March, 2018",
  "nodeUrl": "#",
  "link_type": "download"
}
  • Content: 
    .node__teaser {
  margin: $space-xxl 0;
  padding: $space-lg 0;

  @include mq($breakpoint-xl) {
    grid-template-columns: 1fr 3fr;
    margin: $space-xxl -1.25rem $space-xxl 0;
    padding: $space-lg 0;
  }

  &__date--small ,
  &__location a {
    color: $gray-light;
    padding-right: $space-lg;

    .icon {
      fill: $gray-light;
    }
  }

  &__date {
    &--big {
      align-self: center;
    }

    &--day {
      font-size: $font-size-xxxl;
      font-weight: $font-weight-light;
    }

    &--month {
      font-size: $font-size-xl;
      font-weight: $font-weight-bold;
    }
  }

  &__inner {
    display: flex;
    justify-content: center;
    align-content: center;
  }

  &--left {
    margin-bottom: $space-lg;
    padding: $space-xs 0 0;

    @include mq($breakpoint-xl) {
      margin-bottom: 0;
    }
  }

  &--right {
    padding: 0;

    @include mq($breakpoint-xl) {
      flex-basis: calc(75% - 2.5rem);
      padding: 0 $space-lg;
    }
  }

  &__image {

    @include mq($breakpoint-xl) {
      margin-bottom: 0;
    }

    img {
      box-shadow: 0px 0px 5px 2px rgba(207,207,207,1);
      width: 100%;
    }

    @include mq($breakpoint-xl) {
      max-width: 360px;
      max-height: 360px;
    }
  }

  &__title {
    margin-bottom: 0;

    a {
      color: $primary-dark;
      font-weight: $font-weight-normal;
    }
  }

  &__details {
    margin: $space-xs 0;

    .icon {
      padding: 0 10px 0 0;
    }
  }

  &__detail {
    display: flex;
    align-items: center;
  }

  .node_teaser__description {
    a {
      color: $secondary;
    }
  }
}
  • URL: /components/raw/basic_teaser/_basic_teaser.scss
  • Filesystem Path: src/components/molecules/teasers/basic_teaser/_basic_teaser.scss
  • Size: 1.6 KB

There are no notes for this item.