UCI

Error component: Error 404 

<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    icon-80 ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#80_face"></use>
                            </svg>
                        </div>
                        <div class="error-component__title">
                            <h1><span class="display-L">¡Ups!<br />Algo ha salido mal</span></h1>
                        </div>
                        <div class="error-component__description">
                            <div class="
            bodycopy-m
            
            
            
        ">
                                <p>Esta página no existe... o se ha perdido y no podemos encontrarla.</p>
                            </div>
                        </div>
                        <div class="error-component__helperText">
                            <div class="
            bodycopy-m
            
            
            
        ">
                                <p>Pero no te preocupes, puedes volver a la <a href='#'>Página principal</a> y seguir viendo el estado de tu solicitud.</p>
                            </div>
                        </div>
                    </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",
    "size80": true
  },
  "title": {
    "text": "¡Ups!<br />Algo ha salido mal",
    "type": "-L"
  },
  "description": {
    "text": "<p>Esta página no existe... o se ha perdido y no podemos encontrarla.</p>"
  },
  "helperText": {
    "text": "<p>Pero no te preocupes, puedes volver a la <a href='#'>Página principal</a> y seguir viendo el estado de tu solicitud.</p>"
  },
  "contacto": false,
  "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
  },
  "btn": false
}
  • 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.