Regione Toscana Design System

Modal Share 

<div class="rtds-dialog">
    <div role="dialog" id="openModalShare" aria-labelledby="openModalShareLabel" aria-modal="true" class="rtds-hidden">

        <div class="rtds-dialog__header">
            <h2 id="openModalShareLabel" class="rtds-dialog__title">

                Condividi sui social
            </h2>

        </div>

        <div class="rtds-dialog__content" tabindex="0">

            <div class="rtds-social-links rtds-flex">

                <ul class="rtds-flex rtds-items-center rtds-gap-2">

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-facebook rtds-link--lg">
                            <span class="rtds-sr-only">Condividi il contenuto su Facebook</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--facebook" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-instagram rtds-link--lg">
                            <span class="rtds-sr-only">Condividi il contenuto su Instagram</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--instagram" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-linkedin rtds-link--lg">
                            <span class="rtds-sr-only">Condividi il contenuto su LinkedIn</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--linkedin" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-x rtds-link--lg">
                            <span class="rtds-sr-only">Condividi il contenuto su X</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--x" />
                            </svg>

                        </a>
                    </li>

                    <li class="rtds-flex rtds-items-center">
                        <a href="" class="rtds-link rtds-text-2xl rtds-p-2 xl:rtds-p-1 rtds-text-social-youtube rtds-link--lg">
                            <span class="rtds-sr-only">Condividi il contenuto su YouTube</span>

                            <svg class="rtds-icon rtds-fill-current rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10" aria-hidden="true" focusable="false" role="img">
                                <use href="../../icons.svg#solid--youtube" />
                            </svg>

                        </a>
                    </li>

                </ul>

            </div>

        </div>

    </div>
</div>
 
{% extends '@modal-dialog' %}

{% block contentInner %}
    {% render '@social-links', socialLinks, true %}

{% endblock contentInner %}
 
{
  "dialogId": "openModalShare",
  "label": "Condividi sui social",
  "buttons": [
    {
      "label": "Annulla",
      "callback": "closeDialog(this)",
      "classes": "rtds-btn--outlined"
    }
  ],
  "socialLinks": {
    "wrapperClasses": "rtds-flex",
    "listGap": "rtds-gap-2",
    "linkIconSize": "rtds-w-8 rtds-h-8 lg:rtds-w-10 lg:rtds-h-10",
    "itemClasses": "rtds-flex rtds-items-center",
    "itemLinkClasses": "rtds-text-2xl rtds-p-2 xl:rtds-p-1",
    "items": [
      {
        "label": "Condividi il contenuto su Facebook",
        "icon": "solid--facebook",
        "color": "rtds-text-social-facebook"
      },
      {
        "label": "Condividi il contenuto su Instagram",
        "icon": "solid--instagram",
        "color": "rtds-text-social-instagram"
      },
      {
        "label": "Condividi il contenuto su LinkedIn",
        "icon": "solid--linkedin",
        "color": "rtds-text-social-linkedin"
      },
      {
        "label": "Condividi il contenuto su X",
        "icon": "solid--x",
        "color": "rtds-text-social-x"
      },
      {
        "label": "Condividi il contenuto su YouTube",
        "icon": "solid--youtube",
        "color": "rtds-text-social-youtube"
      }
    ]
  }
}

No notes defined.