<div class="n7-card grid n7-card--event p-0
is-card-fullclickable transition hover:ring-2 hover:ring-white/20 group/card
shadow-sm hover:shadow-lg">
<div class="n7-card__image
">
<img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
</div>
<div class="n7-card__content grid gap-2 sm:gap-4
px-4 pb-4 sm:grid sm:grid-cols-1-2">
<div class="grid gap-2 order-2">
<div class="n7-card__heading flex flex-col-reverse gap-4 gap-3">
<h3 class="n7-card__title font-normal text-base leading-tight uppercase">
<a class="hover:underline group-hover/card:underline" href="">
Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam
</a>
</h3>
<div class="flex items-baseline justify-between">
<div class="n7-card__categories">
<a href="#" class="n7-category text-primary-600 hover:underline hover:text-primary-800 focus:text-primary-800">
Categoria
</a>
</div>
</div>
</div>
<small class="n7-card__address">
<svg class="n7-icon inline-block align-middle fill-current w-4 h-4 n7-content-primary" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--map-pin" />
</svg>
<span class="sr-only">Luogo:</span> Via tal dei Tali, Pisa
</small>
</div>
<div class="n7-card__date n7-order-1 sm:border-r sm:n7-border-gray-01 sm:pr-4">
<time class="sm:grid sm:justify-end sm:text-right" datetime="2024-06-25/2024-06-30"><span class="n7-content-01 text-2xl font-extrabold">25-30/06</span> <span class="n7-text-sm">2023</span></time>
</div>
</div>
</article>
{% extends "@card" %}
{% block contentWrapperStart %}
<div class="grid gap-2 order-2">
{% endblock contentWrapperStart %}
{% block contentWrapperEnd %}
</div>
{% endblock contentWrapperEnd %}
{% block metadatas %}
{% if category %}
<div class="flex items-baseline justify-between">
{% block category %}
<div class="n7-card__categories">
{% render '@category', { text: categoryText}, true %}
</div>
{% endblock category %}
</div>
{% endif %}
{% endblock metadatas %}
{% block content %}
{% endblock content %}
{% block address %}
<small class="n7-card__address">
{% render '@icon', {id: 'outline--map-pin', classes: 'n7-content-primary', size: 'w-4 h-4'}, true %}<span class="sr-only">Luogo:</span> Via tal dei Tali, Pisa
</small>
{% endblock address %}
{% block additionalContent %}
{% block date %}
{% if date %}
<div class="n7-card__date n7-order-1 sm:border-r sm:n7-border-gray-01 sm:pr-4">
<time class="sm:grid sm:justify-end sm:text-right" datetime="2024-06-25/2024-06-30"><span class="n7-content-01 text-2xl font-extrabold">25-30/06</span> <span class="n7-text-sm">2023</span></time>
</div>
{% endif %}
{% endblock date %}
{% endblock additionalContent %}
{
"categoryText": "Categoria",
"iconSize": "w-24 h-24",
"titleClasses": "font-normal text-base leading-tight uppercase",
"heading": "Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam",
"text": "Testo",
"descriptionClasses": "text-lg",
"ctaIcon": "mini--arrow-small-right",
"ctaLinkLabel": "Leggi di più",
"cardHeadingAlignment": "flex flex-col-reverse",
"boxShadow": "shadow-sm hover:shadow-lg",
"img": {
"path": "/images/feathers.jpg",
"alt": ""
},
"image": true,
"imageAspectRatio": "aspect-video",
"description": "Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.",
"classes": "n7-card--event p-0",
"category": true,
"date": true,
"headingClasses": "gap-3",
"contentClasses": "px-4 pb-4 sm:grid sm:grid-cols-1-2",
"contentGap": "gap-2 sm:gap-4",
"fullClick": true
}
/**
* CARD
*
*/
@layer components {
.n7-card {
@apply p-6 grid gap-6 bg-white;
}
/* CARD IN GRID COL */
.n7-col .n7-card {
@apply h-full;
}
/*.n7-card__heading.flex-col-reverse {
@apply justify-end;
}
/* .n7-card--event .n7-card__heading {
@apply gap-3;
} */
/*
.n7-card--event .n7-card__title {
@apply font-normal text-base leading-tight uppercase;
} */
/* CARD EVENT */
/* .n7-card--event {
@apply p-0;
} */
/* .n7-card--event .n7-card__content {
@apply ;
} */
}
/* 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 = (e) => {
// Verifica se è il tasto sinistro (0)
if (e.button === 0) {
down = +new Date();
}
}
card.onmouseup = (e) => {
// Procedi solo se è il tasto sinistro (0)
if (e.button === 0) {
up = +new Date();
if ((up - down) < 200) {
link.click();
}
}
}
});
Card component configurations.
Reference to card inclusive pattern by Heydon Pickering: https://inclusive-components.design/cards/
Fullclickable card is managed with a script; add the class
is-card-fullclickable
to the card and the script will manage the clickable area. Link is present only in card title <a>. In order to manage microinteractions and hover effects, Card has also transition hover:shadow-lg group classes; title link has also group-hover:underline class.
By default settings, card markup is made with article tag. However, that could not be always the right choice, article should be used for card representing a self-contained entity (e.g. a news item, a blog post, etc., with a heading, a date, an excerpt, a thumbnail, etc.). In some cases it might be better to use a div tag instead, and used in a list context (ul with role=”list”, and wrapped in a li item with class n7-col: e.g. in a list of links, for a card representing a link).
By default, card heading is h3. That means that card should be used in a section with a h2 heading labelling the section. This h2 could be visibile or sr-only. Sextions should always be labelled and identified by a heading. This should be discussed with the design team, if needed.
For development - Variable and configuration settings:
Add the component in the card with “true” value
Manage image thumb settings:
Blocks: