Regione Toscana Design System

Example card component: Related Info 

<div class="rtds-card rtds-card--sito-tematico rtds-card--related-info rtds-bg-gradient-04 is-card-fullclickable rtds-group/card">

    <picture class="rtds-card__image-wrapper
  ">
        <img class="rtds-card__image" alt="" src="/images/card-image.jpg" />
    </picture>

    <div class="rtds-card__content">

        <div class="rtds-card__heading">

            <h3 class="rtds-card__title">
                <a class="group-hover/card:rtds-underline rtds-flex rtds-flex-col rtds-gap-5 sm:rtds-gap-4 sm:rtds-flex-row sm:rtds-items-start" href="">

                    Lorem ipsum dolor sit amet, consectetur adipiscing elit Suspendisse mattis

                    <span class="rtds-btn 
    rtds-btn--icon sm:rtds-hidden rtds-btn--outlined group-hover/card:rtds-button-primary group-hover/card:rtds-text-white rtds-mt-auto sm:rtds-mt-0 sm:rtds-ml-auto rtds-flex-shrink-0"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--arrow-right" />
                        </svg>
                        <span class="rtds-sr-only">

                        </span>

                    </span>

                    <span class="rtds-btn 
    rtds-btn--icon rtds-hidden sm:rtds-inline-flex rtds-btn--outlined group-hover/card:rtds-button-primary group-hover/card:rtds-text-white rtds-mt-auto sm:rtds-mt-0 sm:rtds-ml-auto rtds-flex-shrink-0 rtds-btn--s"><svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#mini--arrow-right" />
                        </svg>
                        <span class="rtds-sr-only">

                        </span>

                    </span>

                </a>
            </h3>

        </div>

    </div>

</div>
 
{% extends "@card" %}
{% block classes %}{{ super() }} rtds-card--sito-tematico rtds-card--related-info rtds-bg-gradient-04{% endblock classes %}
{% block headingThumb %}
{% endblock headingThumb %}
{% block headingLinkIcon %}
    {% if headingLinkIcon %}
        {% render '@button--icon', { span: true, label: '', icon: headingLinkIcon,classes: 'sm:rtds-hidden rtds-btn--outlined group-hover/card:rtds-button-primary group-hover/card:rtds-text-white rtds-mt-auto sm:rtds-mt-0 sm:rtds-ml-auto rtds-flex-shrink-0' }, true %}

        {% render '@button--icon-s', { span: true, label: '', icon: headingLinkIcon,classes: 'rtds-hidden sm:rtds-inline-flex rtds-btn--outlined group-hover/card:rtds-button-primary group-hover/card:rtds-text-white rtds-mt-auto sm:rtds-mt-0 sm:rtds-ml-auto rtds-flex-shrink-0' }, true %}
    {% endif %}
{% endblock headingLinkIcon %}
 
