FTSE Russell Styleguide

Index Item 

<div class="index__item">
    <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chat"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
</div>
 
<div class="index__item">
  <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#{{ icon }}"></use></svg></span><h4>{{ title }}</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
</div>
 
{
  "icon": "ico-chat",
  "title": "Smart Beta",
  "link": "#"
}
  • Content: 
    .index__item {
  opacity: .9;
  border-bottom: 1px solid $white;
  cursor: pointer;

  &__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $space-lg $space-xs;

    &:hover {

      .index__item__icon {
        transform: scale(1.2);
      }

      .index__item__title {
        transform: scale(1.1) translateX(5px);
      }
      .index__item__arrow {
        transform: translateX(5px);
      }

    }
  }

  &__icon {
    display: inline-flex;
    transition: 0.3s ease;
    transform: scale(1);

    svg.icon {
      width: 20px;
      height: 20px;
      fill: $white;
    }

  }

  &__title {
    color: $white;
    display: flex;
    align-items: center;
    transition: 0.3s ease;
    transform: scale(1) translateX(0%);

    h4 {
      margin-bottom: 0px;
      margin-left: $space-sm;
      font-weight: $font-weight-light;
      transition: 0.3s ease;
    }

  }

  &__arrow {
  display: inline-flex;
  transition: 0.3s ease;
  transform: translateX(0px);

    .icon {
      width: 12px;
      height: 12px;
      fill: $white;
      transform: rotate(-45deg);
      transition: 0.3s ease;
    }
  }

}
  • URL: /components/raw/index_item/_index_item.scss
  • Filesystem Path: src/components/molecules/index_item/_index_item.scss
  • Size: 1.2 KB

There are no notes for this item.