Copy environment

Alert

Success 

<div class="alert
    alert--success">
    <div class="alert__left">
        <svg class="icon  alert__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check-outline"></use>
        </svg>
        <div class="alert__content text">
            ”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.
        </div>
    </div>
    <div class="alert__cart">
        <a href="#">
            Vaata ostukorvi
            <span>
                <svg class="icon  alert__cart-icon" focusable="false">
                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#cart-icon"></use>
                </svg>
            </span>
        </a>
    </div>
</div>
 
{% set type = type|default(data.type|default('success')) %}
{% set icon = type == 'error' ? 'error-outline' : 'check-outline' %}
{% set isClosable = isClosable|default(data.isClosable|default(false)) %}
{% set BEM -%}
    alert
    alert--{{ type }}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <div class="alert__left">
        {% include '@icon' with { name: icon, class: 'alert__icon' } %}
        <div class="alert__content text">
            {{ data.content }}
        </div>
    </div>
    {% if data.cartText %}
    <div class="alert__cart">
        <a href="#">
            {{ data.cartText }}
            <span>
                {% include '@icon' with { name: 'cart-icon', class: 'alert__cart-icon', modifier: '' } %}
            </span>
        </a>
    </div>
    {% endif %}
    {% if isClosable and data.closeButtonLabel %}
        <button type="button" class="alert__close">
            {% include '@icon' with { name: 'close', class: 'alert__close-icon' } %}
            <span class="h-visually-hidden">{{ data.closeButtonLabel }}</span>
        </button>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "content": "”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.",
    "closeButtonLabel": "Close",
    "cartText": "Vaata ostukorvi"
  },
  "type": "success"
}
  • Content: 
    .alert {
    display: flex;
    flex-direction: column;

    @include bp(md-min) {
        flex-direction: row;
        justify-content: space-between;
    }
}

.alert__left {
    display: flex;
}

.alert--success {
    background-color: $L-success-background;
    border-top: 2px solid $L-success-border;
    padding: 12px 12px 20px;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;

    @include bp(md-min) {
        padding: 24px 40px 24px 24px;
    }
}

.alert--error {
    background-color: $L-error-background;
    border-top: 2px solid $L-error-border;
    padding: 12px;
    // does not have enough contrast against background
    // color: $color-support-error;

    @include bp(md-min) {
        padding: 24px;
    }
}

.alert__icon {
    flex-shrink: 0;
    margin-right: 16px;
    font-size: 24px;

    .alert--success & {
        color: $L-success-icon;
    }

    .alert--error & {
        color: $L-error-icon;
    }
}

.alert__content {
    flex-grow: 1;
}

.alert__close {
    position: relative;
    z-index: 0;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 12px;
    font-size: 24px;
    background-color: transparent;
    margin: -12px -12px -12px 0;

    &:after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: -1;
        top: 4px;
        right: 4px;
        background: $L-background;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        background: $L-background-hover;
        transform: scale(1);
    }

    .alert--success & {
        &:after {
            background: $L-success-background;
        }

        &:hover:after {
            background: $L-success-background-hover;
        }
    }

    .alert--error & {
        &:after {
            background: $L-error-background;
        }

        &:hover:after {
            background: $L-error-background-hover;
        }
    }
}

.alert__close-icon {
    display: block;
}

.alert__cart-icon.alert__cart-icon {
    fill: none;
    font-size: 24px;
    margin-left: 8px;
}

