<a class="link-box" href="#">
    <div class="link-box__title">www.lorem-ipsum.de</div>
    <div class="link-box__text">Hier steht eine Subline mit zusätzlichen Informationen</div>
    <svg class="icon link-box__icon icon--internal-link" id="icon-6504" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
</a>
//- Render link
#{tag || 'a'}.link-box(href=link && link)

  if title
    .link-box__title #{title}

  if text
    .link-box__text #{text}

  != include('@icon', {icon: 'internal-link', attr: { class: 'link-box__icon'} })
{
  "title": "www.lorem-ipsum.de",
  "text": "Hier steht eine Subline mit zusätzlichen Informationen",
  "icon": "arrow-right",
  "link": "#"
}
  • Content:
    .link-box {
      background-color: $color-blue;
      border-radius: 3px;
      color: #fff;
      display: block;
      padding: 1.5rem 4rem 1.5rem 2rem;
      position: relative;
    
      &:hover,
      &:focus {
        text-decoration: none;
      }
    
      &:hover .link-box__title,
      &:focus .link-box__title {
        text-decoration: underline;
      }
    
      @include mq($from: m) {
        padding: 2.5rem 3rem;
      }
    }
    
    .link-box__icon {
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%);
    
      @include mq($from: m) {
        right: 3rem;
      }
    }
    
    .link-box__title {
      font-weight: bold;
    }
    
  • URL: /components/raw/link-box/link-box.scss
  • Filesystem Path: src/components/atoms/link-box/link-box.scss
  • Size: 558 Bytes

There are no notes for this item.