OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Notifications

Alerts, warnings, greetings, messages, musings — whenever, whatever, however.

Only 5 cats left. Hurry up!
Full moon sale is on!
Success, thanks for shopping with us.
Warning, your credit card is about to expire soon.
Error, not enough credits, bro!
Error, still not enough credits, bro!
Error, what's up?
Error, bang your head
This website uses cookies with granulated sugar. Got it!
<div class="pa-h_m pa-v_l read_xl">
  <div class="box pa-no inverted flex wrap-no">
    <div class="pa-l_m pa-v_m text-clip text_l">
      Only 5 cats left. Hurry up!
    </div>
    <div class="span-auto ma-r_m flex">
      <button class="self-center span-auto button text_s text-bold pa-v_xs">nevermind</button>
    </div>
  </div>

  <div class="ma-t_xs box pa-no flex wrap-no bg-prime-2 bs_m tinted-prime bo_xs">
    <div class="pa-l_m pa-v_m text-clip text_l">
      Full moon sale is on!
    </div>
    <div class="span-auto flex n ma-r_m">
      <div class="self-center span-auto">
        <div class="flex gap_xs">
          <div class="span-auto">
            <button class="r-pill button text_s text-bold pa-v_xs">close</button>
          </div>
          <div class="span-auto">
            <button class="r-pill button prime text_s text-bold pa-v_xs">go shopping ›</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="ma-t_l bg-success-1 tinted-success flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Success</b>, thanks for shopping with us.
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-bg-success tinted-success span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-warn bg-warn-1 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Warning</b>, your credit card is about to expire soon.
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-warn tinted-bg-warn span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-danger bg-danger-1 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Error</b>, not enough credits, bro!
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-danger bg-danger-2 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Error</b>, still not enough credits, bro!
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs tinted-danger bg-danger-3 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s">
      <b>Error</b>, what's up?
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
  <div class="ma-t_xs inverted bg-danger-2 flex wrap-no bo_px">
    <div class="text-clip pa-v_s pa-l_s tinted-danger">
      <b>Error</b>, bang your head
    </div>
    <div class="span-auto ma-r_s flex">
      <button class="self-center tinted-danger tinted-bg-danger span-auto pa_xs button text_xs text-bold">close</button>
    </div>
  </div>
</div>

<div class="bg-warn-2 pa_m text_s">
  This website uses cookies with granulated sugar. <a href="#" class="link text-bold ma-l_s">Got it!</a>
</div>