UCI

Tile Header Submenu: Without Submenu 

<div class="tile-header-submenu">

    <div class="tile-header-submenu__title">
        <p class="
            title-s
            
        ">Os nossos simuladores</p>
    </div>

</div>
 
<div class="tile-header-submenu">

    <div class="tile-header-submenu__title">
        {{> @title-s title }}
    </div>

    {{#if isSubMenu}}
    <ul class="tile-header-submenu__linksRow">
        {{#each link}}
        <li class="tile-header-submenu__linksRow-link">
            {{> @link this }}
        </li>
        {{/each}}
    </ul>
    {{/if}}

</div>
 
{
  "isSubMenu": false,
  "title": {
    "text": "Os nossos simuladores",
    "isP": true
  },
  "link": [
    {
      "isSubMenuLink": true,
      "href": "#",
      "text": "Simulador Crédito Habitação"
    },
    {
      "isSubMenuLink": true,
      "href": "#",
      "text": "Simulador Quanto Posso Pedir"
    },
    {
      "isSubMenuLink": true,
      "href": "#",
      "text": "Simulador Quanto Posso Pedir"
    },
    {
      "isSubMenuLink": true,
      "href": "#",
      "text": "Simulador Quanto Posso Pedir"
    },
    {
      "isSubMenuLink": true,
      "href": "#",
      "text": "Simulador Quanto Posso Pedir"
    },
    {
      "isSubMenuLink": true,
      "href": "#",
      "text": "Simulador Quanto Posso Pedir"
    }
  ]
}
  • Content: 
    .tile-header-submenu {
    display: block;
    width: max-content;
    margin-bottom: 10px;

    &__title {
        margin-bottom: 20px;
        .title-s {
            font-size: 16px;
            font-family: 'Jornada Sans Medium';
            font-weight: 800;
        }
    }

    &__item {
        @media (--viewport-ms-min) {
            margin-bottom: 15px;
        }
    }

    &__linksRow {
        display: flex;
        flex-flow: column wrap;
        width: max-content;

        &-link {
            display: block;
            margin-bottom: 15px;

            @media (--viewport-ms-max) {
                margin-bottom: 20px;
            }

            .link {
                color: var(--color-text);
                font-family: 'Jornada Sans Book';
                font-size: 16px;

                &:hover,
                &:focus {
                    color: var(--color-text);
                    span {
                        &::after {
                            background-color: var(--color-text);
                        }
                    }
                }
            }
        }
        
        &-cta-mobile{

            display: none; 
            
            @media (--viewport-ms-max) { 
                        display: block; 
                
            }
        }
    }
}
  • URL: /components/raw/tile-header-submenu/tile-header-submenu.css
  • Filesystem Path: src/02-molecules/tile-header-submenu/tile-header-submenu.css
  • Size: 1.3 KB

No notes defined.