UHasselt Component Library

subnav: Default 

<div class='subnav '>
    <ul class='subnav-items'>

        <div class="link-list transparent">
            <ul class="link-list-ul">
                <li class="link-list-li">
                    <a href="#" class="link " aria-label="" title="">
                        <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                        <span class="text">A USP for UHasselt</span>

                    </a>

                </li>

                <li class="link-list-li">
                    <a href="#" class="link " aria-label="" title="">
                        <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                        <span class="text">Another USP for UHasselt</span>

                    </a>

                </li>

                <li class="link-list-li">
                    <a href="#" class="link " aria-label="" title="">
                        <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                        <span class="text">And a third USP for UHasselt</span>

                    </a>

                </li>

                <li class="link-list-li">
                    <a href="#" class="link " aria-label="" title="">
                        <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                        <span class="text">And a third USP for UHasselt</span>

                    </a>

                </li>

                <li class="link-list-li">
                    <a href="#" class="link " aria-label="" title="">
                        <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                        <span class="text">A USP for UHasselt</span>

                    </a>

                </li>

                <li class="link-list-li">
                    <a href="#" class="link " aria-label="" title="">
                        <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
                        <span class="text">Another USP for UHasselt</span>

                    </a>

                </li>

            </ul>

        </div>

    </ul>
    <div class='subnav-footer'>
        <a href="#" class="link " aria-label="" title="This is what a link looks like">
            <span class="icon fas fa-caret-right   " aria-hidden="true"></span>
            <span class="text">This is what a link looks like</span>

        </a>

    </div>
</div>
 
<div class='subnav {{#unless link}}subnav-cols{{/unless}}'>
    <ul class='subnav-items'>
       
        {{#if @root.link}}
           {{render '@link-list--link-list-transparent-no-cta-6'}}
        {{else}}
            {{#each items as |item|}}
                {{render '@link-list--link-list-white-red-no-button'}}
            {{/each}}
        {{/if}}
       
    </ul>
    {{#if footerLink}}
        <div class='subnav-footer'>
            {{render '@link' footerLink}}
        </div>
    {{/if}}
</div>
 
{
  "items": [
    {
      "text": "A USP for UHasselt"
    },
    {
      "text": "Another USP for UHasselt"
    },
    {
      "text": "And a third USP for UHasselt"
    },
    {
      "text": "A USP for UHasselt"
    },
    {
      "text": "Another USP for UHasselt"
    },
    {
      "text": "And a third USP for UHasselt"
    }
  ],
  "footerLink": {
    "modifier": "",
    "element": "a",
    "href": "#",
    "title": "This is what a link looks like",
    "text": "This is what a link looks like",
    "iconBefore": {
      "icon": "fa-caret-right",
      "style": "fas"
    }
  },
  "link": true,
  "cols": 1
}
  • Content: 
    .subnav {
    @apply z-10 min-w-max bg-white;

    display: block;
    opacity: 1;

    .subnav-items {
        @apply p-6;

        .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: 24px;

            @screen 2xl {
                width: 1472px;
                grid-template-columns: repeat(6, 1fr);
            }
        }
    }
}
  • URL: /components/raw/subnav/subnav.css
  • Filesystem Path: src\components\03-molecules\subnav\subnav.css
  • Size: 990 Bytes

No notes defined.