<!-- Interner Link -->
<a class="icon-block" href="#">
    <svg class="icon icon-block__icon icon--internal-link" id="icon-3068" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
</a>

<!-- Externer Link -->
<a class="icon-block" href="#">
    <svg class="icon icon-block__icon icon--external-link" id="icon-ec4f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Externer Link
</a>

<!-- Download-Link -->
<a class="icon-block" href="#">
    <svg class="icon icon-block__icon icon--download" id="icon-22bc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-download"></use>
</svg>Download-Link<span class="icon-block__sub"> (PDF, 2MB)</span>
</a>

<!-- Telefon -->
<span class="icon-block">
<svg class="icon icon-block__icon icon--phone" id="icon-1679" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-phone"></use>
</svg>0421 3655-8584
</span>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Tag
  tag = 'span';
  if (attr.href || link) {
    attr.href = attr.href || link || '';
    tag = 'a';
  }

  //- Process options
  if (modifier) {
    attr.class.push(`icon-block--${modifier}`);
  }

//- Render atom
#{tag}.icon-block&attributes(attr)
  //- Icon
  != include('@icon', {icon, attr: {class: 'icon-block__icon'}})

  //- Content/text
  if content
    != renderPug(content)
  else if text
    | #{text}

  //- Subinformation
  if sub
    span.icon-block__sub  #{sub}
/* Interner Link */
{
  "text": "Interner Link",
  "icon": "internal-link",
  "link": "#"
}

/* Externer Link */
{
  "text": "Externer Link",
  "icon": "external-link",
  "link": "#"
}

/* Download-Link */
{
  "text": "Download-Link",
  "icon": "download",
  "sub": "(PDF, 2MB)",
  "link": "#"
}

/* Telefon */
{
  "icon": "phone",
  "text": "0421 3655-8584"
}

  • Content:
    .icon-block {
      display: inline-block;
    
      &[href] {
        @include link($color-blue-light, $color-blue);
    
        font-weight: bold;
      }
    }
    
    .icon-block__icon {
      color: $color-red;
      margin-right: 1.2rem;
    }
    
    .icon-block__sub {
      display: inline-block;
      font-weight: $root-font-weight;
      margin-left: 0.5rem;
    }
    
    .icon-list .icon-block {
      display: block;
      padding-left: calc(1em + 1.2rem);
    }
    
    .icon-list .icon-block__icon {
      margin-left: calc(-1em - 1.2rem);
    }
    
  • URL: /components/raw/icon-block/icon-block.scss
  • Filesystem Path: src/components/molecules/icon-block/icon-block.scss
  • Size: 457 Bytes

There are no notes for this item.