Copy environment

Alert

Success 

<div class="alert
    alert--success">
    <svg class="icon  alert__icon">
        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-outline"></use>
    </svg>
    <div class="alert__content text">
        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.
    </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 }}">
    {% include '@icon' with { name: icon, class: 'alert__icon' } %}
    <div class="alert__content text">
        {{ data.content }}
    </div>
    {% 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": "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.",
    "closeButtonLabel": "Close"
  },
  "type": "success"
}
  • Content: 
    .alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
}

.alert--success {
    background-color: $color-support-success-15;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;
}

.alert--error {
    background-color: $color-support-error-15;
    // does not have enough contrast against background
    // color: $color-support-error;
}

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

    .alert--success & {
        color: $color-support-success;
    }

    .alert--error & {
        color: $color-support-error;
    }
}

.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: $color-ui-01;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        transform: scale(1);
    }
}

.alert__close-icon {
    display: block;
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 1.4 KB
  • Handle: @alert--success
  • Filesystem Path: src/patterns/components/alert/alert.twig
  • References (1): @icon

Success Closable 

<div class="alert
    alert--success">
    <svg class="icon  alert__icon">
        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-outline"></use>
    </svg>
    <div class="alert__content text">
        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.
    </div>
    <button type="button" class="alert__close">
        <svg class="icon  alert__close-icon">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#close"></use>
        </svg>
        <span class="h-visually-hidden">Close</span>
    </button>
</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 }}">
    {% include '@icon' with { name: icon, class: 'alert__icon' } %}
    <div class="alert__content text">
        {{ data.content }}
    </div>
    {% 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": "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.",
    "closeButtonLabel": "Close"
  },
  "type": "success",
  "isClosable": true
}
  • Content: 
    .alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
}

.alert--success {
    background-color: $color-support-success-15;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;
}

.alert--error {
    background-color: $color-support-error-15;
    // does not have enough contrast against background
    // color: $color-support-error;
}

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

    .alert--success & {
        color: $color-support-success;
    }

    .alert--error & {
        color: $color-support-error;
    }
}

.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: $color-ui-01;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        transform: scale(1);
    }
}

.alert__close-icon {
    display: block;
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 1.4 KB
  • Handle: @alert--success-closable
  • Filesystem Path: src/patterns/components/alert/alert.twig
  • References (1): @icon

Error 

<div class="alert
    alert--error">
    <svg class="icon  alert__icon">
        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#error-outline"></use>
    </svg>
    <div class="alert__content text">
        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.
    </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 }}">
    {% include '@icon' with { name: icon, class: 'alert__icon' } %}
    <div class="alert__content text">
        {{ data.content }}
    </div>
    {% 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": "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.",
    "closeButtonLabel": "Close"
  },
  "type": "error"
}
  • Content: 
    .alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
}

.alert--success {
    background-color: $color-support-success-15;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;
}

.alert--error {
    background-color: $color-support-error-15;
    // does not have enough contrast against background
    // color: $color-support-error;
}

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

    .alert--success & {
        color: $color-support-success;
    }

    .alert--error & {
        color: $color-support-error;
    }
}

.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: $color-ui-01;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        transform: scale(1);
    }
}

.alert__close-icon {
    display: block;
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 1.4 KB
  • Handle: @alert--error
  • Filesystem Path: src/patterns/components/alert/alert.twig
  • References (1): @icon

Error Closable 

<div class="alert
    alert--error">
    <svg class="icon  alert__icon">
        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#error-outline"></use>
    </svg>
    <div class="alert__content text">
        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.
    </div>
    <button type="button" class="alert__close">
        <svg class="icon  alert__close-icon">
            <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#close"></use>
        </svg>
        <span class="h-visually-hidden">Close</span>
    </button>
</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 }}">
    {% include '@icon' with { name: icon, class: 'alert__icon' } %}
    <div class="alert__content text">
        {{ data.content }}
    </div>
    {% 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": "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.",
    "closeButtonLabel": "Close"
  },
  "type": "error",
  "isClosable": true
}
  • Content: 
    .alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
}

.alert--success {
    background-color: $color-support-success-15;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;
}

.alert--error {
    background-color: $color-support-error-15;
    // does not have enough contrast against background
    // color: $color-support-error;
}

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

    .alert--success & {
        color: $color-support-success;
    }

    .alert--error & {
        color: $color-support-error;
    }
}

.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: $color-ui-01;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        transform: scale(1);
    }
}

.alert__close-icon {
    display: block;
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 1.4 KB
  • Handle: @alert--error-closable
  • 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">
                <svg class="icon  alert__icon">
                    <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#error-outline"></use>
                </svg>
                <div class="alert__content text">
                    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.
                </div>
                <button type="button" class="alert__close">
                    <svg class="icon  alert__close-icon">
                        <use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#close"></use>
                    </svg>
                    <span class="h-visually-hidden">Close</span>
                </button>
            </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": "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.",
    "closeButtonLabel": "Close"
  },
  "type": "error",
  "isClosable": true
}
  • Content: 
    .alert {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
}

.alert--success {
    background-color: $color-support-success-15;
    // disabled to be similar to error alert which has contrast issues
    // color: $color-support-success;
}

.alert--error {
    background-color: $color-support-error-15;
    // does not have enough contrast against background
    // color: $color-support-error;
}

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

    .alert--success & {
        color: $color-support-success;
    }

    .alert--error & {
        color: $color-support-error;
    }
}

.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: $color-ui-01;
        border-radius: 50%;
        transform: scale(0);
        transition: transform $transition-duration $transition-easing;
    }

    &:hover:after {
        transform: scale(1);
    }
}

.alert__close-icon {
    display: block;
}
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/patterns/components/alert/alert.scss
  • Size: 1.4 KB
  • Handle: @alert--example
  • Filesystem Path: src/patterns/components/alert/alert--example.twig
  • References (2): @alert, @button