Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Alert

Use alerts for messaging across the application. Alerts are the primary method to give a user feedback when they interact with the user interface. Provide the user with appropriate feedback to guide their actions.

This page documents the different types of alerts and skins.

Default

#

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

<div class="c-alert c-alert--default">
    <div class="o-svg-icon o-svg-icon-circle-information  ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
            <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
            <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
        </svg>
    </div>
    <div class="c-alert__body">
        <div class="c-alert__text">
            <div class="c-alert__message">
                <div class="c-content">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
    </div>
</div>
+c-alert({
    message: "Lorem, ipsum dolor sit amet consectetur adipisicing elit."
})

Default with 2 lines

#

Alert title

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

<div class="c-alert c-alert--default" data-alert-closable="data-alert-closable">
    <div class="o-svg-icon o-svg-icon-circle-information  ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
            <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
            <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
        </svg>
    </div>
    <div class="c-alert__body">
        <div class="c-alert__text">
            <h4 class="c-h4">Alert title</h4>
            <div class="c-alert__message">
                <div class="c-content">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="c-button-link c-button--borderless-muted c-button--icon" type="button" data-alert-close="data-alert-close" aria-label="Close alert">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-close  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.29289 5.2929C5.68342 4.90237 6.31658 4.90237 6.70711 5.2929L12 10.5858L17.2929 5.2929C17.6834 4.90237 18.3166 4.90237 18.7071 5.2929C19.0976 5.68342 19.0976 6.31659 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31659 4.90237 5.68342 5.29289 5.2929Z" fill="#595959" />
                </svg>
            </div>
            <div class="u-sr-accessible">Alert sluiten
            </div>
        </span>
    </button>
</div>
+c-alert({
    title: "Alert title",
    message: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
    isClosable: true
})

Alert with rich text

#

Alert title

  • This is text for the first bullet.
  • This is text for the second bullet.
<div class="c-alert c-alert--default">
    <div class="o-svg-icon o-svg-icon-circle-information  ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
            <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
            <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
        </svg>
    </div>
    <div class="c-alert__body">
        <div class="c-alert__text">
            <h4 class="c-h4">Alert title</h4>
            <div class="c-alert__message">
                <div class="c-content">
                    <ul>
                        <li>This is text for the first bullet.</li>
                        <li>This is text for the second bullet.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
+c-alert({
    title: "Alert title",
    message: `<ul>
            <li>This is text for the first bullet.</li>
            <li>This is text for the second bullet.</li>
        </ul>`,
})

Closable

#

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

<div class="c-alert c-alert--default" data-alert-closable="data-alert-closable">
    <div class="o-svg-icon o-svg-icon-circle-information  ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
            <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
            <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
        </svg>
    </div>
    <div class="c-alert__body">
        <div class="c-alert__text">
            <div class="c-alert__message">
                <div class="c-content">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="c-button-link c-button--borderless-muted c-button--icon" type="button" data-alert-close="data-alert-close" aria-label="Close alert">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-close  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.29289 5.2929C5.68342 4.90237 6.31658 4.90237 6.70711 5.2929L12 10.5858L17.2929 5.2929C17.6834 4.90237 18.3166 4.90237 18.7071 5.2929C19.0976 5.68342 19.0976 6.31659 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31659 4.90237 5.68342 5.29289 5.2929Z" fill="#595959" />
                </svg>
            </div>
            <div class="u-sr-accessible">Alert sluiten
            </div>
        </span>
    </button>
</div>
+c-alert({
    message: "Lorem, ipsum dolor sit amet consectetur adipisicing elit.",
    isClosable: true
})

Skins

#

All the different skins for alerts: default, error, warning and success.

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

