<div class="news-landing-back-button__back">
    <a href="#">News</a>
</div>
<div class="news-landing-back-button__line"></div>

No notes defined.

{
  "title": "News"
}
  • Content:
    .news-landing-back-button {
      background-size: 100% 100%;
      background-color: $grey-light;
      &__back {
        display: flex;
        align-items: center;
        padding-left: 0.2rem;
        padding-top: 0.8rem;
        & > a {
          display: flex;
          align-items: center;
          text-decoration: none;
          font-family: $heading-font;
          font-size: 3rem;
          line-height: 4rem;
          letter-spacing: 0.01em;
          color: $color-interface-light;
          position: relative;
          padding-left: 4rem;
          &::before {
            content: '';
            background: url('./assets/images/view-all-arrow.svg') no-repeat center;
            width: 3.8rem;
            height: 3.8rem;
            display: inline-block;
            position: absolute;
            left: 0;
            transform: rotate(180deg);
          }
    
          &:hover {
            color: $blue;
          }
        }
      }
      &__line {
        background: $color-interface-light;
        opacity: 0.1;
        height: 0.1rem;
        display: block;
        margin: 0.4rem 1.6rem;
      }
    
      @media screen and (min-width: $mq-medium) {
        &__back {
          padding-left: 1.7rem;
          padding-top: 1.2rem;
        }
        &__line {
          margin: 1.2rem 3.2rem;
        }
      }
    }
    
  • URL: /components/raw/news-landing-back-button/news-landing-back-button.scss
  • Filesystem Path: src/library/components/news-landing-back-button/news-landing-back-button.scss
  • Size: 1.2 KB
<div class="news-landing-back-button__back">
        <a href="#">{{title}}</a>
    </div>
<div class="news-landing-back-button__line"></div>