.alert__cart {
    margin-top: 12px;

    @include bp(md-min) {
        margin: 0;
    }

    a,
    span {
        display: flex;
        align-items: center;
    }

    a {
        text-decoration: none;
        font-weight: $font-weight-medium;
    }

    @include bp(md-min) {
        margin-left: 32px;
    }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 2.6 KB
  • Handle: @alert--success
  • Filesystem Path: src/patterns/components/alert/alert.twig
  • References (1): @icon

Success No Link 

<div class="alert
    alert--success">
    <div class="alert__left">
        <svg class="icon  alert__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check-outline"></use>
        </svg>
        <div class="alert__content text">
            ”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.
        </div>
    </div>
</div>

Error 

<div class="alert
    alert--error">
    <div class="alert__left">
        <svg class="icon  alert__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#error-outline"></use>
        </svg>
        <div class="alert__content text">
            ”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.
        </div>
    </div>
</div>
 
{% set type = type|default(data.type|default('success')) %}
{% set icon = type == 'error' ? 'error-outline' : 'check-outline' %}
{% set isClosable = isClosable|default(data.isClosable|default(false)) %}
{% set BEM -%}
    alert
    alert--{{ type }}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

<div class="{{ BEM }}">
    <div class="alert__left">
        {% include '@icon' with { name: icon, class: 'alert__icon' } %}
        <div class="alert__content text">
            {{ data.content }}
        </div>
    </div>
    {% if data.cartText %}
    <div class="alert__cart">
        <a href="#">
            {{ data.cartText }}
            <span>
                {% include '@icon' with { name: 'cart-icon', class: 'alert__cart-icon', modifier: '' } %}
            </span>
        </a>
    </div>
    {% endif %}
    {% if isClosable and data.closeButtonLabel %}
        <button type="button" class="alert__close">
            {% include '@icon' with { name: 'close', class: 'alert__close-icon' } %}
            <span class="h-visually-hidden">{{ data.closeButtonLabel }}</span>
        </button>
    {% endif %}
</div>

{
  "language": "en-US",
  "data": {
    "content": "”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.",
    "closeButtonLabel": "Close",
    "cartText": null
  },
  "type": "error"
}
  • Content: 
    .alert {
    display: flex;
    flex-direction: column;

    @include bp(md-min) {
        flex-direction: row;
        justify-content: space-between;
    }
}

.alert__left {
    display: flex;
}

.alert--success {
    background-color: $L-success-background;
    border-top: 2px solid $L-success-border;
    padding: 12px 12px 20px;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;

    @include bp(md-min) {
        padding: 24px 40px 24px 24px;
    }
}

.alert--error {
    background-color: $L-error-background;
    border-top: 2px solid $L-error-border;
    padding: 12px;
    // does not have enough contrast against background
    // color: $color-support-error;

    @include bp(md-min) {
        padding: 24px;
    }
}

.alert__icon {
    flex-shrink: 0;
    margin-right: 16px;
    font-size: 24px;

    .alert--success & {
        color: $L-success-icon;
    }

    .alert--error & {
        color: $L-error-icon;
    }
}

.alert__content {
    flex-grow: 1;
}

.alert__close {
    position: relative;
    z-index: 0;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 12px;
    font-size: 24px;
    background-color: transparent;
    margin: -12px -12px -12px 0;

    &:after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: -1;
        top: 4px;
        right: 4px;
        background: $L-background;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        background: $L-background-hover;
        transform: scale(1);
    }

    .alert--success & {
        &:after {
            background: $L-success-background;
        }

        &:hover:after {
            background: $L-success-background-hover;
        }
    }

    .alert--error & {
        &:after {
            background: $L-error-background;
        }

        &:hover:after {
            background: $L-error-background-hover;
        }
    }
}

.alert__close-icon {
    display: block;
}

.alert__cart-icon.alert__cart-icon {
    fill: none;
    font-size: 24px;
    margin-left: 8px;
}

