PSI Software SE Design Library

Link List

No notes defined.

<!-- Default -->
<div class="linkList">

    <ul class="linkList-list">
        <li class="linkList-item">
            <a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
            </a>

        </li>
        <li class="linkList-item">
            <a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
            </a>

        </li>
        <li class="linkList-item">
            <a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
            </a>

        </li>
    </ul>

</div>


<!-- With Title -->
<div class="linkList">

    <div class="linkList-title"><strong>Ich bin der Titel</strong></div>

    <ul class="linkList-list">
        <li class="linkList-item">
            <a href="#" class="link"><span class="link-label">Ich bin ein Link</span><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
            </a>

        </li>
        <li class="linkList-item">
            <a href="#" class="link"><span class="link-label">Noch ein zweiter Link</span><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
            </a>

        </li>
        <li class="linkList-item">
            <a href="#" class="link"><span class="link-label">Ein Weiterer</span><svg class="icon is-arrow-right">
                    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
                </svg>
            </a>

        </li>
    </ul>

</div>


<div class="linkList{{#modifier}} {{.}}{{/modifier}}">

    {{#title}}<div class="linkList-title"><strong>{{{.}}}</strong></div>{{/title}}

        {{#if items}}
    <ul class="linkList-list">
            {{#items}}
        <li class="linkList-item">
            {{#link}}
                {{render '@link' (contextData '@linklist' this) merge=true}}
            {{/link}}
        </li>
            {{/items}}
    </ul>
        {{/if}}


</div>
 
/* Default */
{
  "items": [
    {
      "link": {
        "label": "Ich bin ein Link",
        "modifier": null,
        "icon": {
          "id": "arrow-right"
        }
      }
    },
    {
      "link": {
        "label": "Noch ein zweiter Link",
        "modifier": null,
        "icon": {
          "id": "arrow-right"
        }
      }
    },
    {
      "link": {
        "label": "Ein Weiterer",
        "modifier": null,
        "icon": {
          "id": "arrow-right"
        }
      }
    }
  ]
}


/* With Title */
{
  "items": [
    {
      "link": {
        "label": "Ich bin ein Link",
        "modifier": null,
        "icon": {
          "id": "arrow-right"
        }
      }
    },
    {
      "link": {
        "label": "Noch ein zweiter Link",
        "modifier": null,
        "icon": {
          "id": "arrow-right"
        }
      }
    },
    {
      "link": {
        "label": "Ein Weiterer",
        "modifier": null,
        "icon": {
          "id": "arrow-right"
        }
      }
    }
  ],
  "title": "Ich bin der Titel"
}
  • Content: 
    %linkList {
    @include stack-spacing(large);

    &-title {
        @extend %kicker;
        @include stack-spacing(0);
        margin-bottom: var(--sp-large);

        strong {
            font-weight: inherit;
        }

    }

    &-list {
        list-style: none;
        padding-left: 0;
        margin-top: calc(var(--sp) - var(--sp-large));
    }

    &-item {
        @include stack-spacing(small);

        .link {
            @include stack-spacing(0);
        }

    }

}

.linkList {
    @extend %linkList;

    &-title {
        @extend %linkList-title;
    }

    &-list {
        @extend %linkList-list;
    }

    &-item {
        @extend %linkList-item;
    }

}
  • URL: /components/raw/linklist/_linkList.styles.scss
  • Filesystem Path: components/03-fragments/linkList/_linkList.styles.scss
  • Size: 683 Bytes