> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/alert-block.md).

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

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

```html
<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>
```

```html
<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>
```

Вы можете использовать класс <mark style="color:orange;">`.alertblock`</mark> совместно с классами <mark style="color:orange;">`.alertblock-before`</mark> и <mark style="color:orange;">`.alertblock-after`</mark> которые зададут необходимые отступы по краям для блоков <mark style="color:orange;">`.before`</mark> и <mark style="color:orange;">`.after`</mark>, куда вы сможете вставить небольшие элементы, типа иконок и/или кнопки закрытия.

```html
<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>
```

Кнопка закрытия - элемент <mark style="color:orange;">`.alertblock-close`</mark> служит для закрытия родительского блока <mark style="color:orange;">`.alertblock`</mark>

Если вам требуется закрытие других элементов <mark style="color:orange;">`.alertblock`</mark>, используйте javascript код, который представлен ниже

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