Tile aggregator: Con Sublinks Y Accordion

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="tile-aggregator contentTable">
    <div class="tile-aggregator__title">
        <p class="
                title-m
                
                
                
                
            ">Sobre UCI</p>

    </div>
    <div class="tile-aggregator__body">
        <ul class="tile-aggregator__list">
            <li class="tile-aggregator__item singleAccordion">
                <div class="tile-aggregator__link singleAccordion__trigger">
                    <a class="link
                                link_simple
                                
                                
                                
                                
                                link_has-icon link_has-icon_after
                                
                                
                                
                                
                                
                                
                                link_continue
                                
                                
                                
                                
                                
                                
                                " href="#">
                        <span>¿Qué necesito para solicitar una hipoteca?</span>
                        <svg class="icon icon-chebron-left      icon-after">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                        </svg>
                    </a>

                </div>
                <ul class="tile-aggregator__list singleAccordion__item-content">
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                </ul>
            </li>
            <li class="tile-aggregator__item singleAccordion">
                <div class="tile-aggregator__link singleAccordion__trigger">
                    <a class="link
                                link_simple
                                
                                
                                
                                
                                link_has-icon link_has-icon_after
                                
                                
                                
                                
                                
                                
                                link_continue
                                
                                
                                
                                
                                
                                
                                " href="#">
                        <span>¿Tengo que tener dinero ahorrado?</span>
                        <svg class="icon icon-chebron-left      icon-after">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                        </svg>
                    </a>

                </div>
                <ul class="tile-aggregator__list singleAccordion__item-content">
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                </ul>
            </li>
            <li class="tile-aggregator__item singleAccordion">
                <div class="tile-aggregator__link singleAccordion__trigger">
                    <a class="link
                                link_simple
                                
                                
                                
                                
                                link_has-icon link_has-icon_after
                                
                                
                                
                                
                                
                                
                                link_continue
                                
                                
                                
                                
                                
                                
                                " href="#">
                        <span>¿Qué necesito para solicitar una hipoteca?</span>
                        <svg class="icon icon-chebron-left      icon-after">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                        </svg>
                    </a>

                </div>
                <ul class="tile-aggregator__list singleAccordion__item-content">
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link">
                            <a class="link
                                        link_simple
                                        
                                        
                                        
                                        
                                        link_has-icon link_has-icon_after
                                        
                                        
                                        
                                        
                                        
                                        
                                        link_continue
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#">
                                <span>Soy un sub link</span>
                                <svg class="icon icon-chebron-left      icon-after">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
                                </svg>
                            </a>

                        </div>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="tile-aggregator__extra">
            <div class="tile-aggregator__extra-link">
                <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                    <span>Más sobre UCI</span>
                </a>

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


        <div class="tile-aggregator{{#if isContentTable}} contentTable{{/if}}">
    <div class="tile-aggregator__title">
        {{> @title-m title }}
        {{#if title-icon}}{{> @icon title-icon }}{{/if}}
    </div>
    <div class="tile-aggregator__body">
        {{#if link}}
        <ul class="tile-aggregator__list">
            {{#each link}}
            <li class="tile-aggregator__item{{#if isAccordion}} singleAccordion{{/if}}">
                <div class="tile-aggregator__link{{#if isAccordion}} singleAccordion__trigger{{/if}}{{#if active}} active{{/if}}">
                    {{> @link this }}
                </div>
                {{#if sublink}}
                <ul class="tile-aggregator__list{{#if isAccordion}} singleAccordion__item-content{{/if}}">
                    {{#each sublink}}
                    <li class="tile-aggregator__item">
                        <div class="tile-aggregator__link{{#if active}} active{{/if}}">
                            {{> @link this }}
                        </div>
                    </li>
                    {{/each}}
                </ul>
                {{/if}}
            </li>
            {{/each}}
        </ul>
        {{/if}}
        {{#if faq}}
        <ul class="tile-aggregator__faq">
            {{#each faq}}
            <li class="tile-aggregator__faq-item">
                <div class="tile-aggregator__faq-title">
                    {{> @bodycopy-l this.title }}
                </div>
                <div class="tile-aggregator__faq-desc">
                    {{> @bodycopy-m this.desc }}
                </div>
            </li>
            {{/each}}
        </ul>
        {{/if}}
        {{#if extra-link}}
        <div class="tile-aggregator__extra">
            <div class="tile-aggregator__extra-link">
                {{> @link extra-link }}
            </div>
        </div>
        {{/if}}
    </div>
</div>


        
            
            {
  "title": {
    "text": "Sobre UCI",
    "isP": true
  },
  "link": [
    {
      "isAccordion": true,
      "isSimple": true,
      "isContinue": true,
      "icon-after": {
        "name": "chebron-left",
        "isAfter": true
      },
      "href": "#",
      "text": "¿Qué necesito para solicitar una hipoteca?",
      "sublink": [
        {
          "isSimple": true,
          "isContinue": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "href": "#",
          "text": "Soy un sub link"
        },
        {
          "isSimple": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "isContinue": true,
          "href": "#",
          "text": "Soy un sub link"
        },
        {
          "isSimple": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "isContinue": true,
          "href": "#",
          "text": "Soy un sub link"
        }
      ]
    },
    {
      "isAccordion": true,
      "isSimple": true,
      "icon-after": {
        "name": "chebron-left",
        "isAfter": true
      },
      "isContinue": true,
      "href": "#",
      "text": "¿Tengo que tener dinero ahorrado?",
      "sublink": [
        {
          "isSimple": true,
          "isContinue": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "href": "#",
          "text": "Soy un sub link"
        },
        {
          "isSimple": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "isContinue": true,
          "href": "#",
          "text": "Soy un sub link"
        },
        {
          "isSimple": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "isContinue": true,
          "href": "#",
          "text": "Soy un sub link"
        }
      ]
    },
    {
      "isAccordion": true,
      "isSimple": true,
      "icon-after": {
        "name": "chebron-left",
        "isAfter": true
      },
      "isContinue": true,
      "href": "#",
      "text": "¿Qué necesito para solicitar una hipoteca?",
      "sublink": [
        {
          "isSimple": true,
          "isContinue": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "href": "#",
          "text": "Soy un sub link"
        },
        {
          "isSimple": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "isContinue": true,
          "href": "#",
          "text": "Soy un sub link"
        },
        {
          "isSimple": true,
          "icon-after": {
            "name": "chebron-left",
            "isAfter": true
          },
          "isContinue": true,
          "href": "#",
          "text": "Soy un sub link"
        }
      ]
    }
  ],
  "extra-link": {
    "href": "#",
    "text": "Más sobre UCI"
  },
  "isContentTable": true
}

File:

Content:


                                .tile-aggregator {
    flex: inherit;
    padding: 40px 20px 26px;
    background-color: var(--color-accent-light);

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

    &__title {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 20px;

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

        &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 1px;
            background-color: var(--color-accent-dark);
            content: '';
        }
    }

    &__item {
        position: relative;

        .tile-aggregator__link {
            .link {
                padding-bottom: 16px;
                line-height: 20px;
            }
        }

        .tile-aggregator__item{
            .link{color: var(--color-text-subtle); padding-left:24px;}
        }

    }

    &__link {
        width: 100%;

        .link {
            display: block;
            width: inherit;
            padding-bottom: 20px;

            @media (--viewport-sm-min) {
                padding-bottom: 15px;
            }
            
            span{display: inline;}
        }
    }

    &__faq {
        &-item {
            margin-bottom: 40px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        &-title {
            margin-bottom: 10px;
        }
    }

    &__extra {
        margin-top: 14px;

        .link {
            display: block;
            width: 100%;
        }
    }
    .singleAccordion__trigger {
        padding: 0;
        &:before{
            display: none;
        }
    }
    
    &.contentTable{
        padding: 40px;
        overflow-y: auto;
        max-height: calc(100vh);
        .tile-aggregator__title {
            padding-bottom: 24px;
            margin-bottom: 32px;
        }
        .tile-aggregator__item {
    
            .link{
                color: var(--color-text-subtle);
            }

            .tile-aggregator__link.active{
                .link{
                    color: var(--color-text);
                }
            }
    
        }
    }
}

URL: /components/raw/tile-aggregator/tile-aggregator.css
Filesystem Path: src/02-molecules/tile-aggregator/tile-aggregator.css
Size: 2.2 KB

Handle: @tile-aggregator--con-sublinks-y-accordion
Variants (7): Default , Hipotecas , With Extra Link , Faq , Hipotecas Faq , Con Sublinks , Con Sublinks Y Accordion
Preview:
- With layout
- Component only
Filesystem Path: src/02-molecules/tile-aggregator/tile-aggregator.hbs
References (5): @title-m, @icon, @link, @bodycopy-l, @bodycopy-m

No notes defined.