Net7 design system

Example card component: Has Icon 

<article class="n7-card auto-rows-min
  
  ">

    <div class="grid gap-4">
        <div class="n7-card__heading flex flex-col-reverse gap-4">
            <h3 class="n7-card__title text-2xl font-bold">
                <a class="hover:underline" href="">
                    Componente card esempio

                </a>
            </h3>

        </div>

        <p class="n7-card__excerpt text-lg">
            Testo aggiuntivo da configurazione
        </p>

    </div>
</article>
 
{% extends '@card' %}
{% block classes %} auto-rows-min{% if classes %} {{ classes }}{% endif %}{% endblock %}
 
{
  "categoryText": "Categoria",
  "iconSize": "w-24 h-24",
  "headingClasses": "text-2xl font-bold",
  "heading": "Componente card esempio",
  "text": "Testo",
  "excerpt": "Testo aggiuntivo da configurazione",
  "excerptClasses": "text-lg",
  "ctaIcon": "mini--arrow-small-right"
}
  • 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)