<div class="u-spacer-bottom">
    <div class="c-alert c-alert--default">
        <div class="o-svg-icon o-svg-icon-circle-information  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
                <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
                <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="u-spacer-bottom">
    <div class="c-alert c-alert--error">
        <div class="o-svg-icon o-svg-icon-circle-error  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12ZM7.793 7.793C7.98053 7.60553 8.23484 7.50021 8.5 7.50021C8.76516 7.50021 9.01947 7.60553 9.207 7.793L12 10.586L14.793 7.793C14.8852 7.69749 14.9956 7.62131 15.1176 7.5689C15.2396 7.51649 15.3708 7.4889 15.5036 7.48775C15.6364 7.4866 15.7681 7.5119 15.891 7.56218C16.0139 7.61246 16.1255 7.68671 16.2194 7.7806C16.3133 7.8745 16.3875 7.98615 16.4378 8.10905C16.4881 8.23194 16.5134 8.36362 16.5123 8.4964C16.5111 8.62918 16.4835 8.7604 16.4311 8.8824C16.3787 9.00441 16.3025 9.11475 16.207 9.207L13.414 12L16.207 14.793C16.3892 14.9816 16.49 15.2342 16.4877 15.4964C16.4854 15.7586 16.3802 16.0094 16.1948 16.1948C16.0094 16.3802 15.7586 16.4854 15.4964 16.4877C15.2342 16.49 14.9816 16.3892 14.793 16.207L12 13.414L9.207 16.207C9.0184 16.3892 8.7658 16.49 8.5036 16.4877C8.2414 16.4854 7.99059 16.3802 7.80518 16.1948C7.61977 16.0094 7.5146 15.7586 7.51233 15.4964C7.51005 15.2342 7.61084 14.9816 7.793 14.793L10.586 12L7.793 9.207C7.60553 9.01947 7.50021 8.76516 7.50021 8.5C7.50021 8.23484 7.60553 7.98053 7.793 7.793Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="u-spacer-bottom">
    <div class="c-alert c-alert--warning">
        <div class="o-svg-icon o-svg-icon-warning  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.0002 14C11.4479 14 11.0002 13.5523 11.0002 13V10C11.0002 9.44772 11.4479 9 12.0002 9C12.5525 9 13.0002 9.44772 13.0002 10V13C13.0002 13.5523 12.5525 14 12.0002 14Z" fill="#595959" />
                <path d="M10.5002 16.5C10.5002 15.6716 11.1717 15 12.0002 15C12.8286 15 13.5002 15.6716 13.5002 16.5C13.5002 17.3284 12.8286 18 12.0002 18C11.1717 18 10.5002 17.3284 10.5002 16.5Z" fill="#595959" />
                <path d="M10.2303 3.2156C10.9802 1.79093 13.0202 1.79092 13.77 3.2156L22.1136 19.0685C22.8146 20.4003 21.8488 22 20.3438 22H3.65653C2.15151 22 1.18574 20.4003 1.8867 19.0685L10.2303 3.2156ZM20.3438 20L12.0002 4.14709L3.65653 20L20.3438 20Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="u-spacer-bottom">
    <div class="c-alert c-alert--success">
        <div class="o-svg-icon o-svg-icon-circle-check  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12ZM16.664 8.753C16.862 8.92918 16.9819 9.17675 16.9975 9.44132C17.0131 9.70589 16.923 9.96582 16.747 10.164L11.414 16.164C11.3202 16.2696 11.2051 16.3541 11.0762 16.412C10.9474 16.4698 10.8077 16.4997 10.6665 16.4997C10.5253 16.4997 10.3856 16.4698 10.2568 16.412C10.1279 16.3541 10.0128 16.2696 9.919 16.164L7.253 13.164C7.08712 12.9645 7.0053 12.7083 7.02482 12.4495C7.04434 12.1907 7.16368 11.9497 7.35762 11.7773C7.55156 11.6049 7.80492 11.5147 8.06418 11.5256C8.32344 11.5366 8.56828 11.6479 8.747 11.836L10.667 13.995L15.253 8.835C15.4293 8.63716 15.677 8.51739 15.9415 8.50202C16.2061 8.48664 16.4659 8.57691 16.664 8.753Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
.u-spacer-bottom
    +c-alert({
        message: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.'
    })

.u-spacer-bottom
    +c-alert({
        skin: 'error',
        message: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.'
    })
.u-spacer-bottom
    +c-alert({
        skin: 'warning',
        message: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.'
    })
.u-spacer-bottom
    +c-alert({
        skin: 'success',
        message: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.'
    })

Skins (light)

#

A lighter version of the different skins for alerts: default, error, warning and success. The lighter version can be used when displaying larger amounts of content.

Lorem ipsum dolor sit amet.

Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.

Lorem ipsum dolor sit amet.

Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.

Lorem ipsum dolor sit amet.

Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.

Lorem ipsum dolor sit amet.

Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.

