UCI

Error component 

<section class="splitter  splitter_bg-color_white   splitter_padding_top_small       splitter_padding_bottom_large  ">
    <div class="container">
        <div class="splitter__wrapper">
            <div class="row">
                <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                    <div class="error-component">
                        <div class="error-component__icon">
                            <svg class="icon icon-80_face-upset    icon-80 ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#80_face-upset"></use>
                            </svg>
                        </div>
                        <div class="error-component__title">
                            <h1><span class="display-L">No eres tú... Soy yo.</span></h1>
                        </div>
                        <div class="error-component__description">
                            <div class="
            bodycopy-m
            
            
            
        ">
                                <p>Parece que hemos tenido un problema con la página. Por favor, sal y vuelve a entrar para volver a cargar el contenido.</p>
                            </div>
                        </div>
                        <div class="error-component__helperText">
                            <div class="
            bodycopy-m
            
            
            
        ">
                                <p>Si el error persiste contacta con nuestro equipo de atención al cliente.</p>
                            </div>
                        </div>
                        <ul class="error-component__contacto">
                            <li>
                                <a class="link
                        link_simple
                        
                        
                        
                        link_has-icon link_has-icon_before
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        " href="mailto:cuentanos@uci.com">
                                    <svg class="icon icon-16_mail     icon-before">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_mail"></use>
                                    </svg>
                                    <span>cuentanos@uci.com</span>
                                </a>

                            </li>
                            <li>
                                <a class="link
                        link_simple
                        
                        
                        
                        link_has-icon link_has-icon_before
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        " href="tel:912063790">
                                    <svg class="icon icon-16_phone     icon-before">
                                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_phone"></use>
                                    </svg>
                                    <span>912 06 37 90</span>
                                </a>

                            </li>
                            <li>
                                <div class="
                bodycopy-s
                
                
                
                
            ">

                                    L-V de 10.00 a 18.00h

                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="error-component">
    <div class="error-component__icon">
        {{> @icon icon }}
    </div>
    <div class="error-component__title">
        <h1>{{> @display title }}</h1>
    </div>
    <div class="error-component__description">
        {{> @bodycopy-m description }}
    </div>
    {{#if helperText}}
    <div class="error-component__helperText">
        {{> @bodycopy-m helperText }}
    </div>
    {{/if}}
    {{#if btn}}
    <div class="error-component__btn">
        {{> @btn btn }}
    </div>
    {{/if}}
    {{#if helperTextContacto}}
    <div class="error-component__helperTextContacto">
        {{> @bodycopy-m helperTextContacto }}
    </div>
    {{/if}}
    {{#if contacto}}
    <ul class="error-component__contacto">
        <li>
            {{> @link contacto }}
        </li>
        <li>
            {{> @link contacto2 }}
        </li>
        <li>
            {{> @bodycopy-s more-info }}
        </li>
    </ul>
    {{/if}}
</div>
{{/content}}
{{/extend}}
 
{
  "splitter": {
    "oneColumn": true,
    "bgColorWhite": true,
    "paddingTopSmall": true,
    "paddingBottomLarge": true
  },
  "icon": {
    "name": "80_face-upset",
    "size80": true
  },
  "title": {
    "text": "No eres tú... Soy yo.",
    "type": "-L"
  },
  "description": {
    "text": "<p>Parece que hemos tenido un problema con la página. Por favor, sal y vuelve a entrar para volver a cargar el contenido.</p>"
  },
  "helperText": {
    "text": "<p>Si el error persiste contacta con nuestro equipo de atención al cliente.</p>"
  },
  "contacto": {
    "text": "cuentanos@uci.com",
    "href": "mailto:cuentanos@uci.com",
    "isSimple": true,
    "icon-before": {
      "name": "16_mail",
      "isBefore": true
    }
  },
  "contacto2": {
    "text": "912 06 37 90",
    "href": "tel:912063790",
    "isSimple": true,
    "icon-before": {
      "name": "16_phone",
      "isBefore": true
    }
  },
  "more-info": {
    "text": "L-V de 10.00 a 18.00h",
    "colorAccent": true
  }
}
  • Content: 
    .error-component {
    text-align: center;

    &__icon {
        display: flex;
        justify-content: center;
        margin-bottom: 48px;
        width: 100%;
        .icon{
            max-width: 80px;
            max-height: 80px;
        }
    }

    &__title {
        color: var(--color-text-accent);
    }

    &__btn {
        margin-top: 16px;
    }

    &__description {
        margin-top: 48px;
        padding: 0 20%;

        span.resaltado {
            color: var(--color-primary-brand);
        }

        a {
            color: var(--color-icon-link-primary);
            text-decoration: none;
        }
    }

    &__helperText {
        color: var(--color-gray-100);
        margin-top: 16px;

        .bodycopy-m {
            color: var(--color-text-subtle);

            a {
                color: var(--color-icon-link-primary);
            }
        }
    }

    &__helperTextContacto {
        color: var(--color-gray-100);
        margin-top: 48px;

        .bodycopy-m {
            color: var(--color-text-subtle);
            ;

            a {
                color: var(--color-icon-link-primary);
            }
        }
    }

    &__contacto {
        margin-top: 48px;
        padding: 16px 48px;

        li {
            padding-top: 4px;

            &:first-child {
                padding-top: 0;
            }

            .link {
                .icon {
                    fill: var(--color-icon-accent);
                }
            }
            .bodycopy-s {
                color: var(--color-text-subtle);
            }
        }
    }




    .error-component__helperTextContacto+.error-component__contacto {
        margin-top: 0;
    }
}
  • URL: /components/raw/error-component/error-component.css
  • Filesystem Path: src/06-adhoc/tramitacion/organisms/error-component/error-component.css
  • Size: 1.7 KB

No notes defined.