FTSE Russell Styleguide

Related Links 

<div class="related__links">
    <h4 class="related__links__title">Related Content</h4>
    <ul class="related__links__content">

        <li class="related__links__item">

            <a href="#">Inceptos Ornare Nibh Pellentesque Consectetur magna</a>
        </li>

        <li class="related__links__item">

            <a href="#">Mollis Nibh Purus Vulputate</a>
        </li>

        <li class="related__links__item">

            <a href="#">Bibendum Condimentum Sem</a>
        </li>

        <li class="related__links__item">

            <a href="#">Risus Egestas</a>
        </li>

        <li class="related__links__item">

            <a href="#">Tristique Elit Vestibulum Ullamcorper</a>
        </li>

    </ul>
</div>
 
<div class="related__links">
  <h4 class="related__links__title">{{ title }}</h4>
  <ul class="related__links__content">
    {% for link in related_links %}
    <li class="related__links__item">
      {% if image and loop.index == 1 and link.image %}
      <div class="related__links__item__img">
        <picture>
          <source media="(min-width: 1350px)" srcset="{{ link.image }}">
          <img src="{{ link.image }}"/>
        </picture>
      </div>
      {% endif %}
      <a href="#">{{ link.title }}</a>
    </li>
    {% endfor %}
  </ul>
</div>
 
{
  "title": "Related Content",
  "image": null,
  "related_links": [
    {
      "title": "Inceptos Ornare Nibh Pellentesque Consectetur magna",
      "url": "#",
      "image": "../../assets/images/related-default-img.jpg"
    },
    {
      "title": "Mollis Nibh Purus Vulputate",
      "url": "#"
    },
    {
      "title": "Bibendum Condimentum Sem",
      "url": "#"
    },
    {
      "title": "Risus Egestas",
      "url": "#"
    },
    {
      "title": "Tristique Elit Vestibulum Ullamcorper",
      "url": "#"
    }
  ]
}
  • Content: 
    .related__links {
  margin-bottom: $space-xxl;

  &__item {
    list-style: none;
    font-size: $font-size-base;
    border-bottom: 1px solid $gray-lighter;

    &:last-child {
      border-bottom: none;
    }

    &__img {
      img {
        width: 100%;
      }
    }
  }

  a {
    color: $primary-dark;
    display: block;
    padding: $space-sm;
    transition: $transition-base;

    &:hover {
      background: $gray-lighter;
    }
  }
}
  • URL: /components/raw/related_links/_related_links.scss
  • Filesystem Path: src/components/molecules/cards/related_links/_related_links.scss
  • Size: 447 Bytes

There are no notes for this item.