OffHealth component library

Example card component: Research 

<article class="n7-card h-full xl:max-w-[314px] py-6 px-4 bg-white rounded shadow-md
  
  ">
    <!-- RP 240409 Research card - Changed classes -->
    <div class="grid gap-4 grid-rows-[min-content_1fr]">
        <div class="n7-card__heading flex flex-col-reverse gap-4">
            <h3 class="n7-card__title flex items-center gap-6 n7-content-01 text-xl font-medium">
                Lutein reaches the retina following iontophoresis application
            </h3>
        </div>

        <div class="flex gap-4 py-2 border-t-[1px] n7-border-gray-01">
            <span class="text-sm n7-content-01 font-medium">AUTORI</span>
            <span class="text-sm n7-content-02">Sara Sousa - Joana Duarte - Marta Monteiro - Marco Lombardo - Giuseppe Lombardo</span>
        </div>

        <div>
            <!-- RP 240409 Research card - Changed classes -->

            <a href="#" class="n7-btn 
    n7-btn--primary
    n7-btn--s cursor-pointer mt-4">
                Scarica

                <svg class="inline-block align-middle fill-current w-4 h-4 ml-2 transition-all duration-200 ease-out transform group-hover:translate-x-1" aria-hidden="true" focusable="false" role="img">
                    <use xlink:href="../../icons.svg#mini--arrow-up-tray" />
                </svg>

            </a>

        </div>

    </div>
</article>
 
<article
  class="n7-card{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock %}
  {% if hasSideThumb %} sm:grid-cols-[min-content_1fr]{% endif %}
  {% if fullClick %} is-card-fullclickable{% endif %}"
>
<!-- RP 240409 Research card - Changed classes -->
  <div class="grid gap-4 grid-rows-[min-content_1fr]">
    <div class="n7-card__heading flex flex-col-reverse gap-4">
      <h3 class="n7-card__title flex items-center gap-6 {{ headingClasses }}">
          {{ heading | safe }}
      </h3>
    </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 %}
      {% if authors %}
      {% render '@authors', { label: 'AUTORI', names: authors}, true %}
      {% endif %}
    {% endblock %} 
    {% if cta %}
        <div>
<!-- RP 240409 Research card - Changed classes -->
          {% render '@button--icon-right', { href:'#', classes: 'n7-btn--s cursor-pointer mt-4', label: 'Scarica', icon: 'mini--arrow-up-tray', iconSize: 'w-4 h-4'} %} 
        </div>
    {% endif %}
  </div>
</article>
 
{
  "categoryText": "Categoria",
  "iconSize": "w-24 h-24",
  "headingClasses": "n7-content-01 text-xl font-medium",
  "heading": "Lutein reaches the retina following iontophoresis application",
  "headingIcon": true,
  "text": "Testo",
  "excerpt": "is-empty",
  "excerptClasses": "text-lg",
  "ctaIcon": "mini--arrow-small-right",
  "mainHidden": true,
  "classes": "h-full xl:max-w-[314px] py-6 px-4 bg-white rounded shadow-md",
  "authors": "Sara Sousa - Joana Duarte - Marta Monteiro - Marco Lombardo - Giuseppe Lombardo",
  "cta": true
}
  • 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.

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
  • excerpt: value - excerpt text - text set by default in config, to disable in instance 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)