.alert__cart {
    margin-top: 12px;

    @include bp(md-min) {
        margin: 0;
    }

    a,
    span {
        display: flex;
        align-items: center;
    }

    a {
        text-decoration: none;
        font-weight: $font-weight-medium;
    }

    @include bp(md-min) {
        margin-left: 32px;
    }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 2.6 KB
  • Handle: @alert--error
  • Filesystem Path: src/patterns/components/alert/alert.twig
  • References (1): @icon

Example

This example demonstrates how to use an alert in an accessible way.

The following alert is hidden by default. It will be shown on some action - for example, submitting a form. In this example, the action is clicking the “Show alert” button.

After clicking the button, the alert is shown. The alert component is wrapped in a <div role="alert"></div> which will announce the newly added alert contents to assistive technologies.

<div class="h-container sg-js-alert-example">
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur, ante eu dignissim interdum, nisl lacus tempus ante, viverra sollicitudin nisi ligula non erat. Morbi elementum nisi at nisl porta commodo.</p>
        <div role="alert">

            <div class="alert
    alert--error sg-js-alert-example-alert">
                <div class="alert__left">
                    <svg class="icon  alert__icon" focusable="false">
                        <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#error-outline"></use>
                    </svg>
                    <div class="alert__content text">
                        ”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.
                    </div>
                </div>
                <div class="alert__cart">
                    <a href="#">
                        Vaata ostukorvi
                        <span>
                            <svg class="icon  alert__cart-icon" focusable="false">
                                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#cart-icon"></use>
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </div>

        <button type="button" class="button sg-js-alert-example-button">
            <span class="button__inner">
                <span class="button__text">show alert</span>
            </span>
        </button>
    </div>
</div>
 
<div class="h-container sg-js-alert-example">
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur, ante eu dignissim interdum, nisl lacus tempus ante, viverra sollicitudin nisi ligula non erat. Morbi elementum nisi at nisl porta commodo.</p>
        <div role="alert">
            {% include '@alert' with { data: data, class: 'sg-js-alert-example-alert' } %}
        </div>
        {% include '@button' with { data: { text: 'show alert' }, class: 'sg-js-alert-example-button', type: 'button' } %}
    </div>
</div>

{
  "language": "en-US",
  "data": {
    "content": "”KETTSAAG ELEKTRILINE 2KW” lisati Sinu rendikorvi.",
    "closeButtonLabel": "Close",
    "cartText": "Vaata ostukorvi"
  },
  "type": "error",
  "isClosable": false
}
  • Content: 
    .alert {
    display: flex;
    flex-direction: column;

    @include bp(md-min) {
        flex-direction: row;
        justify-content: space-between;
    }
}

.alert__left {
    display: flex;
}

.alert--success {
    background-color: $L-success-background;
    border-top: 2px solid $L-success-border;
    padding: 12px 12px 20px;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;

    @include bp(md-min) {
        padding: 24px 40px 24px 24px;
    }
}

.alert--error {
    background-color: $L-error-background;
    border-top: 2px solid $L-error-border;
    padding: 12px;
    // does not have enough contrast against background
    // color: $color-support-error;

    @include bp(md-min) {
        padding: 24px;
    }
}

.alert__icon {
    flex-shrink: 0;
    margin-right: 16px;
    font-size: 24px;

    .alert--success & {
        color: $L-success-icon;
    }

    .alert--error & {
        color: $L-error-icon;
    }
}

.alert__content {
    flex-grow: 1;
}

.alert__close {
    position: relative;
    z-index: 0;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 12px;
    font-size: 24px;
    background-color: transparent;
    margin: -12px -12px -12px 0;

    &:after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: -1;
        top: 4px;
        right: 4px;
        background: $L-background;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        background: $L-background-hover;
        transform: scale(1);
    }

    .alert--success & {
        &:after {
            background: $L-success-background;
        }

        &:hover:after {
            background: $L-success-background-hover;
        }
    }

    .alert--error & {
        &:after {
            background: $L-error-background;
        }

        &:hover:after {
            background: $L-error-background-hover;
        }
    }
}

.alert__close-icon {
    display: block;
}

.alert__cart-icon.alert__cart-icon {
    fill: none;
    font-size: 24px;
    margin-left: 8px;
}

.alert__cart {
    margin-top: 12px;

    @include bp(md-min) {
        margin: 0;
    }

    a,
    span {
        display: flex;
        align-items: center;
    }

    a {
        text-decoration: none;
        font-weight: $font-weight-medium;
    }

    @include bp(md-min) {
        margin-left: 32px;
    }
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 2.6 KB
  • Handle: @alert--example
  • Filesystem Path: src/patterns/components/alert/alert--example.twig
  • References (2): @alert, @button