UHasselt Component Library

Nav List 

<!-- Default -->
<div class='nav-list-item'>
    <a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
        <div class='nav-list-item-icon'>
            <span class="icon fal fa-car   " aria-hidden="true"></span>
        </div>

        <p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
    </a>

</div>


<!-- Nav List Plus -->
<div class='nav-list-item'>
    <a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
        <div class='nav-list-item-icon'>
            <span class="icon fal fa-car   " aria-hidden="true"></span>
        </div>

        <p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
    </a>

    <div class='nav-list-item-icon-action'>
        <button class="link " aria-label="" title="" id="">

            <span class="text"></span>

            <div class="span-icon-only">
                <span class="icon fal fa-plus   " aria-hidden="true"></span>
            </div>
        </button>

    </div>
</div>


<!-- Nav List Arrow Right -->
<div class='nav-list-item'>
    <a title="Woon -en werkverkeer" href="#" class='nav-list-item-first'>
        <div class='nav-list-item-icon'>
            <span class="icon fal fa-car   " aria-hidden="true"></span>
        </div>

        <p class='nav-list-item-first-title'>Woon -en werkverkeer</p>
    </a>

    <div class='nav-list-item-icon-action'>
        <button class="link " aria-label="" title="" id="">

            <span class="text"></span>

            <div class="span-icon-only">
                <span class="icon fal fa-chevron-right   " aria-hidden="true"></span>
            </div>
        </button>

    </div>
</div>


<div class='nav-list-item'>
    <{{element}}
        {{#if title}}title="{{title}}"{{/if}}
        {{#if href}}href="{{href}}"{{/if}}
        {{#if target}}target="{{target}}"{{/if}}
        {{#if id}}id="{{id}}"{{/if}}
        class='nav-list-item-first'
    >
        <div class='nav-list-item-icon'>
            {{render '@icon' icon-label}}
        </div>

        <p class='nav-list-item-first-title'>{{text}}</p>
    </{{element}}>

    {{#if icon-action}}
        <div class='nav-list-item-icon-action'>
            {{render '@link--icon-only' icon-action}}
        </div>
    {{/if}}
</div>
 
/* Default */
{
  "element": "a",
  "href": "#",
  "title": "Woon -en werkverkeer",
  "icon-label": {
    "style": "fal",
    "icon": "fa-car"
  },
  "text": "Woon -en werkverkeer"
}


/* Nav List Plus */
{
  "element": "a",
  "href": "#",
  "title": "Woon -en werkverkeer",
  "icon-label": {
    "style": "fal",
    "icon": "fa-car"
  },
  "text": "Woon -en werkverkeer",
  "modifier": "",
  "icon-action": {
    "element": "button",
    "action": {
      "icon": {
        "style": "fal",
        "icon": "fa-plus"
      }
    }
  }
}


/* Nav List Arrow Right */
{
  "element": "a",
  "href": "#",
  "title": "Woon -en werkverkeer",
  "icon-label": {
    "style": "fal",
    "icon": "fa-car"
  },
  "text": "Woon -en werkverkeer",
  "modifier": "",
  "icon-action": {
    "element": "button",
    "action": {
      "icon": {
        "style": "fal",
        "icon": "fa-chevron-right"
      }
    }
  }
}
  • Content: 
    .nav-list-item {
    @apply border-b border-solid border-gray;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .nav-list-item-first {
        display: flex;
        flex-grow: 1;
        align-items: center;
        padding: 12px 0;

        @screen sm {
            padding: 20px 0;
        }

        .nav-list-item-first-title {
            @apply text-black;

            font-size: 18px;
            font-weight: 400;
            font-family: 'Hind';
        }
    }

    .nav-list-item-icon,
    .nav-list-item-icon-action {
        font-size: 18px;
    }

    .nav-list-item-icon {
        @apply text-red;

        margin-right: 20px;
    }

    .nav-list-item-icon-action {
        @apply text-black-500;
    }
}
  • URL: /components/raw/nav-list-item/nav-list-item.css
  • Filesystem Path: src\components\03-molecules\nav-list-item\nav-list-item.css
  • Size: 801 Bytes

No notes defined.