<div class="u-spacer-bottom">
    <div class="c-alert c-alert--default c-alert--light">
        <div class="o-svg-icon o-svg-icon-circle-information  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
                <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
                <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <h4 class="c-h4">Lorem ipsum dolor sit amet.</h4>
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="u-spacer-bottom">
    <div class="c-alert c-alert--error c-alert--light">
        <div class="o-svg-icon o-svg-icon-circle-error  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12ZM7.793 7.793C7.98053 7.60553 8.23484 7.50021 8.5 7.50021C8.76516 7.50021 9.01947 7.60553 9.207 7.793L12 10.586L14.793 7.793C14.8852 7.69749 14.9956 7.62131 15.1176 7.5689C15.2396 7.51649 15.3708 7.4889 15.5036 7.48775C15.6364 7.4866 15.7681 7.5119 15.891 7.56218C16.0139 7.61246 16.1255 7.68671 16.2194 7.7806C16.3133 7.8745 16.3875 7.98615 16.4378 8.10905C16.4881 8.23194 16.5134 8.36362 16.5123 8.4964C16.5111 8.62918 16.4835 8.7604 16.4311 8.8824C16.3787 9.00441 16.3025 9.11475 16.207 9.207L13.414 12L16.207 14.793C16.3892 14.9816 16.49 15.2342 16.4877 15.4964C16.4854 15.7586 16.3802 16.0094 16.1948 16.1948C16.0094 16.3802 15.7586 16.4854 15.4964 16.4877C15.2342 16.49 14.9816 16.3892 14.793 16.207L12 13.414L9.207 16.207C9.0184 16.3892 8.7658 16.49 8.5036 16.4877C8.2414 16.4854 7.99059 16.3802 7.80518 16.1948C7.61977 16.0094 7.5146 15.7586 7.51233 15.4964C7.51005 15.2342 7.61084 14.9816 7.793 14.793L10.586 12L7.793 9.207C7.60553 9.01947 7.50021 8.76516 7.50021 8.5C7.50021 8.23484 7.60553 7.98053 7.793 7.793Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <h4 class="c-h4">Lorem ipsum dolor sit amet.</h4>
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="u-spacer-bottom">
    <div class="c-alert c-alert--warning c-alert--light">
        <div class="o-svg-icon o-svg-icon-warning  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.0002 14C11.4479 14 11.0002 13.5523 11.0002 13V10C11.0002 9.44772 11.4479 9 12.0002 9C12.5525 9 13.0002 9.44772 13.0002 10V13C13.0002 13.5523 12.5525 14 12.0002 14Z" fill="#595959" />
                <path d="M10.5002 16.5C10.5002 15.6716 11.1717 15 12.0002 15C12.8286 15 13.5002 15.6716 13.5002 16.5C13.5002 17.3284 12.8286 18 12.0002 18C11.1717 18 10.5002 17.3284 10.5002 16.5Z" fill="#595959" />
                <path d="M10.2303 3.2156C10.9802 1.79093 13.0202 1.79092 13.77 3.2156L22.1136 19.0685C22.8146 20.4003 21.8488 22 20.3438 22H3.65653C2.15151 22 1.18574 20.4003 1.8867 19.0685L10.2303 3.2156ZM20.3438 20L12.0002 4.14709L3.65653 20L20.3438 20Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <h4 class="c-h4">Lorem ipsum dolor sit amet.</h4>
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="u-spacer-bottom">
    <div class="c-alert c-alert--success c-alert--light">
        <div class="o-svg-icon o-svg-icon-circle-check  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12ZM16.664 8.753C16.862 8.92918 16.9819 9.17675 16.9975 9.44132C17.0131 9.70589 16.923 9.96582 16.747 10.164L11.414 16.164C11.3202 16.2696 11.2051 16.3541 11.0762 16.412C10.9474 16.4698 10.8077 16.4997 10.6665 16.4997C10.5253 16.4997 10.3856 16.4698 10.2568 16.412C10.1279 16.3541 10.0128 16.2696 9.919 16.164L7.253 13.164C7.08712 12.9645 7.0053 12.7083 7.02482 12.4495C7.04434 12.1907 7.16368 11.9497 7.35762 11.7773C7.55156 11.6049 7.80492 11.5147 8.06418 11.5256C8.32344 11.5366 8.56828 11.6479 8.747 11.836L10.667 13.995L15.253 8.835C15.4293 8.63716 15.677 8.51739 15.9415 8.50202C16.2061 8.48664 16.4659 8.57691 16.664 8.753Z" fill="#595959" />
            </svg>
        </div>
        <div class="c-alert__body">
            <div class="c-alert__text">
                <h4 class="c-h4">Lorem ipsum dolor sit amet.</h4>
                <div class="c-alert__message">
                    <div class="c-content">
                        <p>Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
.u-spacer-bottom
    +c-alert({
        title: 'Lorem ipsum dolor sit amet.',
        message: 'Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.',
        isLight: true
    })

.u-spacer-bottom
    +c-alert({
        skin: 'error',
        title: 'Lorem ipsum dolor sit amet.',
        message: 'Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.',
        isLight: true
    })
.u-spacer-bottom
    +c-alert({
        skin: 'warning',
        title: 'Lorem ipsum dolor sit amet.',
        message: 'Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.',
        isLight: true
    })
.u-spacer-bottom
    +c-alert({
        skin: 'success',
        title: 'Lorem ipsum dolor sit amet.',
        message: 'Nam eget hendrerit massa, a consequat turpis. Duis cursus dui quis blandit mattis. Etiam condimentum metus ut risus facilisis lobortis.',
        isLight: true
    })

Possible parameters for alerts

Parameters Type Possible values Description
skin string default, success, error, warning Determines the skin of the alert
icon string See icon style guide for available icons. Overrides the default icon with another icon.
message string Text This parameter is used for the message of the alert.
title string Text This parameter is used for the title of the alert.
isClosable boolean true, false Determines if the alert is closable. The default state is false
isLight boolean true, false Determines if the alert has a lighter, more neutral skin. The default state is false