Блок оповещений - стилизованный блок для привлечения внимания пользователей.
<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'); // Показать элемент
