<div class="rtds-container rtds-pb-6 md:rtds-pb-12">
<div class="rtds-flex rtds-flex-col">
<div class="rtds-flex rtds-justify-end">
<button type="button" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--only-text" onclick="openDialog('openModalShare', this)">
Condividi
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--arrow-uturn-right" />
</svg>
</button>
<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>
</div>
<div class="rtds-horizontal-divider rtds-border-b rtds-border-gray-03 rtds-mt-3 rtds-mb-4 ">
</div>
<div class="rtds-flex rtds-justify-end">
<div class="rtds-flex rtds-flex-wrap rtds-gap-3 md:rtds-gap-6">
<small class="rtds-text-sm md:rtds-text-base">
Aggiornato al: <time class="rtds-font-bold" datetime="2024-04-10">10.04.2024</time>
</small>
<small class="rtds-text-sm md:rtds-text-base">
Article ID: <strong>1964689348</strong>
</small>
</div>
</div>
</div>
</div>
<div class="rtds-container rtds-pb-6 md:rtds-pb-12">
<div class="rtds-flex rtds-flex-col">
{% block share %}
{% if share %}
<div class="rtds-flex rtds-justify-end">
{% render '@button--icon-right', button, true %}
{% render '@modal-share' %}
</div>
{% endif %}
{% endblock share %}
{% render '@horizontal-divider' %}
<div class="rtds-flex rtds-justify-end">
<div class="rtds-flex rtds-flex-wrap rtds-gap-3 md:rtds-gap-6">
<small class="rtds-text-sm md:rtds-text-base">
Aggiornato al: <time class="rtds-font-bold" datetime="{{ date }}">{{ dateFormatted }}</time>
</small>
<small class="rtds-text-sm md:rtds-text-base">
Article ID: <strong>{{ articleId }}</strong>
</small>
</div>
</div>
</div>
</div>
{
"button": {
"classes": "rtds-btn--only-text",
"icon": "mini--arrow-uturn-right",
"iconSize": "rtds-w-4 rtds-h-4",
"label": "Condividi",
"callback": "openDialog('openModalShare', this)"
},
"date": "2024-04-10",
"dateFormatted": "10.04.2024",
"articleId": "1964689348",
"share": true
}
Componente utility ripetibile con riportata informazione di aggiornamento e pulsante di condivisione su social.