Pattern Library

<div class="__js-root">
  <ui-popout>
    <template slot="toggler">
      {{ name }}
    </template>
    <ui-popout-content>
      <div>
        {% if guarantor_name %}
          <div
            class="
              !text-grey-250 [&_*]:!text-grey-250

              mb-3 flex gap-2 items-center justify-end
            "
          >
            <div class="mr-2">
              Garant programového bodu:
            </div>

            <img
              alt="Obrázek osoby {{ guarantor_name }}"
              class="w-10 h-10 opacity-75 m-0 p-0 rounded-full"
              src="{{ guarantor_image_url }}"
            >

            <strong>
              <a href="{{ guarantor_url }}">
                {{ guarantor_name }}
              </a>
            </strong>
          </div>
        {% endif %}

        <div class="prose max-w-screen-lg">
          {% include "patterns/atoms/text/paragraph.html" with text=text %}
        </div>
      </div>
    </ui-popout-content>
  </ui-popout>
</div>