<!-- RP 240409 Video card - Changed classes -->
<article class="n7-card py-6 px-4 gap-3 lg:gap-6 bg-transparent
">
<!-- RP 240409 Video card - Changed classes -->
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<iframe class="w-full aspect-video rounded-2xl shadow-lg" src="https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL&controls=2&modestbranding=1&rel=0" title="YouTube video title" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<!-- RP 240409 Video card - Changed classes -->
<h3 class="n7-card__title flex items-center gap-6 n7-content-01 lg:text-xl font-medium">
<!-- RP 240409 Video card - Removed wrapping <a> -->
Sfide nella degenerazione maculare legata all'età: dai fattori di rischio a nuove strategie diagnostiche e di prevenzione. La iontoforesi sclerale di luteina
</h3>
</div>
<div class="flex gap-4 py-2 border-t-[1px] n7-border-gray-01">
<span class="text-sm n7-content-01 font-medium">RELATORI</span>
<span class="text-sm n7-content-02">Marco Lombardo</span>
</div>
</div>
</article>
<!-- RP 240409 Video card - Changed classes -->
<article
class="n7-card{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}
{% if hasSideThumb %} sm:grid-cols-[min-content_1fr]{% endif %}
{% if fullClick %} is-card-fullclickable{% endif %}"
>
{% if thumb %}
<!-- RP 240409 Video card - Changed classes -->
<div class="n7-card__image{% if thumbSize %} {{ thumbSize }}{% endif %}
{% if thumbAspectRatio %} {{ thumbAspectRatio }}{% endif %}">
<iframe class="w-full aspect-video rounded-2xl shadow-lg" src="{{ video.src }}{{ video.parameters }}" title="{{ video.title }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
{% endif %}
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<!-- RP 240409 Video card - Changed classes -->
<h3 class="n7-card__title flex items-center gap-6 {{ headingClasses }}">
<!-- RP 240409 Video card - Removed wrapping <a> -->
{{ heading | safe }}
</h3>
</div>
{% block content %}
{% if 'is-empty' not in excerpt %}
<p class="n7-card__excerpt {{ excerptClasses }}">
{% if excerpt %}{{ excerpt }}{% else %}Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.{% endif %}
</p>
{% endif %}
{% if authors %}
{% render '@authors', { label: authors.label, names: authors.names}, true %}
{% endif %}
{% endblock %}
</div>
</article>
{
"categoryText": "Categoria",
"iconSize": "w-24 h-24",
"headingClasses": "n7-content-01 lg:text-xl font-medium",
"heading": "Sfide nella degenerazione maculare legata all'età: dai fattori di rischio a nuove strategie diagnostiche e di prevenzione. La iontoforesi sclerale di luteina",
"headingIcon": true,
"text": "Testo",
"excerpt": "is-empty",
"excerptClasses": "text-lg",
"ctaIcon": "mini--arrow-small-right",
"mainHidden": true,
"classes": "py-6 px-4 gap-3 lg:gap-6 bg-transparent",
"fullClick": false,
"thumb": true,
"thumbAspectRatio": "aspect-w-16 aspect-h-9",
"video": {
"src": "https://www.youtube-nocookie.com/embed/xiBKvzyW_8Y?si=YBS8eqQa32gdwkFL",
"parameters": "&controls=2&modestbranding=1&rel=0",
"title": "YouTube video title"
},
"authors": {
"label": "RELATORI",
"names": "Marco Lombardo"
}
}
/* From INCLUSIVE COMPONENT LIBRARY by Heydon Pickering
* https://inclusive-components.design/
* card pattern:
* https://inclusive-components.design/cards/
* Create redundant click event on the whole card, using only
* card heading link
* A click handler on the card's container element
* simply triggers the click method on the link inside it
* Add also a delay in click, in order to detect if the user is selecting the text and not clicking
*/
const cards = document.querySelectorAll('.n7-card.is-card-fullclickable');
Array.prototype.forEach.call(cards, card => {
let down, up, link = card.querySelector('.n7-card__title a');
card.style.cursor = 'pointer';
card.onmousedown = () => down = +new Date();
card.onmouseup = () => {
up = +new Date();
if ((up - down) < 200) {
link.click();
}
}
});
Variable settings:
Add the component in the card with “true” value
Manage image thumb settings: