Foehn Design System

Linklist 

<div class="bg-primary bg-opacity-10 linklist-color-primary p-3 pb-4 text-primary vd-linklist">
    <h2 class="list-header m-0">Title</h2>
    <ul class="list-link list-unstyled">
        <li><a href="https://www.google.ch">Google</a></li>
        <li><a href="#">Informations</a></li>
    </ul>
    <div class="bottom-link text-center vd-text-md-small">
        <a href="#">En savoir plus <i class="fa fa-arrow-right-long"></i></a>
    </div>
</div>
 
<div class="bg-{{ color }} bg-opacity-10 linklist-color-{{ color }} p-3 pb-4 text-{{ color }} vd-linklist">
  <h2 class="list-header m-0">{{ title }}</h2>
  <ul class="list-link list-unstyled">
    {%- for link in links -%}
    <li><a href="{{ link.url }}">{{ link.label }}</a></li>
    {%- endfor -%}
  </ul>
  {%- if relatedLink -%}
    <div class="bottom-link text-center vd-text-md-small">
      <a href="{{ relatedLink.url }}">{{ relatedLink.label }} <i class="fa fa-arrow-right-long"></i></a>
    </div>
  {%- endif -%}
</div>
 
{
  "color": "primary",
  "title": "Title",
  "links": [
    {
      "url": "https://www.google.ch",
      "label": "Google"
    },
    {
      "url": "#",
      "label": "Informations"
    }
  ],
  "relatedLink": {
    "url": "#",
    "label": "En savoir plus"
  }
}
  • Content: 
    @charset 'UTF-8';

.vd-linklist {
  box-shadow: var(--bs-box-shadow);
}
$available-colors: primary, secondary;
@each $color in $available-colors {
  .linklist-color- {
    &#{$color} {
      a {
        color: var(--vd-#{$color}-dark) !important;

        &:hover,
        &:active {
          color: var(--vd-#{$color}-dark);
        }
      }

      .list-link li {
        border-bottom-color: var(--vd-#{$color}-dark);
      }
    }
  }
}
.bottom-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  i {
    padding-left: 8px;
    font-size: 130%;
  }
}
.list-header {
  font-family: var(--bs-font-sans-serif);
}
.list-link {
  a {
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    &:after {
      content: "\f054";
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: var(--fa-display, inline-block);
      font-style: normal;
      font-variant: normal;
      line-height: 1;
      text-rendering: auto;
      font-family: var(--fa-style-family, "Font Awesome 6 Free");
      font-weight: var(--fa-style, 900);
    }
  }
  li {
    padding: 1em 0;
    border-bottom: 1px solid #000;
    &:last-child {
      border-bottom: 0;
    }
  }
}
  • URL: /components/raw/linklist/_linklist.scss
  • Filesystem Path: src/components/02-molecules/linklist/_linklist.scss
  • Size: 1.3 KB

No notes defined.