UHasselt Component Library

nav list: Nav List Theme 

<div class='nav-list subnav-cols'>
    <ul class='subnav-items '>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
    </ul>
</div>
 
<div class='nav-list {{#unless link}}subnav-cols{{/unless}}'>
    <ul class='subnav-items {{#unless nav-list-var}}subnav-items-favo{{/unless}}'>
        {{#if nav-list-var}}
            {{#each items}}
                {{render '@nav-list-item'}}
            {{/each}}
        {{else}}
            {{#each items}}
                {{render '@link-list--link-list-transparent-icons-single'}}
            {{/each}}
        {{/if}}
    </ul>
    {{#if footerLink}}
        <div class='subnav-footer'>
            {{render '@link' footerLink}}
        </div>
    {{/if}}
</div>
 
{
  "modifier": "",
  "cols": 4,
  "link": false,
  "items": [
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {},
    {}
  ],
  "footerLink": false,
  "nav-list-var": true
}
  • Content: 
    .nav-list {
    @apply z-10 left-0 min-w-max pointer-events-none bg-white;
    top: 30px;

    display: block;
    opacity: 1;

    .subnav-items {
        .subnav-item {
            @apply hover:bg-red hover:text-white;

            max-width: 240px;

            > a {
                @apply block hover:bg-red hover:text-white;

                font-size: 1.125rem;
                line-height: 1.875rem;

                .icon {
                    @apply mr-2;
                }
            }
        }
    }

    .subnav-footer {
        @apply bg-gray-400;

        padding: 12px 24px;
    }

    &.subnav-cols {
        width: 100%;

        .subnav-items {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 0 50px;

            @screen 2xl {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 0 50px;
            }
        }

        .subnav-items-favo {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

            @screen xl {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 0 50px;
            }
        }
    }
}
  • URL: /components/raw/nav-list/nav-list.css
  • Filesystem Path: src\components\03-molecules\nav-list\nav-list.css
  • Size: 1.4 KB

No notes defined.