UCI

Field bottom: Error 

<div class="field-bottom error">
    <div class="field-bottom__error-message">
        <span class="error-message">Debes rellenar el campo correctamente</span>
    </div>
</div>
 
<div class="field-bottom{{#if isError}} error{{/if}}">
    {{#if error-message}}
    <div class="field-bottom__error-message">
        {{> @error-message error-message }}
    </div>
    {{/if}}
    {{#if helper-text}}
    <div class="field-bottom__helper-text">
        {{> @bodycopy-xs helper-text }}
    </div>
    {{/if}}
</div>
 
{
  "isError": true,
  "error-message": {
    "text": "Debes rellenar el campo correctamente"
  }
}
  • Content: 
    .field-bottom {
    &__helper-text{padding-top: 6px;margin-top: 3px;
        .bodycopy-xs{color: var(--color-grey2);}
    }
    &__error-message {margin-top: 3px;
        display: none;
        position: relative;
    }
    &.error{
        .field-bottom__helper-text{display: none;}
        .field-bottom__error-message {display: block;} 
    }
}
  • URL: /components/raw/field-bottom/field-bottom.css
  • Filesystem Path: src/02-molecules/field-bottom/field-bottom.css
  • Size: 347 Bytes

No notes defined.