{
  "article": false,
  "categoryText": "Categoria",
  "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit Suspendisse mattis",
  "text": "Testo",
  "excerpt": "is-empty",
  "ctaIcon": "mini--chevron-right",
  "ctaLinkLabel": "Leggi di più",
  "categoryVariant": "",
  "img": {
    "path": "/images/card-image.jpg",
    "alt": ""
  },
  "fullClick": true,
  "thumb": true,
  "headingLinkClasses": "rtds-flex rtds-flex-col rtds-gap-5 sm:rtds-gap-4 sm:rtds-flex-row sm:rtds-items-start",
  "headingLinkIcon": "mini--arrow-right",
  "headingThumb": {
    "path": "/images/logo-card.png",
    "srcset": "/images/logo-card@2x.png 2x, /images/logo-card.png 1x"
  }
}
  • Content: 
    /**
 * CARD
 *
*/
@layer components {
    /* BASE */
    .rtds-card {
        @apply rtds-gap-3 md:rtds-gap-4 rtds-p-2 rtds-bg-white rtds-shadow-md rtds-rounded;
    }

    .rtds-card:where(:not(.rtds-card--horizontal)) {
        @apply rtds-flex rtds-flex-col rtds-justify-start;
    }

    .rtds-card:where(.rtds-card--horizontal) {
        @apply rtds-grid rtds-items-start sm:rtds-content-stretch sm:rtds-items-stretch;
    }

    /* CARD IN GRID COL */
    .rtds-col .rtds-card {
        @apply rtds-h-full;
    }

    .is-card-fullclickable {
        @apply rtds-transition-all hover:rtds-shadow-lg rtds-cursor-pointer;
    }

    .rtds-card__heading {
        @apply rtds-flex rtds-justify-end rtds-flex-col-reverse rtds-gap-2;
    }

    .rtds-card__image {
        @apply rtds-w-full rtds-aspect-video rtds-object-cover;
    }

    .rtds-card__icon {
        @apply rtds-flex rtds-items-center rtds-justify-center rtds-w-12 rtds-h-12 rtds-bg-transparent rtds-content-02;
    }

    :where(.rtds-card__icon) .rtds-icon {
        @apply rtds-w-12 rtds-h-12;
    }

    .rtds-card__categories {
        @apply rtds-mt-auto rtds-flex rtds-gap-2 rtds-pt-4 rtds-flex-wrap;
    }

    .rtds-card__content {
        @apply rtds-grid rtds-gap-2 rtds-px-4 rtds-pb-4 rtds-pt-4 rtds-flex-1;
    }

    :where(.rtds-card--horizontal) .rtds-card__content,
    :where(.rtds-card--news-small) .rtds-card__content {
        @apply rtds-content-start sm:rtds-pt-2 sm:rtds-pb-2 sm:rtds-flex sm:rtds-flex-col sm:rtds-justify-start;
    }


    :where(.rtds-card--has-footer) .rtds-card__content {
        @apply rtds-pb-1;
    }

    :where(.rtds-card--news-small:not(.rtds-card--horizontal)) .rtds-card__content {
        @apply md:rtds-pt-2;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__content {
        @apply rtds-px-2 rtds-py-3;
    }


    :where(.rtds-card--news-image-fullwidth) .rtds-card__content,
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__content {
        @apply rtds-px-3;
    }

    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__content {
        @apply md:rtds-px-4 md:rtds-py-4;
    }

    :where(.rtds-card--news-image-fullwidth) .rtds-card__content {
        @apply md:rtds-px-4;
    }

    :where(.rtds-card--horizontal) .rtds-card__content {
        @apply rtds-px-2;
    }

    :where(.rtds-card--related-info) .rtds-card__content {
        @apply rtds-p-5 sm:rtds-p-4;
    }
    
    :where(.rtds-card--related-info-l) .rtds-card__content {
        @apply  rtds-p-5 sm:rtds-p-6 sm:rtds-justify-center;
    }

    :where(.rtds-card--video) .rtds-card__content {
        @apply rtds-gap-2.5 md:rtds-gap-3 rtds-px-2 md:rtds-px-3 rtds-pb-2 md:rtds-pb-3;
    }

    .rtds-card--information .rtds-card__content {
        @apply rtds-p-0 rtds-flex rtds-flex-col rtds-gap-4 lg:rtds-gap-5;
    }

    .rtds-card__description {
        @apply rtds-content-03 rtds-text-sm;
    }

    .rtds-card__metadata {
        @apply rtds-flex rtds-items-baseline rtds-justify-between rtds-flex-wrap rtds-gap-1;
    }

    .rtds-card__tags {
        @apply rtds-flex rtds-gap-1.5 rtds-flex-wrap rtds-mt-auto;
    }

    .rtds-card__date {
        @apply rtds-text-sm rtds-content-03;
    }

    :where(.rtds-card--event) .rtds-card__date {
        @apply rtds-order-1 rtds-justify-self-start sm:rtds-w-full rtds-pb-3 sm:rtds-pr-4 sm:rtds-pb-0 rtds-border-b sm:rtds-border-r sm:rtds-border-b-0 rtds-border-gray-01;
    }

    :where(.rtds-card--news-small) .rtds-card__date {
        @apply rtds-text-xs;
    }

    :where(.rtds-card--event-small) .rtds-card__date {
        @apply sm:rtds-border-r-0;
    }

    .rtds-card__address {
        @apply rtds-flex rtds-gap-1;
    }

    :where(.rtds-card__address) .rtds-icon {
        @apply rtds-flex-none rtds-content-category;
    }

    :where(.rtds-card--news-small) .rtds-card__description,
    :where(.rtds-card--information) .rtds-card__description {
        @apply rtds-text-sm;
    }

    .rtds-card__footer {
        @apply rtds-mt-auto rtds-px-3 [grid-area:footer];
    }

    /* VARIANTS */
    /* MANAGE SIDE IMAGE */
    .rtds-card--horizontal {
        @apply rtds-grid [grid-template-areas:'thumb''content'];
    }

    .rtds-card--horizontal-left {
        @apply sm:rtds-grid-cols-[1fr_1fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--horizontal-right {
        @apply sm:rtds-grid-cols-[1fr_1fr] sm:[grid-template-areas:'content_thumb'];
    }

    .rtds-card--news-small:where(.rtds-card--horizontal-left)  {
        @apply sm:rtds-grid-cols-[2fr_3fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--news-image-square:where(.rtds-card--horizontal-left)  {
        @apply sm:rtds-grid-cols-[1fr_3fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--has-footer {
        @apply [grid-template-areas:'thumb''content''footer'] sm:[grid-template-areas:'thumb_content''footer_footer'];
    }

    .rtds-card--news:where(.rtds-card--horizontal-left) .rtds-card__footer {
        @apply rtds-px-3 sm:rtds-px-0;
    }

    .rtds-card--information-left-icon {
        @apply sm:rtds-grid-cols-[max-content_1fr] sm:[grid-template-areas:'thumb_content'];
    }

    .rtds-card--information-right-icon {
        @apply sm:rtds-grid-cols-[1fr_max-content] sm:[grid-template-areas:'content_thumb'];
    }

    :where(.rtds-card--horizontal) .rtds-card__image-wrapper,
    :where(.rtds-card--horizontal) .rtds-card__icon {
        @apply [grid-area:thumb];
    }

    :where(.rtds-card--horizontal) .rtds-card__content {
        @apply [grid-area:content];
    }

    :where(.rtds-card--horizontal:not(.rtds-card--news-image-left-fullwidth)) .rtds-card__image-wrapper {
        @apply rtds-self-start;
    }

    /* Card NEWS */
    .rtds-card--news,
    .rtds-card--event {
        @apply rtds-background-01;
    }

    :where(.rtds-card--news-no-thumb) .rtds-card__content {
        @apply rtds-pt-4;
    }

    :where(.rtds-card--news:not(.rtds-card--news-small)) .rtds-card__description {
        @apply rtds-text-sm md:rtds-text-base;
    }

    :where(.rtds-card--news) .rtds-card__image-wrapper {
        @apply rtds-rounded rtds-overflow-hidden;
    }

    :where(.rtds-card--news-left) .rtds-card__image-wrapper,
    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__image-wrapper,
    :where(.rtds-card--news-small) .rtds-card__image-wrapper,
    :where(.rtds-card--related-info-l) .rtds-card__image-wrapper {
        @apply sm:rtds-min-w-[80px];
    }

    .rtds-card--news-small,
    .rtds-card--news-left {
        @apply rtds-gap-3 md:rtds-gap-2;
    }

    .rtds-card--news-image-fullwidth,
    .rtds-card--news-image-left-fullwidth {
        @apply rtds-gap-3 rtds-p-0;
    }

    :where(.rtds-card--news-image-left-fullwidth) .rtds-card__image-wrapper {
        @apply rtds-rounded-none;
    }

    :where(.rtds-card--news-image-fullwidth) .rtds-card__image-wrapper {
        @apply rtds-rounded-b-none;
    }

    .rtds-card--information {
        @apply rtds-p-4 md:rtds-p-6 rtds-rounded rtds-items-stretch;
    }

    .rtds-card--sito-tematico {
        @apply rtds-p-0 rtds-gap-0;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__image-wrapper {
        @apply rtds-shadow-md;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__image {
        @apply rtds-aspect-wide;
    }

    :where(.rtds-card--related-info) .rtds-card__image {
        @apply rtds-aspect-video rtds-h-full;
    }

    :where(.rtds-card--news-image-square) .rtds-card__image {
        @apply rtds-aspect-square;
    }

    :where(.rtds-card--sito-tematico) .rtds-card__logo {
        @apply rtds-w-6 rtds-h-6 rtds-mr-4;
    }

    /* Card INFORMATION */

    .rtds-card--information-02 {
        @apply rtds-p-4 md:rtds-p-6 rtds-background-01;
    }

    :where(.rtds-card--information-02) .rtds-card__description {
        @apply rtds-text-sm md:rtds-text-base rtds-space-y-3 md:rtds-space-y-4;
    }

    :where(.rtds-card--information-02) .rtds-card__content {
        @apply rtds-p-0 rtds-gap-4;
    }

    :where(.rtds-card--information-02) .rtds-card__date {
        @apply rtds-block rtds-text-sm rtds-font-bold;
    }

    /* TITLE */
    .rtds-card__title {
        @apply rtds-font-bold rtds-leading-tight rtds-text-lg lg:rtds-text-xl;
    }

    .rtds-card__title a {
        @apply hover:rtds-underline;
    }

    :where(.rtds-card__title) a {
        @apply rtds-inline-block;
    }

    :where(.rtds-card__title) :where(.rtds-icon:not(.rtds-btn .rtds-icon)) {
        @apply rtds-ml-auto rtds-link-primary rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5;
    }

    
    :where(.rtds-card--news-small) .rtds-card__title {
        @apply rtds-text-base;
    }

    :where(.rtds-card--event) .rtds-card__heading {
        @apply rtds-gap-3;
    }

    :where(.rtds-card--event) .rtds-card__title {
        @apply  rtds-text-lg rtds-leading-tight;
    }

    :where(.rtds-card--information)  .rtds-card__title {
        @apply rtds-content-02 rtds-text-xl;
    }

    :where(.rtds-card--information-02) .rtds-card__title {
        @apply rtds-content-01 rtds-text-xl;
    }

    /* .rtds-card--widget .rtds-card__title {
        @apply rtds-content-01 rtds-text-2xl;
    } */

    :where(.rtds-card--sito-tematico) .rtds-card__title {
        @apply rtds-text-sm;
    }

    :where(.rtds-card--sito-tematico-l) .rtds-card__title {
        @apply rtds-text-sm sm:rtds-text-base lg:rtds-text-lg xl:rtds-text-xl;
    }

    :where(.rtds-card--related-info) .rtds-card__title {
        @apply rtds-text-lg sm:rtds-text-base;
    }

    :where(.rtds-card--related-info-l) .rtds-card__title {
        @apply rtds-text-lg sm:rtds-text-xl;
    }

    :where(.rtds-card--persona) .rtds-card__title {
        @apply rtds-text-base md:rtds-text-lg;
    }

    /* CARD EVENT */
    .rtds-card--event {
        @apply rtds-p-0;
    }

    :where(.rtds-card--event:not(.rtds-card--event-small)) {
        @apply rtds-content-start;
    }

    :where(.rtds-card--event) .rtds-card__image-wrapper {
        @apply rtds-rounded;
    }

    :where(.rtds-card--event) .rtds-card__content {
        @apply rtds-gap-2;
    }

    :where(.rtds-card--event:not(.rtds-card--event-small)) .rtds-card__content {
        @apply sm:rtds-grid sm:rtds-gap-4 sm:rtds-grid-cols-1-2;
    }

    :where(.rtds-card--event-small) .rtds-card__content {
        grid-template-rows: auto 1fr;
    }

    :where(.rtds-card--event-no-date) .rtds-card__content {
        @apply sm:rtds-grid-cols-1;
    }

    /* CARD PERSONA */
    .rtds-card--persona {
        @apply rtds-background-01 rtds-p-4;
    }

    :where(.rtds-card--persona) .rtds-card__content {
        @apply rtds-p-0;
    }

    .rtds-card__user-role {
        @apply rtds-text-xs md:rtds-text-sm rtds-uppercase rtds-content-03;
    }

    :where(.rtds-card--persona-complete) .rtds-card__heading {
        @apply rtds-flex-row rtds-justify-start;
    }

    /* Action link */
    :where(.is-card-fullclickable) .rtds-card__action-link {
        @apply hover:rtds-no-underline;
    }

    /* Action menu */
    .rtds-card__action-menu {
        @apply rtds-flex rtds-justify-end rtds-relative rtds-self-start;
    }

    .rtds-card__action-menu__trigger {
        @apply rtds-w-10 rtds-h-10 rtds-content-01;
    }

    .rtds-card__action-menu__trigger[aria-expanded="true"] {
        @apply rtds-background-08 rtds-content-inverse;
    }

    .rtds-card__action-menu-list {
        @apply rtds-w-[25ch] rtds-absolute rtds-right-0 rtds-top-10 rtds-bg-white rtds-shadow-lg;
    }

    .rtds-card__action-menu-list-item {
        @apply rtds-flex rtds-border-none;
    }

    .rtds-card__action-menu-list-item-action {
        @apply rtds-flex rtds-justify-start rtds-gap-2 rtds-items-center rtds-p-3 rtds-btn--s rtds-w-full rtds-transition rtds-bg-white rtds-font-medium rtds-text-sm rtds-content-primary-dark hover:rtds-underline hover:rtds-background-02 focus:rtds-background-02;
    }

    /* USER AVATAR */
    .rtds-card__user-avatar {
        @apply rtds-flex-none rtds-w-14 rtds-h-14 rtds-rounded-full rtds-overflow-hidden;
    }

    .rtds-card__user-avatar img {
        @apply rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
    }

    /* CARD GUIDA */
    .rtds-card--guida {
        @apply rtds-background-01 rtds-border rtds-border-gray-01;
    }

    :where(.rtds-card--guida) .rtds-card__title {
        @apply rtds-text-lg md:rtds-text-xl lg:rtds-text-2xl;
    }

    :where(.rtds-card--guida) .rtds-card__content {
        @apply rtds-p-4 md:rtds-p-5 lg:rtds-p-6 rtds-gap-4 md:rtds-gap-6;
    }

    :where(.rtds-card--guida) .rtds-card__description {
        @apply rtds-flex rtds-gap-2 md:rtds-gap-2.5;
    }

}
  • URL: /components/raw/card/card.css
  • Filesystem Path: components/03-molecules/card/card.css
  • Size: 12.7 KB
  • 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('.rtds-card.is-card-fullclickable');
Array.prototype.forEach.call(cards, card => {
    let down, up, link = card.querySelector('.rtds-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();
            }
        }
    }
});


//Js per card con accordion
(function() {
    'use strict';
    
    document.addEventListener('DOMContentLoaded', function() {
        const toggleElements = document.querySelectorAll('.rtds-js-accordion-toggle');
        
        toggleElements.forEach(function(element) {
            element.addEventListener('click', function() {
                const content = document.getElementById('accordion-content');
                const button = element.dataset.role === 'button' ? element : element.previousElementSibling;
                const icon = button.querySelector('svg');
                
                if (content) {
                    if (content.classList.contains('rtds-hidden')) {
                        // Apri accordion
                        content.classList.remove('rtds-hidden');
                        button.setAttribute('aria-expanded', 'true');
                      
                    } else {
                        // Chiudi accordion
                        content.classList.add('rtds-hidden');
                        button.setAttribute('aria-expanded', 'false');
                      
                    }
                }
            });
        });
    });
})();
  • URL: /components/raw/card/card.js
  • Filesystem Path: components/03-molecules/card/card.js
  • Size: 2.3 KB

Componente Card

Configurazioni del componente Card

Il componente Card è stato sviluppato seguendo il pattern inclusivo di Heydon Pickering: https://inclusive-components.design/cards/

Funzionalità Principali

Card Cliccabile

La card completamente cliccabile è gestita tramite uno script JavaScript. Per attivare questa funzionalità, è sufficiente aggiungere la classe is-card-fullclickable alla card. Il link è presente solo nel titolo della card (<a>). Per gestire le microinterazioni e gli effetti hover, la Card utilizza le classi transition hover:shadow-lg group, mentre il link del titolo utilizza la classe group-hover:underline.

Note Importanti per il Markup

Tag HTML

Per impostazione predefinita, il markup della card utilizza il tag <article>. Tuttavia, questo potrebbe non essere sempre la scelta più appropriata. Il tag <article> dovrebbe essere utilizzato per card che rappresentano entità autonome (ad esempio, una notizia, un post del blog, ecc., con un titolo, una data, un estratto, una miniatura, ecc.). In alcuni casi, potrebbe essere preferibile utilizzare un tag <div> all’interno di un contesto di lista (<ul> con role="list", e avvolto in un elemento <li> con classe rtds-col).

Intestazione

Per impostazione predefinita, l’intestazione della card è un <h3>. Ciò significa che la card dovrebbe essere utilizzata in una sezione con un <h2> che etichetta la sezione. Questo <h2> può essere visibile o nascosto (sr-only). Le sezioni dovrebbero sempre essere etichettate e identificate da un’intestazione.

Card Video

La card video include un video e un titolo. Può avere una descrizione e un link alla trascrizione. Il link alla trascrizione deve includere uno span con classe rtds-sr-only contenente il titolo del video, per motivi di accessibilità.

Card Guida

La card guida include un’icona specifica (clipboard-document-list) e un estratto. È progettata per visualizzare guide e documentazione.

Varianti Disponibili

Il componente Card supporta diverse varianti, tra cui:

  • Card con footer
  • Card notizia (standard e piccola)
  • Card notizia con thumb a sinistra
  • Card notizia con immagine a larghezza piena
  • Card approfondimento
  • Card informativa (con e senza gradiente)
  • Card evento (standard, senza data, piccola)
  • Card sito tematico
  • Card widget
  • Card procedimento
  • Card persona - Card per la visualizzazione di profili utente con avatar, ruolo e contatti
  • Card persona-complete - Variante della card persona con action menu per azioni aggiuntive
  • Card video - Card per la visualizzazione di contenuti video con trascrizione
  • Card guida - Card per la visualizzazione di guide e documentazione

Card Persona e Persona-Complete

Le varianti card--persona e card--persona-complete sono specificamente progettate per la visualizzazione di profili utente. La variante card--persona-complete estende card--persona aggiungendo un action menu con opzioni aggiuntive.

Caratteristiche della Card Persona:

  • Avatar utente: Visualizzazione dell’immagine del profilo utente
  • Nome e ruolo: Intestazione con nome della persona e ruolo professionale
  • Contatti: Lista di contatti (telefono, email) con icone appropriate
  • Link al profilo: Call-to-action per visualizzare il profilo completo

Caratteristiche della Card Persona-Complete:

  • Include tutte le funzionalità della card persona
  • Action menu: Menu a tendina con opzioni aggiuntive
  • Layout migliorato: Utilizza rtds-flex-1 per il wrapper del titolo per una migliore distribuzione dello spazio

Action Menu e Accessibilità

L’action menu nella variante card--persona-complete implementa diverse best practice per l’accessibilità:

Corrispondenza degli ID:
  • Trigger button: editCardButton - ID univoco per il pulsante trigger
  • Menu dropdown: editCard - ID univoco per il menu, collegato tramite aria-controls
  • Dialog profilo: `` - ID per il modal del profilo
Etichette Screen Reader:
  • Trigger button: Opzioni - Fornisce contesto sull’azione e la persona
  • Voce “Visualizza profilo”: <span class="rtds-sr-only"> di </span> - Specifica la persona di cui visualizzare il profilo
  • Voce “Cancella dai visualizzati”: <span class="rtds-sr-only"> </span> - Specifica la persona da rimuovere
Attributi ARIA:
  • aria-expanded="false" - Indica lo stato del menu (chiuso/aperto)
  • aria-controls="editCard" - Collega il trigger al menu
  • aria-haspopup="dialog" - Indica che l’azione apre un dialog
Struttura Semantica:
  • Utilizza <button> per le azioni del menu
  • Menu strutturato con <ul> e <li> per la navigazione da tastiera
  • Icone con significato semantico (lente per visualizzare, cestino per cancellare)

Configurazioni per lo Sviluppo in Nunjucks

Variabili e Impostazioni di Configurazione

  • classes: valore - aggiunge eventuali classi
  • categoryText: valore - sovrascrive il testo della categoria se necessario (predefinito: “Categoria”)
  • categoryVariant: valore - variante della categoria (es. ‘–sm’ per categorie piccole)
  • heading: valore - titolo della card
  • headingClasses: valore - aggiunge/modifica le classi dell’intestazione se necessario
  • h2: boolean - utilizza h2 invece di h3 come intestazione (predefinito: false)
  • headingLinkClasses: valore - classi personalizzate per il link dell’intestazione
  • contentGap: valore - modifica la classe del gap del contenuto se necessario (predefinito: gap-4)
  • contentClasses: valore - aggiunge classi aggiuntive al wrapper del contenuto
  • headingGap: valore - modifica la classe del gap degli elementi dell’intestazione (predefinito: gap-4)
  • headingLinkIcon: id icona - utilizzare se il link dell’intestazione necessita di un’icona
  • excerpt: valore - testo dell’estratto (impostato di default nella configurazione, per disabilitarlo usare “is-empty”)
  • excerptClasses: valore - aggiunge/modifica le classi dell’estratto
  • icon: iconId - imposta l’ID dell’icona superiore
  • iconSize: valore - imposta le classi di larghezza e altezza dell’icona
  • iconRadius: valore - gestisce il bordo dell’icona superiore
  • iconBg: valore - gestisce il colore di sfondo dell’icona superiore
  • iconBorder: valore - gestisce il bordo dell’icona superiore
  • iconColor: valore - gestisce il colore dell’icona superiore
  • ctaIcon: iconId - ID dell’icona per il CTA
  • ctaWrapperClasses: valore - classi per il wrapper del CTA
  • ctaLinkLabel: valore - etichetta per il link CTA

Configurazioni Specifiche per Card Persona

  • userAvatar: oggetto - configurazione dell’avatar utente
    • path: stringa - percorso dell’immagine
    • alt: stringa - testo alternativo dell’immagine
    • srcset: stringa - set di sorgenti per immagini responsive
  • userRole: stringa - ruolo professionale della persona
  • contacts: array - lista dei contatti
    • label: stringa - testo del contatto
    • href: stringa - link del contatto (tel:, mailto:, ecc.)
    • icon: stringa - ID dell’icona
    • accessibleLabelBefore: stringa - etichetta accessibile per screen reader

Configurazioni Specifiche per Card Persona-Complete

  • hasActionMenu: boolean - attiva il menu delle azioni
  • hasActionDelete: boolean - attiva l’opzione di cancellazione
  • editId: stringa - ID univoco per il menu (es. “01”, “02”)
  • profileDialogId: stringa - ID del modal del profilo (es. “profile-dialog-01”)

Componenti Booleani

Aggiungere il componente nella card con valore “true”:

  • article: true (predefinito) - per il markup della card (tag article)
  • category: true - mostra la categoria
  • ctaLink: true - mostra il link CTA
  • cta: true - mostra il pulsante CTA
  • tags: true - mostra la lista dei tag
  • date: true - mostra la data
  • thumb: true - mostra la miniatura
  • hasSideThumb: true - gestisce la classe della card per la miniatura laterale
  • hasRightSideThumb: true - gestisce la classe della card per la miniatura laterale destra
  • fullClick: true - aggiunge lo script che gestisce l’area cliccabile della card
  • fileDetails: true - aggiunge informazioni sul file (formato/peso) per le card di documenti
  • scadenza: true - mostra la data di scadenza

Gestione delle Impostazioni delle Immagini

  • img:
    • path: /percorso/immagine.jpg
    • alt: valore - ‘Testo alternativo se l’immagine non è descrittiva’
    • imgObjectFit: valore - gestisce l’object-fit dell’immagine
  • thumbSize: valore - gestisce la dimensione della miniatura
  • thumbAspectRatio: valore - imposta le classi dell’aspect ratio
  • thumbClasses: valore - gestisce le classi della miniatura
  • thumbFullHeight: boolean - imposta l’altezza completa della miniatura

Gestione delle Impostazioni della Miniatura dell’Intestazione

  • headingThumb:
    • path: /percorso/immagine.jpg
    • srcset: /percorso/immagine@2x.jpg 2x, /percorso/immagine.jpg 1x

Gestione delle Classi CSS per Layout Orizzontali

  • hasSideThumb: aggiunge le classi rtds-card--horizontal rtds-card--horizontal-left
  • hasRightSideThumb: aggiunge le classi rtds-card--horizontal rtds-card--horizontal-right

Blocchi Disponibili

  • classes - Blocco per le classi CSS della card
  • thumb - Blocco per la miniatura
  • fileDetails - Blocco per i dettagli del file
  • headingLinkIcon - Blocco per l’icona del link dell’intestazione
  • headingThumb - Blocco per la miniatura dell’intestazione
  • headingAdditionalLeft - Blocco per contenuto aggiuntivo a sinistra dell’intestazione
  • headingAdditionalRight - Blocco per contenuto aggiuntivo a destra dell’intestazione
  • fullClickable - Blocco per le classi della card completamente cliccabile
  • content - Blocco per il contenuto principale
  • cta - Blocco per il call-to-action
  • tags - Blocco per i tag
  • contentWrapperStart - Blocco di apertura per il wrapper del contenuto
  • metadatas - Blocco per i metadati (data, categoria)
  • date - Blocco specifico per la data
  • place - Blocco per informazioni sul luogo
  • contentWrapperEnd - Blocco di chiusura per il wrapper del contenuto
  • additionalContent - Blocco per contenuto aggiuntivo in posizioni diverse
  • cardFooter - Blocco per il footer della card