UCI

Header submenu: Text 

<div id="id" class="header-submenu">
    <div class="row">
        <div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
            <div class="header-submenu__main block">
                <ul class="header-submenu__main-list">
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            <div class="header-submenu__main-list-item-tile-link">
                                <a class="link
                                            link_simple
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                    <span>Texto de enlace del item</span>
                                </a>

                            </div>
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                <span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                            </div>
                        </div>
                    </li>
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            <div class="header-submenu__main-list-item-tile-link">
                                <a class="link
                                            link_simple
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                    <span>Texto de enlace del item</span>
                                </a>

                            </div>
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                <span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                            </div>
                        </div>
                    </li>
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            <div class="header-submenu__main-list-item-tile-link">
                                <a class="link
                                            link_simple
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                    <span>Texto de enlace del item</span>
                                </a>

                            </div>
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                <span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                            </div>
                        </div>
                    </li>
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            <div class="header-submenu__main-list-item-tile-link">
                                <a class="link
                                            link_simple
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                    <span>Texto de enlace del item</span>
                                </a>

                            </div>
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                <span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                            </div>
                        </div>
                    </li>
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            <div class="header-submenu__main-list-item-tile-link">
                                <a class="link
                                            link_simple
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                    <span>Texto de enlace del item</span>
                                </a>

                            </div>
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                <span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                            </div>
                        </div>
                    </li>
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            <div class="header-submenu__main-list-item-tile-link">
                                <a class="link
                                            link_simple
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#">
                                    <span>Texto de enlace del item</span>
                                </a>

                            </div>
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                <span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="header-submenu__main-link-optional">
                    <a class="link
                                    
                                    
                                    
                                    
                                    
                                    link_has-icon link_has-icon_after
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    " href="#">
                        <span>Texto del link opcional</span>
                        <svg class="icon icon-16_chevron-right      icon-after">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
                        </svg>
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div{{#if id}} id="{{id}}" {{/if}} class="header-submenu">
    <div class="row">
        <div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
            <div class="header-submenu__main block">
                <ul class="header-submenu__main-list">
                    {{#each item}}
                    {{#if this.label}}
                    <li class="header-submenu__main-list-wrap">
                        <ul>
                            <li class="header-submenu__main-list-wrap-item">
                                {{> @caption this.label }}
                                {{#each subitem}}
                                <div class="header-submenu__main-list-wrap-item-subitem">
                                    <div class="header-submenu__main-list-wrap-item-subitem-link">
                                        {{> @link this.link }}
                                    </div>
                                </div>
                                {{/each}}
                            </li>
                        </ul>
                    </li>
                    {{else}}
                    <li class="header-submenu__main-list-item">
                        <div class="header-submenu__main-list-item-tile">
                            {{#if this.icon}}
                            <div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
                                {{> @icon this.icon }}
                            </div>
                            {{/if}}
                            <div class="header-submenu__main-list-item-tile-link">
                                {{> @link this.link }}
                            </div>
                            {{#if this.text}}
                            <div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
                                {{> @bodycopy this.text }}
                            </div>
                            {{/if}}
                        </div>
                    </li>
                    {{/if}}
                    {{/each}}
                </ul>
                {{#if sidebar}}
                {{else}}
                    {{#if link-optional}}
                    <div class="header-submenu__main-link-optional">
                        {{> @link link-optional }}
                    </div>
                    {{/if}}
                {{/if}}
            </div>
            {{#if sidebar}}
            <div class="header-submenu__sidebar block">
                <div class="header-submenu__sidebar-text hidden-xs-ms">
                    {{> @title sidebar.text }}
                </div>
                {{#if link-optional}}
                <div class="header-submenu__sidebar-link-optional">
                    {{> @link link-optional }}
                </div>
                {{/if}}
            </div>
            {{/if}}
        </div>
    </div>
    </div>
 
{
  "id": "id",
  "item": [
    {
      "icon": false,
      "link": {
        "text": "Texto de enlace del item",
        "isSimple": "true",
        "href": "#"
      },
      "text": {
        "text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
        "type": "-s"
      }
    },
    {
      "icon": false,
      "link": {
        "text": "Texto de enlace del item",
        "isSimple": "true",
        "href": "#"
      },
      "text": {
        "text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
        "type": "-s"
      }
    },
    {
      "icon": false,
      "link": {
        "text": "Texto de enlace del item",
        "isSimple": "true",
        "href": "#"
      },
      "text": {
        "text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
        "type": "-s"
      }
    },
    {
      "icon": false,
      "link": {
        "text": "Texto de enlace del item",
        "isSimple": "true",
        "href": "#"
      },
      "text": {
        "text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
        "type": "-s"
      }
    },
    {
      "icon": false,
      "link": {
        "text": "Texto de enlace del item",
        "isSimple": "true",
        "href": "#"
      },
      "text": {
        "text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
        "type": "-s"
      }
    },
    {
      "icon": false,
      "link": {
        "text": "Texto de enlace del item",
        "isSimple": "true",
        "href": "#"
      },
      "text": {
        "text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
        "type": "-s"
      }
    }
  ],
  "link-optional": {
    "text": "Texto del link opcional",
    "icon-after": {
      "name": "16_chevron-right",
      "isAfter": true
    },
    "href": "#"
  },
  "isText": true
}
  • Content: 
    .header-submenu {
    background-color: var(--color-background);
    padding: 40px 70px;

    @media (--viewport-ms-max) {
        padding: 15px 20px; /* old (para la refactorización del header se ha modificado CA. R. ) padding: 0 0 30px 20px;*/
    }

    .hidden-xs-ms {

        /* Este estilo debe ser sustituido por js (CA.R.) */
        @media (--viewport-ms-max) {
            display: none;
        }
    }

    &>.row>.col {
        display: flex;
        flex-direction: row;

        @media (--viewport-ms-max) {
            flex-direction: column;
        }

        .block:first-child {
            width: 69%;
            padding-right: 40px;

            @media (--viewport-md-max) {
                width: 63%;
            }

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

            .header-submenu__main-list {
                &-item {
                    width: calc(50% - 10px);

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

        .block:only-child {
            width: 100%;
            padding-right: 0;

            .header-submenu__main-list {
                &-item {
                    width: calc(33.3% - 13.3px);

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

    &__main {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        &-list {
            display: flex;
            flex-wrap: wrap;
            row-gap: 40px;
            column-gap: 20px;
            width: 100%;

            @media (--viewport-ms-max) {
                flex-direction: column;
                grid-row-gap: 24px;
            }

            &-item {
                /*width: calc(33.3% - 13.3px);*/

                &-tile {
                    display: flex;
                    flex-direction: column;
                    row-gap: 8px;

                    &-icon {line-height: 0;}

                    &-link {
                        a.link {
                            color: var(--color-text-link-secondary);
                            text-decoration: underline;

                            span {
                                display: inline;
                            }

                            @media (--viewport-ms-max) {
                                font-family: 'Jornada Sans Book';
                                color: var(--color-text-link-primary);
                                text-decoration: none;
                                font-size: 16px;
                                line-height: 24px;
                                /* porque necesitamos que un link bodycopy-s se vea bodycopy-m en mobile  (CA. R.)*/
                            }
                        }
                    }

                }
            }

            &-wrap {
                width: calc(33.3% - 13.3px);
                flex-grow: 1;


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

                &-item {
                    .caption-label {
                        color: var(--color-text-accent);
                        margin-bottom: 8px;
                        @media (--viewport-ms-max) {
                            font-family: 'Jornada Sans Book';
                            text-transform: none;
                            letter-spacing: normal;
                            font-size: 16px;
                            line-height: 24px;
                            /* porque necesitamos que un link bodycopy-s se vea bodycopy-m en mobile  (CA. R.)*/
                        }
                    }

                    &-subitem {
                        margin-top: 16px;

                        &-link {
                            .icon {
                                @media (--viewport-ms-max) {
                                    display: none;
                                    /* Este estilo sería aconsejable sustituirlo por js (CA.R.) */
                                }
                            }
                        }
                    }
                }
            }
        }

        &-link-optional {
            margin-top: 40px;
            align-self: flex-end;

            .icon {
                fill: var(--color-icon);
            }

            @media (--viewport-ms-max) {
                margin-top: 24px;
                align-self: flex-start;

                .link {
                    padding: 0;

                    .icon {
                        display: none;
                    }
                }
            }
        }
    }

    &__sidebar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 31%;

        @media (--viewport-md-max) {
            width: 37%;
        }

        padding-left: 40px;
        border-left: solid 1px var(--color-border);

        @media (--viewport-ms-max) {
            width: 100%;
            padding-left: 0;
            border: 0;
        }

        &-text {}

        &-link-optional {
            margin-top: 40px;
            align-self: flex-start;

            .icon {
                fill: var(--color-icon);
            }

            @media (--viewport-ms-max) {
                margin-top: 24px;
                align-self: flex-start;
                margin-bottom: 14px;

                .link {
                    padding: 0;

                    .icon {
                        display: none;
                    }
                }
            }
        }
    }
}
  • URL: /components/raw/header-submenu/header-submenu.css
  • Filesystem Path: src/03-organisms/header-submenu/header-submenu.css
  • Size: 5.8 KB

Variantes: Default (products), Products, With a sidebar, Links (Insurances and services, About us and Help) Por defecto carga el listado de productos para que tenga contenido. Permite configurar título, icono y su alt, y de cada producto, su título, icono con alt.