hkk Frontend 2017

Icon-Block 

<!-- Interner Link -->
<a class="icon-block" href="#">
    <svg class="icon icon-block__icon icon--internal-link" id="icon-79d8" 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-2622" 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-06c4" 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-02c2" 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.