{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/index.ts",
      "declarations": [],
      "exports": [
        {
          "kind": "js",
          "name": "ItCard",
          "declaration": {
            "name": "ItCard",
            "module": "./it-card.js"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/it-card.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "ItCard",
          "members": [
            {
              "kind": "field",
              "name": "fullHeight",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "full-height"
            },
            {
              "kind": "field",
              "name": "variant",
              "type": {
                "text": "CardVariant"
              },
              "default": "'default'",
              "attribute": "variant"
            },
            {
              "kind": "field",
              "name": "borderTop",
              "type": {
                "text": "CardBorderColor | undefined"
              },
              "attribute": "border-top"
            },
            {
              "kind": "field",
              "name": "ratio",
              "type": {
                "text": "CardImageRatio | undefined"
              },
              "attribute": "ratio"
            },
            {
              "kind": "field",
              "name": "shadow",
              "type": {
                "text": "CardShadow"
              },
              "default": "'sm'",
              "attribute": "shadow"
            },
            {
              "kind": "field",
              "name": "border",
              "type": {
                "text": "'0' | undefined"
              },
              "attribute": "border"
            },
            {
              "kind": "field",
              "name": "headingLevel",
              "type": {
                "text": "CardHeadingLevel"
              },
              "default": "'h3'",
              "attribute": "heading-level"
            },
            {
              "kind": "field",
              "name": "headingSize",
              "type": {
                "text": "CardHeadingSize | undefined"
              },
              "attribute": "heading-size"
            },
            {
              "kind": "field",
              "name": "itClass",
              "type": {
                "text": "string | undefined"
              },
              "attribute": "it-class"
            },
            {
              "kind": "field",
              "name": "actionsAriaLabel",
              "type": {
                "text": "string | undefined"
              },
              "attribute": "actions-aria-label"
            },
            {
              "kind": "field",
              "name": "_titleElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_subtitleElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_addressElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_signatureElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_textElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_bodyElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_imageElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_footerElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "field",
              "name": "_actionsElements",
              "type": {
                "text": "HTMLElement[]"
              }
            },
            {
              "kind": "method",
              "name": "handleSlotChange",
              "privacy": "private"
            },
            {
              "kind": "method",
              "name": "getHeadingLevel",
              "privacy": "protected",
              "return": {
                "type": {
                  "text": "CardHeadingLevel"
                }
              }
            },
            {
              "kind": "method",
              "name": "getRatio",
              "privacy": "protected",
              "return": {
                "type": {
                  "text": "CardImageRatio"
                }
              }
            },
            {
              "kind": "method",
              "name": "getImageTemplate",
              "privacy": "protected"
            }
          ],
          "attributes": [
            {
              "name": "full-height",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "fullHeight"
            },
            {
              "name": "variant",
              "type": {
                "text": "CardVariant"
              },
              "default": "'default'",
              "fieldName": "variant"
            },
            {
              "name": "border-top",
              "type": {
                "text": "CardBorderColor | undefined"
              },
              "fieldName": "borderTop"
            },
            {
              "name": "ratio",
              "type": {
                "text": "CardImageRatio | undefined"
              },
              "fieldName": "ratio"
            },
            {
              "name": "shadow",
              "type": {
                "text": "CardShadow"
              },
              "default": "'sm'",
              "fieldName": "shadow"
            },
            {
              "name": "border",
              "type": {
                "text": "'0' | undefined"
              },
              "fieldName": "border"
            },
            {
              "name": "heading-level",
              "type": {
                "text": "CardHeadingLevel"
              },
              "default": "'h3'",
              "fieldName": "headingLevel"
            },
            {
              "name": "heading-size",
              "type": {
                "text": "CardHeadingSize | undefined"
              },
              "fieldName": "headingSize"
            },
            {
              "name": "it-class",
              "type": {
                "text": "string | undefined"
              },
              "fieldName": "itClass"
            },
            {
              "name": "actions-aria-label",
              "type": {
                "text": "string | undefined"
              },
              "fieldName": "actionsAriaLabel"
            }
          ],
          "superclass": {
            "name": "BaseComponent",
            "package": "@italia/globals"
          },
          "tagName": "it-card",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "ItCard",
          "declaration": {
            "name": "ItCard",
            "module": "src/it-card.ts"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "it-card",
          "declaration": {
            "name": "ItCard",
            "module": "src/it-card.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/types.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "CARD_VARIANTS",
          "type": {
            "text": "[\n  'default',\n  'inline',\n  'inline-reverse',\n  'inline-mini',\n  'inline-mini-reverse',\n  'profile',\n  'location',\n  'banner',\n  'inline-banner',\n  'inline-banner-reverse',\n  'inline-banner-mini',\n  'inline-banner-mini-reverse',\n]"
          },
          "default": "[ 'default', 'inline', 'inline-reverse', 'inline-mini', 'inline-mini-reverse', 'profile', 'location', 'banner', 'inline-banner', 'inline-banner-reverse', 'inline-banner-mini', 'inline-banner-mini-reverse', ]"
        },
        {
          "kind": "variable",
          "name": "CARD_BORDER_COLORS",
          "type": {
            "text": "['primary', 'secondary', 'success', 'danger', 'warning']"
          },
          "default": "['primary', 'secondary', 'success', 'danger', 'warning']"
        },
        {
          "kind": "variable",
          "name": "CARD_IMAGE_RATIOS",
          "type": {
            "text": "['1x1', '4x3', '16x9', '21x9']"
          },
          "default": "['1x1', '4x3', '16x9', '21x9']"
        },
        {
          "kind": "variable",
          "name": "CARD_SHADOWS",
          "type": {
            "text": "['none', 'sm', 'md', 'lg']"
          },
          "default": "['none', 'sm', 'md', 'lg']"
        },
        {
          "kind": "variable",
          "name": "CARD_HEADING_LEVELS",
          "type": {
            "text": "['h1', 'h2', 'h3', 'h4', 'h5', 'h6']"
          },
          "default": "['h1', 'h2', 'h3', 'h4', 'h5', 'h6']"
        },
        {
          "kind": "variable",
          "name": "CARD_HEADING_SIZES",
          "type": {
            "text": "['sm', 'md']"
          },
          "default": "['sm', 'md']"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "CARD_VARIANTS",
          "declaration": {
            "name": "CARD_VARIANTS",
            "module": "src/types.ts"
          }
        },
        {
          "kind": "js",
          "name": "CARD_BORDER_COLORS",
          "declaration": {
            "name": "CARD_BORDER_COLORS",
            "module": "src/types.ts"
          }
        },
        {
          "kind": "js",
          "name": "CARD_IMAGE_RATIOS",
          "declaration": {
            "name": "CARD_IMAGE_RATIOS",
            "module": "src/types.ts"
          }
        },
        {
          "kind": "js",
          "name": "CARD_SHADOWS",
          "declaration": {
            "name": "CARD_SHADOWS",
            "module": "src/types.ts"
          }
        },
        {
          "kind": "js",
          "name": "CARD_HEADING_LEVELS",
          "declaration": {
            "name": "CARD_HEADING_LEVELS",
            "module": "src/types.ts"
          }
        },
        {
          "kind": "js",
          "name": "CARD_HEADING_SIZES",
          "declaration": {
            "name": "CARD_HEADING_SIZES",
            "module": "src/types.ts"
          }
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "stories/it-card.stories.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "meta",
          "default": "{ title: 'Componenti/Card', tags: ['a11y-ok', 'web-component'], component: 'it-card', parameters: { layout: 'padded', }, decorators: [(story) => html` <div class=\"container p-0\">${story()}</div> `], args: { fullHeight: false, }, argTypes: { fullHeight: { name: 'full-height', control: 'boolean', description: \"La card riempie l'altezza del contenitore padre\", table: { defaultValue: { summary: 'false' } }, }, variant: { control: 'select', type: 'string', options: CARD_VARIANTS, description: 'Variante di layout della card', table: { defaultValue: { summary: 'default' } }, }, ratio: { control: 'select', type: 'string', options: [undefined, ...CARD_IMAGE_RATIOS], description: \"Rapporto d'aspetto dell'immagine della card.\", }, borderTop: { name: 'border-top', control: 'select', type: 'string', options: CARD_BORDER_COLORS, description: 'Aggiunge un bordo superiore colorato alla card per evidenziarla', }, headingLevel: { name: 'heading-level', control: 'select', type: 'string', options: CARD_HEADING_LEVELS, description: 'Livello di heading da usare per il titolo della card. Se non specificato, viene usato h3. Vedi la sezione \"Accessibilità\" della documentazione per maggiori dettagli.', }, headingSize: { name: 'heading-size', control: 'select', type: 'string', options: [undefined, ...CARD_HEADING_SIZES], description: 'Dimensione visiva del titolo della card. Se \"sm\" applica la classe h4, se \"md\" applica la classe h3. Se non specificato, la dimensione è determinata dalla variante.', }, shadow: { control: 'select', type: 'string', options: CARD_SHADOWS, description: \"Modifica l'ombra della card.\", }, border: { control: 'select', type: 'string', options: [undefined, '0'], description: 'Imposta il valore 0 per rimuovere il bordo della card.', }, 'actions-aria-label': { control: 'text', type: 'string', description: 'Etichetta ARIA per il gruppo di azioni della card.', table: { defaultValue: { summary: 'Link correlati:' } }, }, 'it-class': { type: 'string', description: \"Aggiunge classi custom alla card generata. Utile per impostare padding custom all'interno della Card.\", }, }, } satisfies Meta<CardProps>"
        },
        {
          "kind": "variable",
          "name": "EsempioInterattivo",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Esempio interattivo', tags: ['!dev'], parameters: { docs: { canvas: { sourceState: 'shown', }, }, }, decorators: [ (story) => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\">${story()}</div> </div> `, ], render: (args) => html` <it-card variant=${ifDefined(args.variant)} ?full-height=${args.fullHeight} border-top=${ifDefined(args.borderTop)} heading-level=${ifDefined(args.headingLevel)} heading-size=${ifDefined(args.headingSize)} ratio=${ifDefined(args.ratio)} shadow=${ifDefined(args.shadow)} border=${ifDefined(args.border)} it-class=${ifDefined(args['it-class'])} > <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> `, }"
        },
        {
          "kind": "variable",
          "name": "EditorialiStandard",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card editoriali standard', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <ul class=\"it-card-chips\" aria-label=\"Argomenti correlati: \"> <li class=\"list-item\"> <it-chip label=\"Argomento 1\" size=\"sm\" href=\"#\"></it-chip> </li> <li class=\"list-item\"> <it-chip label=\"Argomento 2\" size=\"sm\" href=\"#\"></it-chip> </li> </ul> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "EditorialiFeatured",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card editoriali featured', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\"> Titolo del contenuto featured <span class=\"visually-hidden\"> (link esterno su piattaforma XYZ)</span> <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-file\"></it-icon> </div> </a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"subtitle\">Sottotitolo del contenuto</span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\"> Titolo del contenuto featured <span class=\"visually-hidden\"> (link esterno su Designers Italia)</span> <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-designers-italia\"></it-icon> </div> </a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"subtitle\">Sottotitolo del contenuto</span> <span slot=\"signature\">di Maria Verde</span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <ul class=\"it-card-chips\" aria-label=\"Argomenti correlati: \"> <li class=\"list-item\"> <it-chip label=\"Argomento 1\" size=\"sm\" href=\"#\"></it-chip> </li> <li class=\"list-item\"> <it-chip label=\"Argomento 2\" size=\"sm\" href=\"#\"></it-chip> </li> </ul> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\"> Titolo del contenuto featured <span class=\"visually-hidden\"> (link esterno)</span> <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-external-link\"></it-icon> </div> </a> <span slot=\"signature\">di Maria Verde</span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "CardInline",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card inline', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 mb-3 mb-md-4 \"> <it-card variant=\"inline\"> <a slot=\"title\" href=\"#\">Titolo contenuto editoriale</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> <div class=\"col-12 mb-3 mb-md-4 \"> <it-card variant=\"inline-reverse\"> <a slot=\"title\" href=\"#\">Titolo contenuto editoriale</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "CardInlineMini",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card inline mini', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 mb-3 mb-md-4 \"> <it-card variant=\"inline-mini\"> <a slot=\"title\" href=\"#\">Titolo contenuto editoriale</a> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> <div class=\"col-12 col-md-6 mb-3 mb-md-4 \"> <it-card variant=\"inline-mini-reverse\"> <a slot=\"title\" href=\"#\">Titolo contenuto editoriale</a> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Eventi",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per eventi', parameters: { pageLayout: 'w-100' }, argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo evento</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"subtitle\">Dal 4 al 6 agosto</span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <a slot=\"actions\" href=\"#\" class=\"it-card-link\"> <span class=\"visually-hidden\">Link correlati: </span> Iscriviti all'evento </a> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo evento</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"subtitle\">Dal 4 al 6 novembre</span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <it-button slot=\"actions\" variant=\"secondary\" outline> <span class=\"visually-hidden\">Link correlati: </span> Compila il form di iscrizione </it-button> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Titolo evento</a> <span slot=\"subtitle\"> <span class=\"visually-hidden\">Data evento:</span> <time datetime=\"08-19\">19 agosto</time>, <span class=\"visually-hidden\">Orario:</span> <time>11:30</time>–<time>13:00</time> </span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "EventiInline",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per eventi inline', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-12 col-lg-12 col-xl-10 mb-3 mb-md-4\"> <it-card variant=\"inline\"> <a slot=\"title\" href=\"#\">Titolo evento</a> <span slot=\"subtitle\"> <span class=\"visually-hidden\">Data evento:</span> <time datetime=\"08-19\">19 agosto</time>, <span class=\"visually-hidden\">Orario:</span> <time>11:30</time>–<time>13:00</time> </span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <a slot=\"actions\" href=\"#\" class=\"it-card-link\"> <span class=\"visually-hidden\">Link correlati: </span> Iscriviti all'evento </a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> <div class=\"col-12 col-md-12 col-lg-12 col-xl-10 mb-3 mb-md-4\"> <it-card variant=\"inline-reverse\"> <a slot=\"title\" href=\"#\">Titolo evento</a> <span slot=\"subtitle\"> Dal 4 al 6 agosto </span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <it-button slot=\"actions\" variant=\"secondary\" outline> <span class=\"visually-hidden\">Link correlati: </span> Iscriviti </it-button> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Media",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per media', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\"> Titolo contenuto video <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-video\" label=\"Tipo: Video\"></it-icon> </div> </a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\"> Titolo contenuto video <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-video\" label=\"Tipo: Video\"></it-icon> </div> </a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <ul class=\"it-card-chips\" aria-label=\"Argomenti correlati: \"> <li class=\"list-item\"> <it-chip label=\"Argomento 1\" size=\"sm\" href=\"#\"></it-chip> </li> <li class=\"list-item\"> <it-chip label=\"Argomento 2\" size=\"sm\" href=\"#\"></it-chip> </li> </ul> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\"> Titolo contenuto audio <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-horn\" label=\"Tipo: Audio\"></it-icon> </div> </a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\"> Titolo contenuto audio <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-horn\" label=\"Tipo: Audio\"></it-icon> </div> </a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <ul class=\"it-card-chips\" aria-label=\"Argomenti correlati: \"> <li class=\"list-item\"> <it-chip label=\"Argomento 1\" size=\"sm\" href=\"#\"></it-chip> </li> <li class=\"list-item\"> <it-chip label=\"Argomento 2\" size=\"sm\" href=\"#\"></it-chip> </li> </ul> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "MediaVideoInline",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per media video inline', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-12 col-lg-12 col-xl-10 mb-3 mb-md-4\"> <it-card variant=\"inline\"> <a slot=\"title\" href=\"#\"> Titolo contenuto video <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-video\" label=\"Tipo: Video\"></it-icon> </div> </a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> <div class=\"col-12 col-md-12 col-lg-12 col-xl-10 mb-3 mb-md-4\"> <it-card variant=\"inline-reverse\"> <a slot=\"title\" href=\"#\"> Titolo contenuto video <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-video\" label=\"Tipo: Video\"></it-icon> </div> </a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ServiziEBandi",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per servizi e bandi', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo servizio</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo del servizio</a> <span slot=\"subtitle\">Sottotitolo del servizio</span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <span class=\"visually-hidden\">Stato del servizio: </span> <it-chip label=\"Attivo\" variant=\"success\" size=\"sm\"></it-chip> </div> <a slot=\"actions\" href=\"#\" class=\"it-card-link\"> <span class=\"visually-hidden\">Link correlati: </span> Requisiti per l'accesso </a> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo del bando</a> <span slot=\"subtitle\">Sottotitolo del bando</span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <span class=\"visually-hidden\">Stato del bando: </span> <it-chip label=\"Aperto\" variant=\"success\" size=\"sm\"></it-chip> </div> <span slot=\"footer\" class=\"it-card-date text-warning\"> <strong>Scadenza: </strong> <time class=\"it-card-date text-warning\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </span> <it-button slot=\"actions\" variant=\"secondary\" outline> <span class=\"visually-hidden\">Link correlati: </span> Compila il form di candidatura </it-button> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "DocumentiEAllegati",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per documenti e allegati', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\"> Titolo del documento <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-file\"></it-icon> </div> </a> <span slot=\"text\"> Eventuale breve estratto descrittivo del documento. </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\"> Titolo del documento <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-file\"></it-icon> </div> </a> <span slot=\"text\"> Eventuale breve estratto descrittivo del documento. Formato PDF (200KB) </span> <div slot=\"footer\" class=\"it-card-taxonomy\"> <a href=\"#\" class=\"it-card-category it-card-link\"> <span class=\"visually-hidden\">Categoria correlata: </span> Categoria </a> </div> <span slot=\"actions\" class=\"me-2\">Scarica come:</span> <a slot=\"actions\" href=\"#\" class=\"it-card-link\"> ODT (300KB) <span class=\"visually-hidden\">: Titolo del documento</span> </a> <a slot=\"actions\" href=\"#\" class=\"it-card-link\"> ODS (400KB) <span class=\"visually-hidden\">: Titolo del documento</span> </a> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\"> Titolo del file allegato <span class=\"visually-hidden\">(Formato ODT, 200KB)</span> <div class=\"it-card-title-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-file-odt\"></it-icon> </div> </a> <span slot=\"text\" aria-hidden=\"true\">Formato ODT (200KB)</span> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ProfiliPersonali",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per profili personali', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"profile\"> <a slot=\"title\" href=\"#\">Nome Personale</a> <span slot=\"subtitle\">Ruolo nell'organizzazione</span> <it-avatar slot=\"image\" type=\"text\" size=\"xl\" text=\"Nome Personale\" avatar-title=\"Nome Personale\"></it-avatar> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"profile\" border-top=\"secondary\"> <a slot=\"title\" href=\"#\">Nome Personale</a> <span slot=\"subtitle\">Ruolo nell'organizzazione</span> <it-avatar slot=\"image\" size=\"xl\" text=\"Nome Personale\" src=\"https://randomuser.me/api/portraits/women/14.jpg\" alt=\"Woman image\" ></it-avatar> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"profile\"> <a slot=\"title\" href=\"#\">Nome Personale</a> <span slot=\"subtitle\">Ruolo nell'organizzazione</span> <it-avatar slot=\"image\" type=\"text\" size=\"xl\" text=\"Nome Personale\" avatar-title=\"Nome Personale\"></it-avatar> <dl slot=\"body\" class=\"it-card-description-list\"> <div> <dt>Area:</dt> <dd><a class=\"it-card-link\" href=\"#\">Nome dell'area di appartenenza</a></dd> </div> <div> <dt>Email:</dt> <dd>me@mail.com</dd> </div> <div> <dt>Tel:</dt> <dd>340.4050600</dd> </div> <div> <dt>Indirizzo:</dt> <dd>Via della città, 5 - 00100 Città</dd> </div> </dl> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"profile\" border-top=\"secondary\"> <a slot=\"title\" href=\"#\">Nome Personale</a> <span slot=\"subtitle\">Ruolo nell'organizzazione</span> <it-avatar slot=\"image\" type=\"text\" size=\"xl\" text=\"Nome Personale\" avatar-title=\"Nome Personale\"></it-avatar> <dl slot=\"body\" class=\"it-card-description-list\"> <div> <dt>Area:</dt> <dd><a class=\"it-card-link\" href=\"#\">Nome dell'area di appartenenza</a></dd> </div> <div> <dt>Email:</dt> <dd>me@mail.com</dd> </div> <div> <dt>Tel:</dt> <dd>340.4050600</dd> </div> <div> <dt>Indirizzo:</dt> <dd>Via della città, 5 - 00100 Città</dd> </div> </dl> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Luoghi",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card per luoghi', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"location\"> <a slot=\"title\" href=\"#\">Toponimo o luogo</a> <span slot=\"subtitle\">Tipologia di luogo</span> <span slot=\"address\">Indirizzo del luogo</span> <div slot=\"image\" class=\"it-card-profile-image-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-pa\" size=\"lg\"></it-icon> </div> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"location\" border-top=\"secondary\"> <a slot=\"title\" href=\"#\">Toponimo o luogo</a> <span slot=\"subtitle\">Tipologia di luogo</span> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/monument/320/320\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"location\"> <a slot=\"title\" href=\"#\">Toponimo o luogo</a> <span slot=\"subtitle\">Tipologia di luogo</span> <span slot=\"address\">Indirizzo del luogo</span> <div slot=\"image\" class=\"it-card-profile-image-icon-wrapper\"> <it-icon color=\"primary\" name=\"it-pa\" size=\"lg\"></it-icon> </div> <dl slot=\"body\" class=\"it-card-description-list border-bottom-0 mb-0\"> <div> <dt>Email:</dt> <dd>me@mail.com</dd> </div> <div> <dt>Tel:</dt> <dd>340.4050600</dd> </div> <div> <dt>Indirizzo:</dt> <dd>Via della città, 5 - 00100 Città</dd> </div> </dl> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height variant=\"location\" border-top=\"secondary\"> <a slot=\"title\" href=\"#\">Toponimo o luogo</a> <span slot=\"subtitle\">Tipologia di luogo</span> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/monument/320/320\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <dl slot=\"body\" class=\"it-card-description-list border-bottom-0 mb-0\"> <div> <dt>Email:</dt> <dd>me@mail.com</dd> </div> <div> <dt>Tel:</dt> <dd>340.4050600</dd> </div> <div> <dt>Indirizzo:</dt> <dd>Via della città, 5 - 00100 Città</dd> </div> </dl> <div slot=\"footer\" style=\"flex-grow:1\"> <it-icon color=\"secondary\" name=\"it-map-marker\" size=\"sm\"></it-icon> <strong>Distanza:</strong> 900 metri </div> <a slot=\"footer\" href=\"#\" target=\"_blank\" class=\"it-card-link\"> Apri in mappa <span class=\"visually-hidden\"> Toponimo o Luogo (si apre in una nuova finestra)</span> <it-icon class=\"ms-2\" color=\"secondary\" name=\"it-external-link\" size=\"sm\"></it-icon> </a> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ListeDiContenutiAffini",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card con liste di contenuti affini', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height ratio=\"21x9\"> <a slot=\"title\" href=\"#\">Argomento Y</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/nature/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\">Descrizione breve dell'argomento in poche righe non troncate.</span> <ul slot=\"body\" class=\"list-group list-group-flush\" aria-label=\"Contenuti in evidenza:\"> <li class=\"list-group-item\"><a href=\"#\">Titolo notizia affine</a></li> <li class=\"list-group-item\"><a href=\"#\">Titolo media affine</a></li> <li class=\"list-group-item\"><a href=\"#\">Altro titolo scheda affine</a></li> <li class=\"list-group-item\"><a href=\"#\">Pagina profilo affine</a></li> </ul> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height ratio=\"21x9\"> <a slot=\"title\" href=\"#\">Titolo evento</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/monument/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"subtitle\">Dal 17 al 22 novembre</span> <span slot=\"text\">Descrizione breve dell'evento in poche righe non troncate.</span> <ul slot=\"body\" class=\"list-group list-group-flush\" aria-label=\"Contenuti in evidenza:\"> <li class=\"list-group-item\"><a href=\"#\">Gli artisti</a></li> <li class=\"list-group-item\"><a href=\"#\">Il luogo</a></li> <li class=\"list-group-item\"><a href=\"#\">Il programma dettagliato</a></li> </ul> <div slot=\"footer\" style=\"flex-grow:1\"> <a class=\"it-card-link\" href=\"#\">Iscriviti per rimanere aggiornato</a> </div> <a slot=\"footer\" href=\"#\" target=\"_blank\" class=\"it-card-link\"> Apri la mappa <span class=\"visually-hidden\"> di Titolo evento (si apre in una nuova finestra)</span> <it-icon class=\"ms-2\" color=\"secondary\" name=\"it-external-link\" size=\"sm\"></it-icon> </a> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Argomento X</a> <span slot=\"text\">Descrizione breve dell'argomento in poche righe non troncate.</span> <ul slot=\"body\" class=\"list-group list-group-flush\" aria-label=\"Contenuti in evidenza:\"> <li class=\"list-group-item\"><a href=\"#\" class=\"it-card-link\">Titolo notizia affine</a></li> <li class=\"list-group-item\"><a href=\"#\" class=\"it-card-link\">Titolo media affine</a></li> <li class=\"list-group-item\"><a href=\"#\" class=\"it-card-link\">Altro titolo scheda affine</a></li> <li class=\"list-group-item\"><a href=\"#\" class=\"it-card-link\">Pagina profilo affine</a></li> </ul> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Banner",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card banner', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"banner\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Sottotitolo</span> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "BannerConAzione",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card banner con azione', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"banner\"> <span slot=\"title\">Titolo del contenuto</span> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Sottotitolo</span> <a slot=\"footer\" href=\"#\"> Scopri maggiori informazioni <span class=\"visually-hidden\">su Titolo del contenuto</span> </a> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"banner\"> <span slot=\"title\">Titolo del contenuto</span> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Sottotitolo</span> <it-button slot=\"footer\" variant=\"primary\" outline> Apri il form di iscrizione <span class=\"visually-hidden\">per Titolo del contenuto</span> </it-button> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "BannerInline",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Card banner inline', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"inline-banner\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Sottotitolo</span> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"inline-banner-reverse\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Sottotitolo</span> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"inline-banner-mini\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Versione inline anche su mobile</span> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card variant=\"inline-banner-mini-reverse\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <it-icon slot=\"image\" color=\"secondary\" name=\"it-chart-line\" size=\"xl\"></it-icon> <span slot=\"subtitle\">Versione inline anche su mobile</span> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "BordiEOmbre",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Bordi e ombre', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Titolo h3</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card shadow=\"md\"> <a slot=\"title\" href=\"#\">Titolo h3</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card shadow=\"lg\"> <a slot=\"title\" href=\"#\">Titolo h3</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> </div> <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\">&nbsp;</div> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card shadow=\"md\" border=\"0\"> <a slot=\"title\" href=\"#\">Titolo h3</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card shadow=\"lg\" border=\"0\"> <a slot=\"title\" href=\"#\">Titolo h3</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "Immagini",
          "type": {
            "text": "Story"
          },
          "default": "{ argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card ratio=\"21x9\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\">Card con immagine con proporzioni 21:9.</span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card ratio=\"16x9\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\">Card con immagine con proporzioni 16:9.</span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card ratio=\"4x3\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\">Card con immagine con proporzioni 4:3.</span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card ratio=\"1x1\"> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\">Card con immagine con proporzioni 1:1.</span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "AltezzaDelleCard",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Altezza delle card', argTypes: { ...disabledControls() }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <figure slot=\"image\" class=\"figure img-full\"> <img src=\"https://picsum.photos/seed/city/800/600\" alt=\"Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.\" /> </figure> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> <div class=\"col-12 col-md-6 col-lg-6 mb-3 mb-md-4\"> <it-card full-height> <a slot=\"title\" href=\"#\">Titolo del contenuto</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </div> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "PulsantiMobile",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Pulsanti a tutta larghezza su mobile', decorators: [(story) => html` <div style=\"display:grid;gap:24px;grid-template-columns:1fr 1fr;\">${story()}</div> `], argTypes: { ...disabledControls() }, render: () => html` <it-card> <a slot=\"title\" href=\"#\">Titolo dell'evento</a> <span slot=\"subtitle\">Dal 4 al 6 agosto</span> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> <div slot=\"actions\" class=\"d-grid gap-2 d-md-block\"> <a href=\"#\" class=\"btn btn-outline-secondary\"> Prenota <span class=\"visually-hidden\">per Titolo dell'evento</span> </a> </div> </it-card> `, }"
        },
        {
          "kind": "variable",
          "name": "ListeCardNumerose",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Liste per gruppi numerosi di card', argTypes: { ...disabledControls() }, render: () => html` <ul class=\"it-card-list row\" aria-label=\"Risultati della ricerca: \"> <li class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Primo risultato</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </li> <li class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Secondo risultato</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </li> <li class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Terzo risultato</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </li> <li class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Quarto risultato</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </li> <li class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Quinto risultato</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </li> <li class=\"col-12 col-md-6 col-lg-4 mb-3 mb-md-4\"> <it-card> <a slot=\"title\" href=\"#\">Sesto risultato</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-04-22\"> 22 aprile 2026 </time> </it-card> </li> </ul> `, }"
        },
        {
          "kind": "variable",
          "name": "ClassiDedicate",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Uso di classi dedicate (per piccoli gruppi)', argTypes: { ...disabledControls() }, render: () => html` <div class=\"it-card-group\"> <it-card> <a slot=\"title\" href=\"#\">Titolo della prima card</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> <it-card> <a slot=\"title\" href=\"#\">Titolo della seconda card</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> <it-card> <a slot=\"title\" href=\"#\">Titolo della terza card</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> <it-card> <a slot=\"title\" href=\"#\">Titolo della quarta card</a> <span slot=\"text\"> Questo è un testo breve che riassume il contenuto della pagina di destinazione. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ClassiDedicateColonne",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Numero di colonne specifiche', argTypes: { ...disabledControls() }, render: () => html` <div class=\"it-card-group it-card-group-2-cols\"> <it-card> <a slot=\"title\" href=\"#\">Card in due colonne</a> <span slot=\"text\"> Questo gruppo mostra sempre due colonne su viewport medie e grandi. </span> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card in due colonne</a> <span slot=\"text\"> Questo gruppo mostra sempre due colonne su viewport medie e grandi. </span> </it-card> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ClassiDedicateCentrate",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Centrate orizzontalmente', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"it-card-group it-card-group-center\"> <it-card> <a slot=\"title\" href=\"#\">Card centrata</a> <span slot=\"text\"> Questo gruppo ha le card centrate nella pagina. </span> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card centrata</a> <span slot=\"text\"> Questo gruppo ha le card centrate nella pagina. </span> </it-card> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ClassiDedicateContainer",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Uso rispetto al contenitore (sperimentale)', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"it-card-group it-card-group-container-aware\"> <it-card> <a slot=\"title\" href=\"#\">Card con Container Queries</a> <span slot=\"text\"> Questa card si adatta alla dimensione del suo contenitore, non della viewport. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card con Container Queries</a> <span slot=\"text\"> Questa card si adatta alla dimensione del suo contenitore, non della viewport. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card con Container Queries</a> <span slot=\"text\"> Questa card si adatta alla dimensione del suo contenitore, non della viewport. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card con Container Queries</a> <span slot=\"text\"> Questa card si adatta alla dimensione del suo contenitore, non della viewport. </span> <time slot=\"footer\" class=\"it-card-date\" datetime=\"2026-10-12\"> 12 ottobre, 2026 </time> </it-card> </div> `, }"
        },
        {
          "kind": "variable",
          "name": "ClassiDedicateConfrontoColonne",
          "type": {
            "text": "Story"
          },
          "default": "{ name: 'Confronto in colonne diverse', argTypes: { ...disabledControls() }, parameters: { pageLayout: 'w-100' }, render: () => html` <div class=\"row\"> <div class=\"col-12 col-lg-8 mb-4\"> <div class=\"p-3 bg-light\"> <div class=\"it-card-group it-card-group-container-aware\"> <it-card> <a slot=\"title\" href=\"#\">Card in colonna larga</a> <span slot=\"text\"> In questa colonna larga, le card si distribuiscono su più colonne. </span> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card in colonna larga</a> <span slot=\"text\"> In questa colonna larga, le card si distribuiscono su più colonne. </span> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card in colonna larga</a> <span slot=\"text\"> In questa colonna larga, le card si distribuiscono su più colonne. </span> </it-card> </div> </div> </div> <div class=\"col-12 col-lg-4 mb-4\"> <div class=\"p-3 bg-light\"> <div class=\"it-card-group it-card-group-container-aware\"> <it-card> <a slot=\"title\" href=\"#\">Card in colonna stretta</a> <span slot=\"text\"> In questa colonna stretta, le card si dispongono su una singola colonna. </span> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card in colonna stretta</a> <span slot=\"text\"> In questa colonna stretta, le card si dispongono su una singola colonna. </span> </it-card> <it-card> <a slot=\"title\" href=\"#\">Card in colonna stretta</a> <span slot=\"text\"> In questa colonna stretta, le card si dispongono su una singola colonna. </span> </it-card> </div> </div> </div> </div> `, }"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "default",
          "declaration": {
            "name": "meta",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "EsempioInterattivo",
          "declaration": {
            "name": "EsempioInterattivo",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "EditorialiStandard",
          "declaration": {
            "name": "EditorialiStandard",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "EditorialiFeatured",
          "declaration": {
            "name": "EditorialiFeatured",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "CardInline",
          "declaration": {
            "name": "CardInline",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "CardInlineMini",
          "declaration": {
            "name": "CardInlineMini",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Eventi",
          "declaration": {
            "name": "Eventi",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "EventiInline",
          "declaration": {
            "name": "EventiInline",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Media",
          "declaration": {
            "name": "Media",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "MediaVideoInline",
          "declaration": {
            "name": "MediaVideoInline",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ServiziEBandi",
          "declaration": {
            "name": "ServiziEBandi",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "DocumentiEAllegati",
          "declaration": {
            "name": "DocumentiEAllegati",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ProfiliPersonali",
          "declaration": {
            "name": "ProfiliPersonali",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Luoghi",
          "declaration": {
            "name": "Luoghi",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ListeDiContenutiAffini",
          "declaration": {
            "name": "ListeDiContenutiAffini",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Banner",
          "declaration": {
            "name": "Banner",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "BannerConAzione",
          "declaration": {
            "name": "BannerConAzione",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "BannerInline",
          "declaration": {
            "name": "BannerInline",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "BordiEOmbre",
          "declaration": {
            "name": "BordiEOmbre",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "Immagini",
          "declaration": {
            "name": "Immagini",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "AltezzaDelleCard",
          "declaration": {
            "name": "AltezzaDelleCard",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "PulsantiMobile",
          "declaration": {
            "name": "PulsantiMobile",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ListeCardNumerose",
          "declaration": {
            "name": "ListeCardNumerose",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ClassiDedicate",
          "declaration": {
            "name": "ClassiDedicate",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ClassiDedicateColonne",
          "declaration": {
            "name": "ClassiDedicateColonne",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ClassiDedicateCentrate",
          "declaration": {
            "name": "ClassiDedicateCentrate",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ClassiDedicateContainer",
          "declaration": {
            "name": "ClassiDedicateContainer",
            "module": "stories/it-card.stories.ts"
          }
        },
        {
          "kind": "js",
          "name": "ClassiDedicateConfrontoColonne",
          "declaration": {
            "name": "ClassiDedicateConfrontoColonne",
            "module": "stories/it-card.stories.ts"
          }
        }
      ]
    }
  ]
}