UCI

Error message: Accent Valid 

<div class="error-message-wrapper
                error-message-wrapper_accent">
            <svg class="icon icon-check     ">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check"></use>
            </svg>

            <div class="error-message">
                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                    Error message*

                </div>
            </div>
        </div>
 
{{#if isAccent}}
        <div
            class="error-message-wrapper
                error-message-wrapper_accent"
        >
            {{#if isValid}}
                {{ render '@icon--check' }}
            {{else}}
                {{ render '@icon--close' }}
            {{/if}}

            <div class="error-message">
                {{> @bodycopy-s bodycopy }}
            </div>
        </div>
{{else}}
    <span class="error-message">{{ text }}</span>
{{/if}}
 
{
  "text": "Error message*",
  "isAccent": true,
  "isValid": true,
  "bodycopy": {
    "text": "Error message*"
  }
}
  • Content: 
    .error-message {
    display: inline-block;
    font-family: 'Jornada Sans Book';
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0;
    color: var(--color-danger);

    &-wrapper {
        display: flex;
        margin-top: 22px;

        &_accent {
            .bodycopy-s {
                color: var(--color-text-light);
            }

            .icon {
                flex-shrink: 0;
                width: 16px;
                height: 16px;
                margin: 2px 6px 0 0;
                fill: var(--color-text-light);
            }
        }
    }
}
  • URL: /components/raw/error-message/error-message.css
  • Filesystem Path: src/01-atoms/error-message/error-message.css
  • Size: 583 Bytes

No notes defined.