<!-- 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-df25" 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-0c3c" 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-6454" 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-0ab1" 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-b46a" 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-a9d2" 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-69ed" 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-fe5e" 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-c7e4" 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-0db3" 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-09d2" 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-c2fe" 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-f784" 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-35f5" 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-8ff9" 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.