<section class="ui_section" id="toasts">
  <h2 class="ui_section_title">Toasts</h2>

  <div class="ui_block">
    <h3 class="ui_block_title">Triggers (demo buttons)</h3>

    <button class="ui_btn ui_btn_secondary" type="button">Show info</button>
    <button class="ui_btn ui_btn_primary" type="button">Show success</button>
    <button class="ui_btn ui_btn_accent" type="button">Show warning</button>
    <button class="ui_btn ui_btn_danger" type="button">Show danger</button>
  </div>

  <div class="ui_block">
    <h3 class="ui_block_title">Toast stack (container)</h3>

    <div class="ui_toast_stack" aria-live="polite" aria-relevant="additions">
      <article class="ui_toast ui_toast_info" role="status">
        <div class="ui_toast_content">
          <h4 class="ui_toast_title">Info</h4>
          <p class="ui_toast_text">Обычное уведомление для пользователя.</p>
        </div>
        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
      </article>

      <article class="ui_toast ui_toast_success" role="status">
        <div class="ui_toast_content">
          <h4 class="ui_toast_title">Success</h4>
          <p class="ui_toast_text">Операция выполнена успешно.</p>
        </div>
        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
      </article>

      <article class="ui_toast ui_toast_warning" role="status">
        <div class="ui_toast_content">
          <h4 class="ui_toast_title">Warning</h4>
          <p class="ui_toast_text">Нужна проверка параметров.</p>
        </div>
        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
      </article>

      <article class="ui_toast ui_toast_danger" role="alert">
        <div class="ui_toast_content">
          <h4 class="ui_toast_title">Danger</h4>
          <p class="ui_toast_text">Произошла ошибка. Повтори позже.</p>
        </div>
        <button class="ui_btn ui_btn_icon ui_toast_close" type="button" aria-label="Close">✕</button>
      </article>
    </div>

    <p class="ui_hint">.ui_toast_stack — фиксируй в углу через CSS (например bottom/right), либо размещай как блок в контенте.</p>
  </div>
</section>