Net7 design system

Example card component: Scadenze 

<article class="n7-card px-2 md:py-0 md:px-4 border-b md:border-r md:border-b-0 last-of-type:border-b-0 md:last-of-type:border-r-0 n7-border-gray-01
  
   is-card-fullclickable transition group">

    <div class="grid gap-2 md:gap-4">
        <div class="n7-card__heading flex flex-col-reverse gap-4">
            <h3 class="n7-card__title text-lg md:text-xl md:text-2xl font-bold">
                <a class="hover:underline group-hover:underline" href="">
                    Termine 30.11.2023

                </a>
            </h3>

        </div>

        <p class="n7-card__excerpt md:text-base">
            Testo aggiuntivo da configurazione
        </p>

    </div>
</article>
 
{% extends '@card' %}
 {% block fullClickable %}{% if fullClick %} is-card-fullclickable transition group{% endif %}{% endblock fullClickable %}"
 
{
  "categoryText": "Categoria",
  "iconSize": "w-24 h-24",
  "headingClasses": "text-lg md:text-xl md:text-2xl font-bold",
  "heading": "Termine 30.11.2023",
  "text": "Testo",
  "excerpt": "Testo aggiuntivo da configurazione",
  "excerptClasses": "md:text-base",
  "ctaIcon": "mini--arrow-small-right",
  "fullClick": true,
  "contentGap": "gap-2 md:gap-4",
  "classes": "px-2 md:py-0 md:px-4 border-b md:border-r md:border-b-0 last-of-type:border-b-0 md:last-of-type:border-r-0 n7-border-gray-01"
}
  • Content: 
    /* 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();
        }
    }
});
  • URL: /components/raw/card/card.js
  • Filesystem Path: components/03-molecules/card/card.js
  • Size: 853 Bytes

Card demo components example. Multiple variants and settings.

Variable settings:

  • classes: value - add eventual classes
  • categoryText: value - override category text if needed (default is “Categoria”)
  • heading: value - card title
  • headingClasses: value - add/change heading classes if needed
  • contentGap: value - change content gap class if needed, default gap-4
  • headingGap: value - change heading elements gap class if needed, default gap-4
  • excerpt: value - excerpt text - text set by default in config, to disable in istance or card variant, use “is-hidden” value for this variable
  • excerptClasses: value - add/change excerpt classes if needed
  • icon: iconId - set top icon id and manage top icon visualization
  • iconSize: value - set icon width and height classes if needed (defaults are w-24 h-24)
  • iconRadius: value - manage top icon border radius - default rounded
  • iconBg: value - manage top icon background color - default n7-background-gray-02
  • ctaIcon: iconId - icon id for cta

Add the component in the card with “true” value

  • category: true (shows category)
  • ctaLink: true (shows cta link)
  • cta: true (shows cta button)
  • tags: true (shows tags list)
  • date: true (shows date)
  • thumb: true (shows thumb)
  • hasSideThumb: true (manage card class for side thumb - card grid class)
  • fullClick: true (Add the script which manage fullcard clickable area )

Manage image thumb settings:

  • img:
    • path: /pathto/image.jpg
    • alt: value - ‘Eventual alternative text if image is not descriptive’
    • imgObjectFit: value - manage img object fit if needed (default is cover)
  • thumbSize: value - manage thumb size if needed (for side thumb especially)
  • thumbAspectRatio: value - set aspect ratio classes if needed (used by default in has-thumb variant)