UCI

Header submenu: About 

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

    <div class="header-fixed-submenu__blocks">

        <div class="header-fixed-submenu__blocks-tiles">

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

                    <div class="tile-header-submenu__title">
                        <p class="
                            title-s
                            
                        ">Sobre a UCI</p>
                    </div>

                    <ul class="tile-header-submenu__linksRow">
                        <li class="tile-header-submenu__linksRow-link">
                            <a class="link
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_submenu
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Sobre nós link 1</span>
                            </a>

                        </li>
                        <li class="tile-header-submenu__linksRow-link">
                            <a class="link
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_submenu
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Sobre nós link 2</span>
                            </a>

                        </li>
                        <li class="tile-header-submenu__linksRow-link">
                            <a class="link
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_submenu
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Sobre nós link 3</span>
                            </a>

                        </li>
                        <li class="tile-header-submenu__linksRow-link">
                            <a class="link
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_submenu
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Sobre nós link 4</span>
                            </a>

                        </li>
                        <li class="tile-header-submenu__linksRow-link">
                            <a class="link
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_submenu
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Sobre nós link 5</span>
                            </a>

                        </li>
                    </ul>

                </div>
            </div>
        </div>

    </div>

    <div class="header-fixed-submenu__cardSection">
        <div class="card-menu">

            <div class="card-menu__img">
                <a href="#" class="card-menu__img" title="Image description" style="background-image:url(/dist/images/header-highlight-bg.jpg)">
                </a>
            </div>

            <div class="card-menu__title">
                <p class="
                    title-s
                    
                ">Saiba mais sobre a nossa organização.</p>
            </div>

            <div class="card-menu__cta-btn sticky">
                <a class="btn 
                        
                         
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        " href="#" id="">
                    Sobre Nós
                </a>
            </div>

        </div>
    </div>

</div>
 
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="header-fixed-submenu">


    <div class="header-fixed-submenu__blocks">

        <div class="header-fixed-submenu__blocks-tiles">
            {{#each blocks}}

            <div class="header-fixed-submenu__blocks-tile">
                {{> @tile-header-submenu this }}
            </div>
            {{/each}}
        </div>

    </div>

    {{#each cards}}
    <div class="header-fixed-submenu__cardSection">
        {{> @card-menu this }}
    </div>
    {{/each}}


</div>
 
{
  "hasID": false,
  "blocks": [
    {
      "isSubMenu": true,
      "title": {
        "text": "Sobre a UCI",
        "isP": true
      },
      "link": [
        {
          "isSubMenuLink": true,
          "href": "#",
          "text": "Sobre nós link 1"
        },
        {
          "isSubMenuLink": true,
          "href": "#",
          "text": "Sobre nós link 2"
        },
        {
          "isSubMenuLink": true,
          "href": "#",
          "text": "Sobre nós link 3"
        },
        {
          "isSubMenuLink": true,
          "href": "#",
          "text": "Sobre nós link 4"
        },
        {
          "isSubMenuLink": true,
          "href": "#",
          "text": "Sobre nós link 5"
        }
      ]
    }
  ],
  "cards": [
    {
      "hasImage": true,
      "href": "#",
      "alt": "Image description",
      "src": "/dist/images/header-highlight-bg.jpg",
      "title": {
        "text": "Saiba mais sobre a nossa organização.",
        "isP": true
      },
      "cta-btn": {
        "href": "#",
        "text": "Sobre Nós"
      }
    }
  ]
}
  • Content: 
    .header-fixed-submenu {

    display: flex;

    min-height: 75%;


    @media (--viewport-ms-only) {
        margin-top: 15px;
    }

    @media (--viewport-sm-min) {
        margin: 40px 40px 40px;
        justify-content: center;
    }

    &__blocks {

        width: fit-content;
        /*as in mock-up */

        /* DESKTOP STYLIZATION */
        @media (--viewport-sm-min) {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        @media (--viewport-ms-max) {
            width: 100%;
        }


        &-tiles {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-grow: 1;

            min-height: 250px;
            overflow: auto;

            color: var(--color-secondary);

            @media (--viewport-ms-max) {
                flex-direction: column;
                min-height: fit-content;
            }

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

            @media (--viewport-ms-only) {
                margin-bottom: 25px;
                margin-right: 20px;
            }

        }

        &-list {
            @media (--viewport-xs-max) {
                margin-top: 20px;
            }

            @media (--viewport-ms-only) {
                margin-top: 30px;
            }

            @media (--viewport-sm-min) {
                margin-bottom: -30px;
            }
        }

        &-item {
            margin-bottom: 30px;

            @media (--viewport-ms-min) {
                margin-bottom: 40px;
            }

            @media (--viewport-sm-min) {
                margin-bottom: 30px;
            }
        }

        &-tile {
            padding-left: 10px;

            @media (--viewport-sm-min) {
                padding-right: 60px;
            }

            &-link {
                display: block;

                &:hover,
                &:focus {
                    .header-fixed-submenu__products-tile-title {
                        .bodycopy-m {
                            color: var(--color-accent);
                        }
                    }
                }
            }


            &-label {
                margin-bottom: 5px;
            }
        }
    }

    &__cardSection {
        display: none;

        /* ONLY DISPLAYED IN DESKTOP VIEWS */
        @media (--viewport-sm-min) {
            display: flex;
            justify-content: flex-start;
        }


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

        @media (--viewport-ms-only) {
            margin-bottom: 25px;
        }


    }


    &__links {
        @media (--viewport-xs-max) {
            margin-bottom: 10px;
        }

        &-list {
            @media (--viewport-sm-min) {
                margin-bottom: -30px;
            }
        }

        &-item {
            margin-bottom: 20px;

            @media (--viewport-ms-min) {
                margin-bottom: 40px;
            }

            @media (--viewport-sm-min) {
                margin-bottom: 30px;
            }
        }

        &-title {
            display: block;

            .title-m {
                font-size: 16px;
                /*antes sin tamaño de fuente definido, ni la clase*/
            }

            &:hover,
            &:focus {
                .title-m {
                    color: var(--color-accent);
                }
            }
        }

        &-subitem {
            margin-top: 10px;

            @media (--viewport-sm-min) {
                &:first-child {
                    margin-top: 20px;
                }
            }
        }

        &-link {
            .link {
                display: block;
                color: var(--color-accent);

                &:hover,
                &:focus {
                    color: var(--color-text);
                }
            }
        }

        &-text {
            margin-top: 10px;
        }
    }
}
  • URL: /components/raw/header-fixed-submenu/header-fixed-submenu.css
  • Filesystem Path: src/03-organisms/header-fixed-submenu/header-fixed-submenu.css
  • Size: 4.1 KB

No notes defined.