Блоки оповещений

Блок оповещений - стилизованный блок для привлечения внимания пользователей.

<div class="alertblock">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias provident quasi quis, quos rem.
    Ab, expedita hic magni quidem quisquam reprehenderit suscipit? Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Aliquid aperiam asperiores deleniti et fuga harum,
    ipsam laboriosam laborum nam nemo nobis numquam ratione,
    repellat repudiandae totam ullam ut velit vitae.
</div>

<div class="alertblock bg-orange-50">
    <h5><i class="fa-solid fa-triangle-exclamation"></i> Attention!</h5>
    <div class="pt-12">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        A aspernatur dicta dignissimos doloremque, facere illo ipsa molestias
        provident quasi quis, quos rem. Ab, expedita hic magni quidem quisquam
        reprehenderit suscipit? Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Aliquid aperiam asperiores deleniti et fuga harum, ipsam laboriosam
        laborum nam nemo nobis numquam ratione, repellat repudiandae totam ullam ut velit vitae.
    </div>
</div>

Вы можете использовать класс .alertblock совместно с классами .alertblock-before и .alertblock-after которые зададут необходимые отступы по краям для блоков .before и .after, куда вы сможете вставить небольшие элементы, типа иконок и/или кнопки закрытия.

<div class="alertblock alertblock-before alertblock-after">
    <div class="before"><i class="fa-solid fa-triangle-exclamation"></i></div>
    <div class="after"><a href="#" class="alertblock-close" rel="nofollow">×</a></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    A aspernatur dicta dignissimos doloremque, facere illo ipsa
    molestias provident quasi quis, quos rem. Ab, expedita hic magni
    quidem quisquam reprehenderit suscipit? Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Aliquid aperiam asperiores deleniti et fuga
    harum, ipsam laboriosam laborum nam nemo nobis numquam ratione,
    repellat repudiandae totam ullam ut velit vitae.
</div>

Кнопка закрытия - элемент .alertblock-close служит для закрытия родительского блока .alertblock

Если вам требуется закрытие других элементов .alertblock, используйте javascript код, который представлен ниже

pipui.alertblock.hide('#element'); // Скрыть элемент
pipui.alertblock.show('#element'); // Показать элемент