hkk Frontend 2017

Icon-Liste 

<!-- Standard -->
<ul class="icon-list">
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--internal-link" id="icon-da94" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--external-link" id="icon-3755" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Externer Link
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--download" id="icon-468a" 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>
    </li>
</ul>


<!-- Liniert -->
<ul class="icon-list icon-list--lined">
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--internal-link" id="icon-046a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--external-link" id="icon-b965" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Externer Link
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--download" id="icon-9c5b" 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>
    </li>
</ul>


<!-- Liniert -->
<ul class="icon-list icon-list--lined icon-list--lined-without-trailing">
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--internal-link" id="icon-877e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Interner Link
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--external-link" id="icon-32e2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-external-link"></use>
</svg>Externer Link
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--download" id="icon-77bf" 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>
    </li>
</ul>


<!-- Kontaktliste -->
<ul class="icon-list icon-list--lined">
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--mail" id="icon-136b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>E-Mail schreiben
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--form" id="icon-e817" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-form"></use>
</svg>Kontaktformular
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--pin" id="icon-cafa" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-pin"></use>
</svg>Geschäftstelle finden
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--position" id="icon-6e51" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-position"></use>
</svg>hkk Krankenkasse<br/>Martinistraße 26, 28195 Bremen
        </a>
    </li>
    <li class="icon-list__item">
        <a class="icon-block" href="#">
            <svg class="icon icon-block__icon icon--debit-card" id="icon-e601" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-debit-card"></use>
</svg>
            <HKK>E-Rechnung</HKK>
        </a>
    </li>
    <li class="icon-list__item">
        <span class="icon-block">
<svg class="icon icon-block__icon icon--phone" id="icon-dfbc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-phone"></use>
</svg>Kassenwechsler: 0421 3655-8584<br/>Kunden: 0800 2555444 (kostenlos)<br/>Bremer Kunden: 0421 3655-0<br/>(Mo-Fr: 8-20 Uhr)
</span>
    </li>
</ul>


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

  //- Process options
  if (modifier) attr.class.push(`icon-list--${modifier}`);
  if (lined) attr.class.push('icon-list--lined');
  if (linedWithoutTrailing) attr.class.push('icon-list--lined-without-trailing');

//- Render link list
ul.icon-list&attributes(attr)
  if items
    each item in items
      li.icon-list__item&attributes(item.itemAttr)
        != include('@icon-block', item)
 
/* Standard */
{
  "items": [
    {
      "text": "Interner Link",
      "icon": "internal-link"
    },
    {
      "text": "Externer Link",
      "icon": "external-link"
    },
    {
      "text": "Download-Link",
      "icon": "download",
      "sub": "(PDF, 2MB)"
    }
  ]
}


/* Liniert */
{
  "items": [
    {
      "text": "Interner Link",
      "icon": "internal-link"
    },
    {
      "text": "Externer Link",
      "icon": "external-link"
    },
    {
      "text": "Download-Link",
      "icon": "download",
      "sub": "(PDF, 2MB)"
    }
  ],
  "lined": true
}


/* Liniert */
{
  "items": [
    {
      "text": "Interner Link",
      "icon": "internal-link"
    },
    {
      "text": "Externer Link",
      "icon": "external-link"
    },
    {
      "text": "Download-Link",
      "icon": "download",
      "sub": "(PDF, 2MB)"
    }
  ],
  "lined": true,
  "linedWithoutTrailing": true
}


/* Kontaktliste */
{
  "items": [
    {
      "text": "E-Mail schreiben",
      "icon": "mail",
      "link": "#"
    },
    {
      "text": "Kontaktformular",
      "icon": "form",
      "link": "#"
    },
    {
      "text": "Geschäftstelle finden",
      "icon": "pin",
      "link": "#"
    },
    {
      "content": "| hkk Krankenkasse#[br]Martinistraße 26, 28195 Bremen",
      "icon": "position",
      "link": "#"
    },
    {
      "content": "HKK E-Rechnung",
      "icon": "debit-card",
      "link": "#"
    },
    {
      "content": "| Kassenwechsler: 0421 3655-8584#[br]Kunden: 0800 2555444 (kostenlos)#[br]Bremer Kunden: 0421 3655-0#[br](Mo-Fr: 8-20 Uhr)\n",
      "icon": "phone",
      "link": null
    }
  ],
  "lined": true
}
  • Content: 
    .icon-list {
  @include list-reset();

  margin-bottom: $spacer;
  width: 100%;
}

.icon-list--lined {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.icon-list__item {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;

  .icon-list--lined &:first-child {
    border-top: 1px solid $color-steelgrey-light;
  }

  .icon-list--lined & {
    border-bottom: 1px solid $color-steelgrey-light;
    padding-bottom: 1rem;
    padding-top: 1rem;
  }

  .icon-list--lined-without-trailing &:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.box--light-blue .icon-list--lined .icon-list__item,
.footer .icon-list--lined .icon-list__item {
  border-color: $color-steelgrey;
}
  • URL: /components/raw/icon-list/icon-list.scss
  • Filesystem Path: src/components/molecules/icon-list/icon-list.scss
  • Size: 684 Bytes

There are no notes for this item.