Foehn Design System

List Boxed 

<ul class="nav vd-list-boxed flex-column">

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Adipisci blanditiis quia aspernatur voluptas. <span class="fas fa-lock" aria-hidden="true" title="Cette prestation demande une identification"></span><span class="sr-only">(cette prestation demande un identification)</span></a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Sit laudantium ad magni ut consectetur ipsam.</a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Omnis est neque modi sit qui cumque atque voluptas.</a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Doloremque rerum voluptate.</a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Impedit provident esse voluptas nesciunt ipsum suscipit qui earum fuga. <span class="fas fa-lock" aria-hidden="true" title="Cette prestation demande une identification"></span><span class="sr-only">(cette prestation demande un identification)</span></a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Natus animi est mollitia.</a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Quidem accusamus et ipsum illo.</a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Non vel esse ex. <span class="fas fa-lock" aria-hidden="true" title="Cette prestation demande une identification"></span><span class="sr-only">(cette prestation demande un identification)</span></a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Qui ipsam magnam consectetur id itaque in. <span class="fas fa-lock" aria-hidden="true" title="Cette prestation demande une identification"></span><span class="sr-only">(cette prestation demande un identification)</span></a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-inline-block" href="#">Quia quis molestiae id.</a>
    </li>

</ul>
 
<ul class="nav vd-list-boxed flex-column">
  {% for item in list %}
  <li class="nav-item">
    <a class="nav-link d-inline-block" href="{{ item.url }}">{{ item.item }}{%
    if item.secure %} <span class="fas fa-lock" aria-hidden="true" title="Cette prestation demande une identification"></span><span class="sr-only">(cette prestation demande un identification)</span>{% endif %}</a>
  </li>
  {% endfor %}
</ul>
 
{
  "list": [
    {
      "item": "Adipisci blanditiis quia aspernatur voluptas.",
      "url": "#",
      "secure": true
    },
    {
      "item": "Sit laudantium ad magni ut consectetur ipsam.",
      "url": "#"
    },
    {
      "item": "Omnis est neque modi sit qui cumque atque voluptas.",
      "url": "#"
    },
    {
      "item": "Doloremque rerum voluptate.",
      "url": "#"
    },
    {
      "item": "Impedit provident esse voluptas nesciunt ipsum suscipit qui earum fuga.",
      "url": "#",
      "secure": true
    },
    {
      "item": "Natus animi est mollitia.",
      "url": "#"
    },
    {
      "item": "Quidem accusamus et ipsum illo.",
      "url": "#"
    },
    {
      "item": "Non vel esse ex.",
      "url": "#",
      "secure": true
    },
    {
      "item": "Qui ipsam magnam consectetur id itaque in.",
      "url": "#",
      "secure": true
    },
    {
      "item": "Quia quis molestiae id.",
      "url": "#"
    }
  ]
}
  • Content: 
    @charset 'UTF-8';
@use "sass:math";
@use "sass:color";

.vd-list-boxed {
  li {
    margin-bottom: $spacer;
  }

  .nav-link {
    display: inline;
    padding: (math.div($spacer, 5));
    background: $body-bg;
    color: $body-color;
    text-decoration: none;
    transition: background 0.2s;

    &:hover,
    &:focus {
      background: color.adjust($link-color, $lightness: 65%);
    }

    &:active {
      background: color.adjust($link-color, $lightness: 55%);
    }
  }
}
  • URL: /components/raw/list-boxed/_list-boxed.scss
  • Filesystem Path: src/components/01-atoms/list-boxed/_list-boxed.scss
  • Size: 481 Bytes

The .vd-list-boxed list is intended to be used inside a .vd-bg-pattern-green container.