Alert

  • id:

How it works

there is reserved global variable alerts that containts items array of alerts objects

its coexist with alerts-group.twig that is included in layout-base.twig

alerts-group.twig is abstract group that have position fixed and handle multile alerts align

Check alerts.html for example usage in layout

  • css class for closing the alert i-alert__close
      (Close element needs to be inside of alert element)
    • usecase: if you need different element to close the alert. For example close button.

Success

  • Existence k oborechjednou lodní žena světěpodzemní
    ' 
  •         {% include "@Components/items/alert-item/alert-item.twig" with {props: {
  visible_initialy: true,
  variant: "success",
  icon: {
    src: "@Images/svg/circle-check.svg",
  },
  content: "Existence k oborechjednou lodní žena světěpodzemní",
}} %}

      
  •             
<div class="i-alert d-flex shadow-sm --success --show">
  <div class="i-alert__wrapper d-flex w-100 ">

          <div class="i-alert__icon flex-shrink-0 p-2">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>      </span>
      </div>
    
    <div class="i-alert__body p-2 d-flex flex-column gap-2">
              <div class="i-alert__content">Existence k oborechjednou lodní žena světěpodzemní</div>
      

      




    </div>

    <div class="i-alert__close flex-shrink-0 u-cursor-pointer ms-auto p-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">&apos;<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg>      </span>
    </div>
  </div>

</div>

Danger

  • Existence k oborechjednou lodní žena světěpodzemní
    ' 
  •         {% include "@Components/items/alert-item/alert-item.twig" with {props: {
  visible_initialy: true,
  variant: "danger",
  icon: {
    src: "@Images/svg/circle-danger.svg",
  },
  content: "Existence k oborechjednou lodní žena světěpodzemní",
}} %}

      
  •             
<div class="i-alert d-flex shadow-sm --danger --show">
  <div class="i-alert__wrapper d-flex w-100 ">

          <div class="i-alert__icon flex-shrink-0 p-2">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
      </div>
    
    <div class="i-alert__body p-2 d-flex flex-column gap-2">
              <div class="i-alert__content">Existence k oborechjednou lodní žena světěpodzemní</div>
      

      




    </div>

    <div class="i-alert__close flex-shrink-0 u-cursor-pointer ms-auto p-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">&apos;<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg>      </span>
    </div>
  </div>

</div>

Warning

  • Existence k oborechjednou lodní žena světěpodzemní
    ' 
  •         {% include "@Components/items/alert-item/alert-item.twig" with {props: {
  visible_initialy: true,
  variant: "warning",
  icon: {
    src: "@Images/svg/triangle-danger.svg",
  },
  content: "Existence k oborechjednou lodní žena světěpodzemní",
}} %}

      
  •             
<div class="i-alert d-flex shadow-sm --warning --show">
  <div class="i-alert__wrapper d-flex w-100 ">

          <div class="i-alert__icon flex-shrink-0 p-2">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"/></svg>      </span>
      </div>
    
    <div class="i-alert__body p-2 d-flex flex-column gap-2">
              <div class="i-alert__content">Existence k oborechjednou lodní žena světěpodzemní</div>
      

      




    </div>

    <div class="i-alert__close flex-shrink-0 u-cursor-pointer ms-auto p-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">&apos;<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg>      </span>
    </div>
  </div>

</div>

Default

  • Existence k oborechjednou lodní žena světěpodzemní
    ' 
  •         {% include "@Components/items/alert-item/alert-item.twig" with {props: {
  visible_initialy: true,
  icon: {
    src: "@Images/svg/circle-info.svg",
  },
  content: "Existence k oborechjednou lodní žena světěpodzemní",
}} %}

      
  •           
<div class="i-alert d-flex shadow-sm --default --show">
  <div class="i-alert__wrapper d-flex w-100 ">

          <div class="i-alert__icon flex-shrink-0 p-2">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --black --lg">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm-40-176h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>      </span>
      </div>
    
    <div class="i-alert__body p-2 d-flex flex-column gap-2">
              <div class="i-alert__content">Existence k oborechjednou lodní žena světěpodzemní</div>
      

      




    </div>

    <div class="i-alert__close flex-shrink-0 u-cursor-pointer ms-auto p-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --black --lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">&apos;<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg>      </span>
    </div>
  </div>

</div>

with buttons

  • Existence k oborechjednou lodní žena světěpodzemní
    Zjistit více Zavřít
    ' 
  •         {% include "@Components/items/alert-item/alert-item.twig" with {props: {
  visible_initialy: true,
  icon: {
    src: "@Images/svg/circle-info.svg",
  },
  content: "Existence k oborechjednou lodní žena světěpodzemní",
  buttons: {
    primary: {
      title: "Zjistit více",
      url: "#",
    },
    secondary: {
      title: "Zavřít",
      url: "#",
      extra_class: "i-alert__close",
    }
  },
}} %}

      
  •           
<div class="i-alert d-flex shadow-sm --default --show">
  <div class="i-alert__wrapper d-flex w-100 ">

          <div class="i-alert__icon flex-shrink-0 p-2">
          
  <span class="icon d-flex align-items-center justify-content-center --colored --black --lg">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm-40-176h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>      </span>
      </div>
    
    <div class="i-alert__body p-2 d-flex flex-column gap-2">
              <div class="i-alert__content">Existence k oborechjednou lodní žena světěpodzemní</div>
      

      



  <div class="g-base flex-wrap --align-left --gap-md g-buttons --spacing-none">
  
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm     --full-width-mobile" href='#'>
      <span class="btn__title u-z-index-1">
      Zjistit více
    </span>
      
  
  </a>
      
              <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm     --full-width-mobile    i-alert__close" href='#'>
      <span class="btn__title u-z-index-1">
      Zavřít
    </span>
      
  
  </a>
      
    </div>

    </div>

    <div class="i-alert__close flex-shrink-0 u-cursor-pointer ms-auto p-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --black --lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">&apos;<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg>      </span>
    </div>
  </div>

</div>

No icon

  • Existence k oborechjednou lodní žena světěpodzemní
    ' 
  •         {% include "@Components/items/alert-item/alert-item.twig" with {props: {
  visible_initialy: true,
  variant: "success",
  content: "Existence k oborechjednou lodní žena světěpodzemní",
}} %}

      
  •             
<div class="i-alert d-flex shadow-sm --success --show">
  <div class="i-alert__wrapper d-flex w-100 ">

    
    <div class="i-alert__body p-2 d-flex flex-column gap-2">
              <div class="i-alert__content">Existence k oborechjednou lodní žena světěpodzemní</div>
      

      




    </div>

    <div class="i-alert__close flex-shrink-0 u-cursor-pointer ms-auto p-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --lg">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">&apos;<path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z"/></svg>      </span>
    </div>
  </div>

</div>