<article class="n7-card md:max-w-[314px] py-6 px-4
">
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title n7-content-01 text-xl lg:text-2xl font-medium">
<a class="hover:underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
</div>
<p class="n7-card__excerpt n7-content-03 text-base">
Mentre lavori o utilizzi dispositivi digitali, adotta la regola 20-20-20. Ogni 20 minuti, fai una pausa di almeno 20 secondi e guarda qualcosa che si trova a 20 piedi di distanza. Questo aiuterà ad alleviare l'affaticamento degli occhi causato dalla fissazione prolungata su uno schermo.
</p>
</div>
</article>
<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 %}
{% if icon %}
<div class="{% if iconSize %}{{ iconSize }}{% endif %} p-6{% if iconRadius %} {{ iconRadius }}{% else %} rounded{% endif %} {% if iconBg %} {{ iconBg }}{% else %}n7-background-gray-02{% endif %}">
{% render '@icon', { id: icon }, true %}
</div>
{% endif %}
<div class="grid gap-4">
<div class="n7-card__heading flex flex-col-reverse gap-4">
<h3 class="n7-card__title {{ headingClasses }}">
<a class="hover:underline" href="">
{{ heading | safe }}
{% if ctaLink %}<span class="sr-only">: Read more</span>{% endif %}
</a>
</h3>
{% if category or date %}
<div class="flex items-baseline justify-between">
{% if category %}
<div class="n7-card__categories">
{% render '@category--overline', { text: categoryText, classes: 'n7-content-placeholder'}, true %}
</div>
{% endif %}
{% if date %}
<div class="n7-card__date text-sm">
<time datetime="2023-09-30">30.09.2023</time>
</div>
{% endif %}
</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>
{% endif %}
{% endblock %}
{% if ctaLink %}
{% render '@link--has-icon', { hasIcon: 'true', icon: ctaIcon, label: 'Read more', allyHidden: 'true' } %}
{% endif %}
{% if cta %}
<div class="">
{% if fullClick %}
{% render '@button', { span: true, classes:'cursor-pointer', label: 'Card Cta'} %}
{% else %}
{% render '@button', { href:'#', classes: 'cursor-pointer', label: 'Card Cta'} %}
{% endif %}
</div>
{% endif %}
{% if tags %}
<ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">
{% for i in range(0,4) %}
<li>{% render '@chip--sm' %}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</article>
{
"categoryText": "Categoria",
"iconSize": "w-24 h-24",
"headingClasses": "n7-content-01 text-xl lg:text-2xl font-medium",
"heading": "Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam",
"headingIcon": true,
"text": "Testo",
"excerpt": "Mentre lavori o utilizzi dispositivi digitali, adotta la regola 20-20-20. Ogni 20 minuti, fai una pausa di almeno 20 secondi e guarda qualcosa che si trova a 20 piedi di distanza. Questo aiuterà ad alleviare l'affaticamento degli occhi causato dalla fissazione prolungata su uno schermo.",
"excerptClasses": "n7-content-03 text-base",
"ctaIcon": "mini--arrow-small-right",
"mainHidden": true,
"classes": "md:max-w-[314px] py-6 px-4"
}
/* 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: