<p class="c-notice" role="alert">Quos quam voluptate hic error in, iste, deserunt.</p>

<div class="c-notice" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#info"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

<section class="c-notice" role="alert">
    <svg class="c-notice__icon e-icon u-alpha" aria-hidden="true"><use xlink:href="#gear"></use></svg>
    <div class="c-notice__content">
        <h5 class="e-heading u-epsilon">Inventore officia!</h5>
        <p>Enim ducimus blanditiis, perferendis ipsa optio architecto reprehenderit pariatur dicta, doloribus voluptatibus error, illum culpa. Quidem qui illum quos consequatur assumenda voluptates aspernatur quas, rerum, omnis reiciendis. Quas, facilis, tenetur.</p>
    </div>
</section>

<p class="c-notice c-notice--medium" role="alert">Rem tempora laudantium harum rerum suscipit debitis, distinctio quis ullam!</p>

<p class="c-notice c-notice--small" role="alert">Iusto recusandae nesciunt necessitatibus quidem!</p>

<div class="c-notice c-notice--error" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#error"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

<div class="c-notice c-notice--warning" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#warning"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

<div class="c-notice c-notice--success" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#success"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

<div class="c-notice c-notice--neutral" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#info"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

<p class="c-notice c-notice--point-top c-notice--small c-notice--error" role="alert">Quos quam voluptate hic error in, iste, deserunt.</p>

<p class="c-notice c-notice--point-bottom c-notice--small c-notice--error" role="alert">Quos quam voluptate hic error in, iste, deserunt.</p>