UCI

Tile aggregator: Faq 

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

    </div>
    <div class="tile-aggregator__body">
        <ul class="tile-aggregator__faq">
            <li class="tile-aggregator__faq-item">
                <div class="tile-aggregator__faq-title">
                    <div id="" class="
                        bodycopy-l
                        
                        
                        
                    ">Title de la faq</div>
                </div>
                <div class="tile-aggregator__faq-desc">
                    <div class="
                        bodycopy-m
                        
                        
                        
                    ">
                        Descripción de la faq
                    </div>
                </div>
            </li>
            <li class="tile-aggregator__faq-item">
                <div class="tile-aggregator__faq-title">
                    <div id="" class="
                        bodycopy-l
                        
                        
                        
                    ">Title de la faq2</div>
                </div>
                <div class="tile-aggregator__faq-desc">
                    <div class="
                        bodycopy-m
                        
                        
                        
                    ">
                        Descripción de la faq2
                    </div>
                </div>
            </li>
            <li class="tile-aggregator__faq-item">
                <div class="tile-aggregator__faq-title">
                    <div id="" class="
                        bodycopy-l
                        
                        
                        
                    ">Title de la faq3</div>
                </div>
                <div class="tile-aggregator__faq-desc">
                    <div class="
                        bodycopy-m
                        
                        
                        
                    ">
                        Descripción de la faq3
                    </div>
                </div>
            </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": false,
  "extra-link": {
    "href": "#",
    "text": "Más sobre UCI"
  },
  "faq": [
    {
      "title": {
        "text": "Title de la faq"
      },
      "desc": {
        "text": "Descripción de la faq"
      }
    },
    {
      "title": {
        "text": "Title de la faq2"
      },
      "desc": {
        "text": "Descripción de la faq2"
      }
    },
    {
      "title": {
        "text": "Title de la faq3"
      },
      "desc": {
        "text": "Descripción de la faq3"
      }
    }
  ]
}
  • 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

No notes defined.