hkk Frontend 2017

Link Box Group 

<div class="link-box-group">
    <div class="link-box-group__item">
        <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-db32" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
        </a>
    </div>
    <div class="link-box-group__item">
        <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-c8a5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
        </a>
    </div>
    <div class="link-box-group__item">
        <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-ef89" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
        </a>
    </div>
    <div class="link-box-group__item">
        <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-67c7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
        </a>
    </div>
    <div class="link-box-group__item">
        <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-465b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>
        </a>
    </div>
</div>
 
//- Render link list
#{tag || 'div'}.link-box-group&attributes(attr)
  if items
    each item in items
      .link-box-group__item
        != include('@link-box', item)
 
{
  "items": [
    {
      "title": "www.lorem-ipsum.de",
      "text": "Hier steht eine Subline mit zusätzlichen Informationen",
      "link": "#"
    },
    {
      "title": "www.lorem-ipsum.de",
      "text": "Hier steht eine Subline mit zusätzlichen Informationen",
      "link": "#"
    },
    {
      "title": "www.lorem-ipsum.de",
      "text": "Hier steht eine Subline mit zusätzlichen Informationen",
      "link": "#"
    },
    {
      "title": "www.lorem-ipsum.de",
      "text": "Hier steht eine Subline mit zusätzlichen Informationen",
      "link": "#"
    },
    {
      "title": "www.lorem-ipsum.de",
      "text": "Hier steht eine Subline mit zusätzlichen Informationen",
      "link": "#"
    }
  ]
}

There are no notes for this item.