<!-- RP 240326 List page - Changed classes -->
<article class="n7-card h-full py-6 px-4 rounded shadow-md hover:shadow-xl
is-card-fullclickable">
<div class="n7-card__image
aspect-w-16 aspect-h-9">
<img class="object-cover w-full h-full" alt="" src="/images/feathers.jpg" />
</div>
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 text-xl font-medium">
<a class="grow hover:underline" href="">
DRUSENoff compresse a rilascio modificato
</a>
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--arrow-right" />
</svg>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<span class="n7-category n7-category--outline n7-category--sm">
Categoria
</span>
</div>
</div>
</div>
<p class="n7-card__excerpt text-base">
è un integratore alimentare a base di ESPERIDINA, MIRTILLO, titolato in ANTOCIANOSIDI, TAGETE, titolata in LUTEINA, RODIOLA, VITAMINA E e ZINCO.
</p>
<div class="flex p-2 rounded border border-info-light bg-secondary-50">
<svg class="inline-block align-middle fill-current w-5 h-5 shrink-0 mr-2 text-info" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#outline--information-circle" />
</svg>
<p class="text-xs n7-content-placeholder">Se sei un professionista del settore, accedi inserendo le tue credenziali per visualizzare la scheda completa.</p>
</div>
</div>
</article>
<!-- RP 240326 List page - Changed classes -->
<article
class="n7-card{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}
{% if hasSideThumb %} md:grid-cols-[min-content_1fr]{% endif %}
{% if fullClick %} is-card-fullclickable{% endif %}"
>
{% if thumb %}
<div class="n7-card__image{% if thumbSize %} {{ thumbSize }}{% endif %}
{% if thumbAspectRatio %} {{ thumbAspectRatio }}{% endif %}">
<img
class="{% if img.imgObjectFit %}{{ img.imgObjectFit }}{% else %}object-cover{% endif %} w-full h-full"
alt="{{ img.alt }}"
src="{{ img.path }}"
/>
</div>
{% endif %}
<!-- RP 240326 List page - Changed classes -->
<div class="grid gap-4 content-start">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title flex items-center gap-2 {{ headingClasses }}">
<a class="grow hover:underline" href="">
{{ heading | safe }}
{% if ctaLink %}<span class="sr-only">: Read more</span>{% endif %}
</a>
{% render '@icon--small', { id: 'mini--arrow-right', classes: 'shrink-0', size: 'w-5 h-5' }, true %}
</h3>
{% if category %}
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
{% render '@category--outline', { text: categoryText, href: false}, true %}
</div>
</div>
{% endif %}
</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>
{% if alertText %}<div class="flex p-2 rounded border border-info-light bg-secondary-50">
{% render '@icon--small', { id: 'outline--information-circle', classes: 'shrink-0 mr-2 text-info', size: 'w-5 h-5' }, true %}
<p class="text-xs n7-content-placeholder">{{ alertText }}</p>
</div>{% endif %}
{% endif %}
{% endblock %}
</div>
</article>
{
"categoryText": "Categoria",
"iconSize": "w-24 h-24",
"headingClasses": "text-xl font-medium",
"heading": "DRUSENoff compresse a rilascio modificato",
"headingIcon": true,
"text": "Testo",
"excerpt": "è un integratore alimentare a base di ESPERIDINA, MIRTILLO, titolato in ANTOCIANOSIDI, TAGETE, titolata in LUTEINA, RODIOLA, VITAMINA E e ZINCO.",
"excerptClasses": "text-base",
"ctaIcon": "mini--arrow-small-right",
"minisiteHidden": true,
"classes": "h-full py-6 px-4 rounded shadow-md hover:shadow-xl",
"fullClick": true,
"thumb": true,
"thumbAspectRatio": "aspect-w-16 aspect-h-9",
"img": {
"path": "/images/feathers.jpg",
"alt": ""
},
"category": true,
"alertText": "Se sei un professionista del settore, accedi inserendo le tue credenziali per visualizzare la scheda completa."
}
/* 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: