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

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

```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'); // Показать элемент
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v1-6-0.pipui.ru/components/alert-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.