UCI

Success: With Helper Text 

<div class="success small">
    <div class="success__icon">
        <svg class="icon icon-complex_enviar   icon-56  ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
        </svg>

    </div>
    <div class="success__title">
        <h3 class="
                title-m
                
                
                
                
            ">¡No pongas tu teléfono en modo avión!</h3>
    </div>
    <div class="success__description">
        <div class="
            bodycopy-m
            
            
            
        ">
            <p>Contactaremos contigo en el horario seleccionado: <span class='resaltado'>15:00 - 17:00*</span></p>
        </div>
    </div>
    <div class="success__helpertext">
        <div class="
            bodycopy-m
            
            
            
        ">
            *Horario peninsular en España
        </div>
    </div>
</div>
 
<div class="success{{#if isSmall}} small{{/if}}">
    <div class="success__icon">
        {{#if icohipotecas}}
        {{ render '@icon--paper-plane-green' }}
        {{else}}
        {{ render '@icon--56-enviar' }}
        {{/if}}
    </div>
    <div class="success__title">
        {{#if isSmall}}
        {{> @title-m title }}
        {{else}}
        {{> @title-l title }}
        {{/if}}
    </div>
    <div class="success__description">
        {{> @bodycopy-m description }}
    </div>
    {{#if helpertext}}
    <div class="success__helpertext">
        {{> @bodycopy-m helpertext }}
    </div>
    {{/if}}
</div>
 
{
  "title": {
    "text": "¡No pongas tu teléfono en modo avión!"
  },
  "description": {
    "text": "<p>Contactaremos contigo en el horario seleccionado: <span class='resaltado'>15:00 - 17:00*</span></p>"
  },
  "isSmall": true,
  "helpertext": {
    "text": "*Horario peninsular en España"
  }
}
  • Content: 
    .success {
    text-align: center;

    &__icon {
        display: flex;
        justify-content: center;
        margin-bottom: 32px;
        img, svg {
            width: 54px;
            height: 54px;
        }
    }

    &__description {
        margin-top: 32px;
        padding:0 20%;
        span.resaltado{color: var(--color-primary-brand);}
    }

    &__helpertext{
        color: var(--color-grey2);
        margin-top: 16px;
        .bodycopy-m{
            color: var(--color-grey2);
        }
    }

    &.small{
        .success__title{
            color: var(--color-accent);
            .title-m{
                color: var(--color-accent);
            }
        }
        .success__description{
            padding:0;
        }
        .success__icon{
            img, svg{
                width: 38px;
                height: 35px;
            }
        }
    }
}
  • URL: /components/raw/success/success.css
  • Filesystem Path: src/02-molecules/success/success.css
  • Size: 883 Bytes

No notes defined.