From e4c9e14f6295343bce7262665fa54ba4085cad30 Mon Sep 17 00:00:00 2001
From: Virtute90 <32056724+Virtute90@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:05:54 +0200
Subject: [PATCH] feat: add list component

---
 src/List/List.tsx                             |   40 +
 src/List/ListItem.tsx                         |   86 +
 src/index.ts                                  |    8 +-
 .../Components/LinkList/LinkList.stories.tsx  |    2 +-
 stories/Components/List.stories.tsx           |  246 +
 stories/Documentation/List.mdx                |   75 +
 test/List.test.tsx                            |  249 +
 test/__snapshots__/Storybook.test.tsx.snap    | 4618 +++++++++++------
 8 files changed, 3652 insertions(+), 1672 deletions(-)
 create mode 100644 src/List/List.tsx
 create mode 100644 src/List/ListItem.tsx
 create mode 100644 stories/Components/List.stories.tsx
 create mode 100644 stories/Documentation/List.mdx
 create mode 100644 test/List.test.tsx

diff --git a/src/List/List.tsx b/src/List/List.tsx
new file mode 100644
index 000000000..72761e02a
--- /dev/null
+++ b/src/List/List.tsx
@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  /** Classi aggiuntive da usare per il componente lista del List */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente wrapper del List */
+  wrapperClassName?: string;
+  /**
+   * Utilizzarlo in caso di utilizzo di componenti personalizzati per il wrapper della lista.
+   * Nota: viene ignorato quando usato in lista annidate.
+   * */
+  tag?: ElementType;
+  /** Quando attivo rimuove il componente contenitore della ListList. Utile per alcuni tipi di liste annidate. */
+  noWrapper?: boolean;
+  testId?: string;
+}
+
+export const List: FC<ListProps> = ({
+  className,
+  wrapperClassName,
+  tag = 'div',
+  noWrapper,
+  testId,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('it-list-wrapper', wrapperClassName);
+  const classes = classNames(className, 'it-list');
+
+  if (noWrapper) {
+    return <ul {...attributes} className={classes} data-testid={testId} />;
+  }
+
+  return (
+    <Tag className={wrapperClasses} data-testid={testId}>
+      <ul {...attributes} className={classes} />
+    </Tag>
+  );
+};
diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx
new file mode 100644
index 000000000..db69b9bc2
--- /dev/null
+++ b/src/List/ListItem.tsx
@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import React, { AnchorHTMLAttributes, ElementType, FC, ReactNode } from 'react';
+
+export interface ListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Indica se l'elemento è attivo o no */
+  active?: boolean;
+  /** Indica se l'elemento ha un avatar */
+  avatar?: ReactNode;
+  /** Indica se l'elemento ha una icona */
+  icon?: ReactNode;
+  /** Indica se l'elemento ha una immagine */
+  img?: ReactNode;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente ListItem */
+  className?: string;
+  /** Classi aggiuntive da usare per l'elemento contenitore dell'item */
+  wrapperClassName?: string;
+  /** Indica il link a cui l'elemento deve puntare. */
+  href?: string;
+  /** Indica il link route a cui l'elemento deve puntare. */
+  to?: string;
+  testId?: string;
+}
+
+export const ListItem: FC<ListItemProps> & {
+  MultipleAction: typeof MultipleAction;
+} = ({
+  className,
+  active,
+  avatar,
+  icon,
+  img,
+  href,
+  tag = 'div',
+  to,
+  wrapperClassName,
+  testId,
+  children,
+  ...attributes
+}) => {
+    let Tag = tag;
+    const classes = classNames(
+      className,
+      { active },
+      'list-item'
+    ),
+      classesItem = classNames(className, {
+        'it-rounded-icon': icon,
+        'avatar size-lg': avatar,
+        'it-thumb': img
+      }),
+      leftItem = icon || avatar || img;
+
+    if (href) {
+      return (
+        <li className={wrapperClassName} data-testid={testId}>
+          <Tag>
+            <a href={href || '#'} {...attributes} className={classes}>
+              {children}
+            </a>
+          </Tag>
+        </li>
+      );
+    }
+
+    return (
+      <li className={wrapperClassName} data-testid={testId}>
+        <Tag
+          {...attributes}
+          className={classes}
+          href={href}
+          to={to}
+        >
+          {leftItem && <div className={classesItem}>{leftItem}</div>}
+          <div className="it-right-zone">{children}</div>
+        </Tag>
+      </li>
+    );
+  };
+
+const MultipleAction: FC<ListItemProps> = ({ children }) => {
+  return <span className='it-multiple'>{children}</span>
+};
+
+ListItem.MultipleAction = MultipleAction;
diff --git a/src/index.ts b/src/index.ts
index d8a44f275..196137072 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -96,10 +96,10 @@ export { HeaderBrand } from './Header/HeaderBrand';
 export { HeaderContent } from './Header/HeaderContent';
 export { HeaderLinkZone } from './Header/HeaderLinkZone';
 export { HeaderRightZone } from './Header/HeaderRightZone';
+export { Headers } from './Header/Headers';
 export { HeaderSearch } from './Header/HeaderSearch';
 export { HeaderSocialsZone } from './Header/HeaderSocialsZone';
 export { HeaderToggler } from './Header/HeaderToggler';
-export { Headers } from './Header/Headers';
 export { Hero, HeroBackground, HeroBody, HeroButton, HeroCategory, HeroTitle } from './Hero/index';
 export { Icon, clearIconCache, iconsList as icons, preloadIcons } from './Icon/Icon';
 export { Input } from './Input/Input';
@@ -107,6 +107,8 @@ export { InputContainer } from './Input/InputContainer';
 export { TextArea } from './Input/TextArea';
 export { LinkList } from './LinkList/LinkList';
 export { LinkListItem } from './LinkList/LinkListItem';
+export { List } from './List/List';
+export { ListItem } from './List/ListItem';
 export { MegamenuFooter } from './Megamenu/MegamenuFooter';
 export { MegamenuHighlightColumn } from './Megamenu/MegamenuHighlightColumn';
 export { MegamenuItem } from './Megamenu/MegamenuItem';
@@ -193,10 +195,10 @@ export type { HeaderBrandProps } from './Header/HeaderBrand';
 export type { HeaderContentProps } from './Header/HeaderContent';
 export type { HeaderLinkZoneProps } from './Header/HeaderLinkZone';
 export type { HeaderRightZoneProps } from './Header/HeaderRightZone';
+export type { HeadersProps } from './Header/Headers';
 export type { HeaderSearchProps } from './Header/HeaderSearch';
 export type { HeaderSocialsZoneProps } from './Header/HeaderSocialsZone';
 export type { HeaderTogglerProps } from './Header/HeaderToggler';
-export type { HeadersProps } from './Header/Headers';
 export type {
   HeroBackgroundProps,
   HeroBodyProps,
@@ -211,6 +213,8 @@ export type { InputContainerProps } from './Input/InputContainer';
 export type { TextAreaProps } from './Input/TextArea';
 export type { LinkListProps } from './LinkList/LinkList';
 export type { LinkListItemProps } from './LinkList/LinkListItem';
+export type { ListProps } from './List/List';
+export type { ListItemProps } from './List/ListItem';
 export type { MegamenuFooterProps } from './Megamenu/MegamenuFooter';
 export type { MegamenuHCProps } from './Megamenu/MegamenuHighlightColumn';
 export type { MegamenuItemProps } from './Megamenu/MegamenuItem';
diff --git a/stories/Components/LinkList/LinkList.stories.tsx b/stories/Components/LinkList/LinkList.stories.tsx
index ce05ab9b0..c535c4e00 100644
--- a/stories/Components/LinkList/LinkList.stories.tsx
+++ b/stories/Components/LinkList/LinkList.stories.tsx
@@ -16,7 +16,7 @@ import {
 } from "../../../src";
 
 const meta: Meta<typeof LinkList> = {
-  title: "Documentazione/Organizzare i contenuti/Liste",
+  title: "Documentazione/Organizzare i contenuti/Liste di link",
   component: LinkList
 };
 
diff --git a/stories/Components/List.stories.tsx b/stories/Components/List.stories.tsx
new file mode 100644
index 000000000..4fb1fa70d
--- /dev/null
+++ b/stories/Components/List.stories.tsx
@@ -0,0 +1,246 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from "react";
+
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  Icon,
+  List,
+  ListItem
+} from "../../src";
+
+const meta: Meta<typeof List> = {
+  title: "Documentazione/Organizzare i contenuti/Liste",
+  component: List
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ListItem>;
+
+const ListaTemplate: Story = {
+  render: ({ ...args }) => (
+    <List>
+      <ListItem {...args}>
+        <span className="text">Testo</span>
+      </ListItem>
+      <ListItem tag={'a'} {...args}>
+        <span className="text">Link</span>
+      </ListItem>
+      <ListItem active tag={'a'} {...args}>
+        <span className="text">Link attivo</span>
+      </ListItem>
+    </List>
+  )
+};
+
+export const ListaSemplice: Story = {
+  ...ListaTemplate
+};
+
+export const ListaAvatar: Story = {
+  ...ListaTemplate,
+  args: {
+    avatar: <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri" />
+  }
+};
+
+export const ListaIcona: Story = {
+  ...ListaTemplate,
+  args: {
+    icon: <Icon icon="it-folder" />
+  }
+};
+
+export const ListaImmagine: Story = {
+  ...ListaTemplate,
+  args: {
+    img: <img src="https://placehold.jp/40x40.png" alt="descrizione immagine" />
+  }
+};
+
+export const ListaFreccia: Story = {
+  render: () => (
+    <List>
+      <ListItem >
+        <span className="text">Testo</span>
+        <Icon icon="it-chevron-right" />
+      </ListItem>
+      <ListItem tag={'a'} >
+        <span className="text">Link</span>
+        <Icon icon="it-chevron-right" />
+      </ListItem>
+      <ListItem active tag={'a'}>
+        <span className="text">Link attivo</span>
+        <Icon icon="it-chevron-right" />
+      </ListItem>
+    </List>
+  )
+};
+
+export const ListaAzioniMultiple: Story = {
+  render: () => (
+    <List>
+      <ListItem >
+        <span className="text">Testo</span>
+        <ListItem.MultipleAction>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem>
+        <a href="#"><span className="text">Link</span></a>
+        <ListItem.MultipleAction>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem active>
+        <a href="#"><span className="text">Link attivo</span></a>
+        <ListItem.MultipleAction>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+    </List>
+  ),
+  parameters: {
+    docs: {
+      /**
+       * Sostituisco nel sorgente MultipleAction con ListItem.MultipleAction
+       * altrimenti non si capisce da dove si importa
+       */
+      source: { transform: (code: string) => code.replaceAll('MultipleAction', 'ListItem.MultipleAction') },
+    },
+  },
+};
+
+export const ListaMetadata: Story = {
+  render: ({ ...args }) => (
+    <List>
+      <ListItem {...args}>
+        <span className="text">Testo</span>
+        <span className="metadata">metadata testo</span>
+      </ListItem>
+      <ListItem {...args}>
+        <span className="text">Testo 2</span>
+        <span className="metadata"><a href="#">metadata link</a></span>
+      </ListItem>
+      <ListItem {...args}>
+        <a href="#"><span className="text">Link</span></a>
+        <span className="metadata">metadata testo</span>
+      </ListItem>
+      <ListItem {...args}>
+        <a href="#"><span className="text">Link 2</span></a>
+        <span className="metadata"><a href="#">metadata link</a></span>
+      </ListItem>
+      <ListItem active tag={'a'} {...args}>
+        <span className="text">Link attivo</span>
+        <span className="metadata">metadata testo</span>
+      </ListItem>
+      <ListItem active {...args}>
+        <a href="#"><span className="text">Link attivo</span></a>
+        <span className="metadata"><a href="#">metadata link</a></span>
+      </ListItem>
+    </List>
+  ),
+  args: {
+    avatar: <img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri" />
+  }
+};
+
+export const ListaTestoAzioniMultipleMetadata: Story = {
+  render: () => (
+    <List>
+      <ListItem >
+        <span className="text">Testo<em>Lorem ipsum dolor sit amet.</em></span>
+        <ListItem.MultipleAction>
+          <span className="metadata">metadata testo</span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem >
+        <span className="text">Testo 2<em>Lorem ipsum dolor sit amet.</em></span>
+        <ListItem.MultipleAction>
+          <span className="metadata"><a href="#">metadata link</a></span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem >
+        <a href="#"><span className="text">Link<em>Lorem ipsum dolor sit amet.</em></span></a>
+        <ListItem.MultipleAction>
+          <span className="metadata"><a href="#">metadata link</a></span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+      <ListItem active>
+        <a href="#"><span className="text">Link attivo<em>Lorem ipsum dolor sit amet.</em></span></a>
+        <ListItem.MultipleAction>
+          <span className="metadata">metadata testo</span>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+          <a href="#" aria-label="Testo - Azione ">
+            <Icon icon="it-code-circle" />
+          </a>
+        </ListItem.MultipleAction>
+      </ListItem>
+    </List>
+  ),
+  parameters: {
+    docs: {
+      /**
+       * Sostituisco nel sorgente MultipleAction con ListItem.MultipleAction
+       * altrimenti non si capisce da dove si importa
+       */
+      source: { transform: (code: string) => code.replaceAll('MultipleAction', 'ListItem.MultipleAction') },
+    },
+  },
+};
diff --git a/stories/Documentation/List.mdx b/stories/Documentation/List.mdx
new file mode 100644
index 000000000..2ab5e826d
--- /dev/null
+++ b/stories/Documentation/List.mdx
@@ -0,0 +1,75 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import { List, ListItem } from '../../src';
+import * as ListStories from '../Components/List.stories';
+
+<Meta of={ListStories} />
+
+# Liste
+
+#### La lista è un componente flessibile per la visualizzazione di liste con testo, link o elementi correlati.
+
+## Tipologie di lista
+
+Le liste, costituite da tag `<ul>` con classe `.it-list` all’interno di un wrapper con classe `.it-list-wrapper`, possono contenere testi, link, icone, avatar, immagini o una combinazione di questi elementi.
+
+### Lista semplice solo testo
+
+<Canvas of={ListStories.ListaSemplice} />
+
+### Lista con avatar
+
+L’elemento `.avatar` precede l’elemento `.it-right-zone` che contiene il testo.
+
+<Canvas of={ListStories.ListaAvatar} />
+
+### Lista con icona
+
+L’elemento `.it-rounded-icon` con all’interno la relativa icona, precede l’elemento `.it-right-zone` che contiene il testo.
+
+<Canvas of={ListStories.ListaIcona} />
+
+### Lista con immagine
+
+L’elemento `.it-thumb` con all’interno la relativa immagine, precede l’elemento `.it-right-zone` che contiene il testo.
+
+<Canvas of={ListStories.ListaImmagine} />
+
+## Lista con azioni
+
+Le liste con azioni hanno al loro interno icone o elementi interattivi da associare ad azioni specifiche decise in base alle esigenze.
+
+### Con freccia
+
+L’elemento `.icon` con all’interno la relativa icona segue l’elemento `.text` che contiene il testo.
+
+<Canvas of={ListStories.ListaFreccia} />
+
+### Con azioni multiple
+
+L’elemento `.it-multiple `con all’interno le relative icone, segue l’elemento `.text`.
+
+<Canvas of={ListStories.ListaAzioniMultiple} />
+
+## Altre variazioni
+
+### Con metadata
+
+Ad ogni lista si può aggiungere un campo testuale metadata, come nell’esempio seguente. L’elemento `.metadata`, segue l’elemento `.text`.
+
+<Canvas of={ListStories.ListaMetadata} />
+
+### Con testo aggiuntivo, azioni multiple e metadata
+
+Per il testo aggiuntivo, utilizzare il tag `<em>` all’interno dell’elemento `.text`.
+
+<Canvas of={ListStories.ListaTestoAzioniMultipleMetadata} />
+
+## Argomenti componente
+
+### List
+
+<ArgTypes of={List} />
+
+### ListItem
+
+<ArgTypes of={ListItem} />
diff --git a/test/List.test.tsx b/test/List.test.tsx
new file mode 100644
index 000000000..5f70a3907
--- /dev/null
+++ b/test/List.test.tsx
@@ -0,0 +1,249 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Icon, List, ListItem } from '../src';
+
+describe('List component', () => {
+  it('should work as container for children elements', () => {
+    render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    expect(screen.getByText('Testo')).not.toBe(null);
+  });
+
+  it('should append the passed className to the container', () => {
+    const { container } = render(
+      <List className='myclass'>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    expect(container.firstChild?.firstChild).toHaveClass('myclass');
+  });
+
+  it('should have the right class', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const ul = container.querySelector("ul"),
+      divInsideUl = ul?.querySelector("li div"),
+      divInsideDiv = divInsideUl?.querySelector("div");
+    if (ul && divInsideUl && divInsideUl) {
+
+      expect(container.firstChild).toHaveClass('it-list-wrapper');
+      expect(ul).toHaveClass('it-list');
+      expect(divInsideUl).toHaveClass('list-item');
+      expect(divInsideDiv).toHaveClass('it-right-zone');
+    }
+  });
+
+  it('should have avatar', () => {
+    const { container } = render(
+      <List>
+        <ListItem avatar={<img alt="Anna Barbieri" src="https://randomuser.me/api/portraits/women/41.jpg" />}>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const avatar = container.getElementsByClassName("list-item");
+    if (avatar) {
+      expect(avatar.length).toBe(1);
+      expect(avatar.item(0)?.querySelector("div")).toHaveClass('avatar size-lg');
+    }
+  });
+
+  it('should have icon', () => {
+    const { container } = render(
+      <List>
+        <ListItem icon={<Icon icon="it-folder" />}>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const icon = container.getElementsByClassName("list-item");
+    if (icon) {
+      expect(icon.length).toBe(1);
+      expect(icon.item(0)?.querySelector("div")).toHaveClass('it-rounded-icon');
+      expect(icon.item(0)?.querySelector("div")?.firstChild?.nodeName).toBe('svg');
+    }
+  });
+
+  it('should have image', () => {
+    const { container } = render(
+      <List>
+        <ListItem img={<img alt="descrizione immagine" src="https://placehold.jp/40x40.png" />}>
+          <span className="text">
+            Testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const image = container.getElementsByClassName("list-item");
+    if (image) {
+      expect(image.length).toBe(1);
+      expect(image.item(0)?.querySelector("div")).toHaveClass('it-thumb');
+      expect(image.item(0)?.querySelector("div")?.firstChild?.nodeName).toBe('IMG');
+    }
+  });
+
+  it('should have icon as arrow', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+          <Icon icon="it-chevron-right" />
+        </ListItem>
+      </List>
+    );
+
+    const element = container.getElementsByClassName("it-right-zone");
+    if (element) {
+      expect(element.item(0)?.querySelector("span")?.nodeName).toBe('SPAN');
+      expect(element.item(0)?.querySelector("svg")?.nodeName).toBe('svg');
+    }
+  });
+
+  it('should have multiple action', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+          </span>
+          <ListItem.MultipleAction>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+          </ListItem.MultipleAction>
+        </ListItem>
+      </List>
+    );
+
+    const element = container.getElementsByClassName("it-right-zone"),
+      action = element.item(0);
+    if (action) {
+      expect(action?.lastChild?.nodeName).toBe('SPAN');
+      expect(action?.lastChild).toHaveClass('it-multiple');
+      expect(action?.lastChild?.firstChild?.nodeName).toBe('A');
+    }
+  });
+
+  it('should have avatar and metadata', () => {
+    const { container } = render(
+      <List>
+        <ListItem avatar={<img alt="Anna Barbieri" src="https://randomuser.me/api/portraits/women/41.jpg" />}>
+          <span className="text">
+            Testo
+          </span>
+          <span className="metadata">
+            metadata testo
+          </span>
+        </ListItem>
+      </List>
+    );
+
+    const avatar = container.getElementsByClassName("list-item"),
+      metadata = container.getElementsByClassName("it-right-zone");
+    if (avatar) {
+      expect(avatar.length).toBe(1);
+      expect(avatar.item(0)?.querySelector("div")).toHaveClass('avatar size-lg');
+    }
+    if (metadata) {
+      expect(metadata.item(0)?.lastChild).toHaveClass("metadata");
+    }
+  });
+
+  it('should have text, multiple action and metadata', () => {
+    const { container } = render(
+      <List>
+        <ListItem>
+          <span className="text">
+            Testo
+            <em>
+              Lorem ipsum dolor sit amet.
+            </em>
+          </span>
+          <ListItem.MultipleAction>
+            <span className="metadata">
+              metadata testo
+            </span>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+            <a
+              aria-label="Testo - Azione "
+              href="#"
+            >
+              <Icon icon="it-code-circle" />
+            </a>
+          </ListItem.MultipleAction>
+        </ListItem>
+      </List>
+    );
+
+    const element = container.getElementsByClassName("it-right-zone"),
+      action = element.item(1);
+    if (element) {
+      expect(element.item(0)?.firstChild?.nodeName).toBe("SPAN");
+      expect(element.item(0)?.firstChild?.lastChild?.nodeName).toBe("EM");
+    }
+    if (action) {
+      expect(action.lastChild?.nodeName).toBe('SPAN');
+      expect(action.lastChild).toHaveClass('it-multiple');
+      expect(action.lastChild?.firstChild?.nodeName).toBe('SPAN');
+      expect(action.lastChild?.firstChild).toHaveClass('metadata');
+      expect(action.querySelector("s")?.nodeName).toBe('A');
+    }
+  });
+});
diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
index ae8fbd9dd..6c7b30a4f 100644
--- a/test/__snapshots__/Storybook.test.tsx.snap
+++ b/test/__snapshots__/Storybook.test.tsx.snap
@@ -33024,79 +33024,81 @@ exports[`Stories Snapshots Documentazione/Organizzare gli spazi/Griglie TuttiIBr
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _Esempi 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaAvatar 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 2
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
+        <div
           class="list-item"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo
+            </span>
+          </div>
+        </div>
       </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _StatoAttivo 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
       <li>
         <a
           class="list-item"
         >
-          <span>
-            Link list 1
-          </span>
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link
+            </span>
+          </div>
         </a>
       </li>
       <li>
         <a
           class="active list-item"
         >
-          <span>
-            Link list 2 active
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 3
-          </span>
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link attivo
+            </span>
+          </div>
         </a>
       </li>
     </ul>
@@ -33104,133 +33106,286 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _StatoAt
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste _StatoDisabilitato 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaAzioniMultiple 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="disabled list-item"
-        >
-          <span>
-            Link list 2 disabled
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
+        <div
           class="list-item"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste CollapseExample 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="icon-right large medium list-item"
-          role="button"
-        >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 1 
+            <span
+              class="text"
+            >
+              Testo
             </span>
-            <svg
-              aria-hidden="true"
-              class="icon right icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="it-multiple"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
-              />
-            </svg>
-          </span>
-        </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
-      <div
-        class="collapse"
-      >
-        <ul
-          class="link-sublist"
+      <li>
+        <div
+          class="list-item"
         >
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 4 
-              </span>
-            </a>
-          </li>
-          <li>
+          <div
+            class="it-right-zone"
+          >
             <a
-              class="list-item"
+              href="#"
             >
-              <span>
-                Link list 5 
+              <span
+                class="text"
+              >
+                Link
               </span>
             </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
+            <span
+              class="it-multiple"
             >
-              <span>
-                Link list 6 
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
       <li>
-        <a
-          class="icon-right large medium list-item"
-          role="button"
+        <div
+          class="active list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 2 
+            <a
+              href="#"
+            >
+              <span
+                class="text"
+              >
+                Link attivo
+              </span>
+            </a>
+            <span
+              class="it-multiple"
+            >
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaFreccia 1`] = `
+<div>
+  <div
+    class="it-list-wrapper"
+  >
+    <ul
+      class="it-list"
+    >
+      <li>
+        <div
+          class="list-item"
+        >
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo
             </span>
             <svg
-              aria-hidden="true"
-              class="icon right icon-primary"
+              class="icon"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -33241,61 +33396,26 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Collapse
                 icon
               </title>
               <path
-                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
               />
             </svg>
-          </span>
-        </a>
+          </div>
+        </div>
       </li>
-      <div
-        class="collapse"
-      >
-        <ul
-          class="link-sublist"
-        >
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 7 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 8 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 9 
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
       <li>
         <a
-          class="icon-right large medium list-item"
-          role="button"
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 3 
+            <span
+              class="text"
+            >
+              Link
             </span>
             <svg
-              aria-hidden="true"
-              class="icon right icon-primary"
+              class="icon"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -33306,103 +33426,155 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Collapse
                 icon
               </title>
               <path
-                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
               />
             </svg>
-          </span>
+          </div>
         </a>
       </li>
-      <div
-        class="collapse"
-      >
-        <ul
-          class="link-sublist"
+      <li>
+        <a
+          class="active list-item"
         >
-          <li>
-            <a
-              class="list-item"
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              <span>
-                Link list 10 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
+              Link attivo
+            </span>
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span>
-                Link list 11 
-              </span>
-            </a>
-          </li>
-          <li>
-            <a
-              class="list-item"
-            >
-              <span>
-                Link list 12 
-              </span>
-            </a>
-          </li>
-        </ul>
-      </div>
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </div>
+        </a>
+      </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConAvatar 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaIcona 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="active list-item"
+        <div
+          class="list-item"
         >
-          <img
-            alt="avataralt"
-            class="avatar lg-size"
-            src="http://via.placeholder.com/40x40"
-            title="avatartitle"
-          />
-          <span>
-            Link list 1 active 
-          </span>
-        </a>
+          <div
+            class="it-rounded-icon"
+          >
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm1 12c.1.5-.3.9-.8 1H4c-.5.1-.9-.3-1-.8V6c-.1-.5.3-.9.8-1h5.8l1.7 1.7.3.3H20c.5-.1.9.3 1 .8V18zM4 8h16v1H4V8z"
+              />
+            </svg>
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo
+            </span>
+          </div>
+        </div>
       </li>
       <li>
         <a
           class="list-item"
         >
-          <img
-            alt="avataralt"
-            class="avatar lg-size"
-            src="http://via.placeholder.com/40x40"
-            title="avatartitle"
-          />
-          <span>
-            Link list 2 
-          </span>
+          <div
+            class="it-rounded-icon"
+          >
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm1 12c.1.5-.3.9-.8 1H4c-.5.1-.9-.3-1-.8V6c-.1-.5.3-.9.8-1h5.8l1.7 1.7.3.3H20c.5-.1.9.3 1 .8V18zM4 8h16v1H4V8z"
+              />
+            </svg>
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link
+            </span>
+          </div>
         </a>
       </li>
       <li>
         <a
-          class="disabled list-item"
+          class="active list-item"
         >
-          <img
-            alt="avataralt"
-            class="avatar lg-size"
-            src="http://via.placeholder.com/40x40"
-            title="avatartitle"
-          />
-          <span>
-            Link list 3 disabled 
-          </span>
+          <div
+            class="it-rounded-icon"
+          >
+            <svg
+              class="icon"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm1 12c.1.5-.3.9-.8 1H4c-.5.1-.9-.3-1-.8V6c-.1-.5.3-.9.8-1h5.8l1.7 1.7.3.3H20c.5-.1.9.3 1 .8V18zM4 8h16v1H4V8z"
+              />
+            </svg>
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Link attivo
+            </span>
+          </div>
         </a>
       </li>
     </ul>
@@ -33410,640 +33582,798 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConAvata
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConCheckbox 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaImmagine 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
         <div
-          class="active list-item"
+          class="list-item"
         >
           <div
-            class="form-check-group form-check"
+            class="it-thumb"
           >
-            <input
-              aria-describedby="checkbox1Description"
-              checked=""
-              class="form-control"
-              id="checkbox1"
-              type="checkbox"
-              value=""
+            <img
+              alt="descrizione immagine"
+              src="https://placehold.jp/40x40.png"
             />
-            <label
-              class="form-check-label"
-              for="checkbox1"
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Checkbox selezionato
-            </label>
+              Testo
+            </span>
           </div>
         </div>
       </li>
       <li>
-        <div
-          class="active list-item"
+        <a
+          class="list-item"
         >
           <div
-            class="form-check-group form-check"
+            class="it-thumb"
           >
-            <input
-              aria-describedby="checkbox2Description"
-              class="form-control"
-              id="checkbox2"
-              type="checkbox"
-              value=""
+            <img
+              alt="descrizione immagine"
+              src="https://placehold.jp/40x40.png"
             />
-            <label
-              class="form-check-label"
-              for="checkbox2"
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Checkbox non selezionato
-            </label>
+              Link
+            </span>
           </div>
-        </div>
+        </a>
       </li>
       <li>
-        <div
-          class="disabled list-item"
+        <a
+          class="active list-item"
         >
           <div
-            class="form-check-group form-check"
+            class="it-thumb"
           >
-            <input
-              aria-describedby="checkbox3Description"
-              class="form-control"
-              disabled=""
-              id="checkbox3"
-              type="checkbox"
-              value=""
+            <img
+              alt="descrizione immagine"
+              src="https://placehold.jp/40x40.png"
             />
-            <label
-              class="form-check-label"
-              for="checkbox3"
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Checkbox disabilitato non selezionato
-            </label>
+              Link attivo
+            </span>
           </div>
-        </div>
+        </a>
       </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ConSwitch 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaMetadata 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
         <div
-          class="active list-item"
+          class="list-item"
         >
           <div
-            class="toggles"
+            class="avatar size-lg"
           >
-            <label
-              class="form-check-label"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              Label per toggle
-              <input
-                class="form-check-input"
-                type="checkbox"
-              />
-              <span
-                class="lever"
-              />
-            </label>
+              Testo
+            </span>
+            <span
+              class="metadata"
+            >
+              metadata testo
+            </span>
           </div>
         </div>
       </li>
       <li>
         <div
-          class="disabled list-item"
+          class="list-item"
         >
           <div
-            class="toggles"
+            class="avatar size-lg"
           >
-            <label
-              class="form-check-label"
-            >
-              Label per disabled toggle
-              <input
-                class="form-check-input"
-                disabled=""
-                type="checkbox"
-              />
-              <span
-                class="lever"
-              />
-            </label>
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
           </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ControlliComponent 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
+            >
+              Testo 2
+            </span>
+            <span
+              class="metadata"
+            >
+              <a
+                href="#"
+              >
+                metadata link
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
       <li>
-        <a
-          class="icon-left active list-item"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="avatar size-lg"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-            <span>
-              Link list 1 active
+              <span
+                class="text"
+              >
+                Link
+              </span>
+            </a>
+            <span
+              class="metadata"
+            >
+              metadata testo
             </span>
-          </span>
-        </a>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="icon-left list-item"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="avatar size-lg"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-            <span>
-              Link list 2
+              <span
+                class="text"
+              >
+                Link 2
+              </span>
+            </a>
+            <span
+              class="metadata"
+            >
+              <a
+                href="#"
+              >
+                metadata link
+              </a>
             </span>
-          </span>
-        </a>
+          </div>
+        </div>
       </li>
       <li>
         <a
-          class="icon-left disabled list-item"
+          class="active list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="avatar size-lg"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-            <span>
-              Link list 3 disabled
+              Link attivo
             </span>
-          </span>
+            <span
+              class="metadata"
+            >
+              metadata testo
+            </span>
+          </div>
         </a>
       </li>
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="avatar size-lg"
+          >
+            <img
+              alt="Anna Barbieri"
+              src="https://randomuser.me/api/portraits/women/41.jpg"
+            />
+          </div>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
+            >
+              <span
+                class="text"
+              >
+                Link attivo
+              </span>
+            </a>
+            <span
+              class="metadata"
+            >
+              <a
+                href="#"
+              >
+                metadata link
+              </a>
+            </span>
+          </div>
+        </div>
+      </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ControlliSecondariComponent 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaSemplice 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="icon-right active list-item"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 1 active
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
-        </a>
+              Testo
+            </span>
+          </div>
+        </div>
       </li>
       <li>
         <a
-          class="icon-right list-item"
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 2
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
+              Link
+            </span>
+          </div>
         </a>
       </li>
       <li>
         <a
-          class="icon-right disabled list-item"
+          class="active list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 3 disabled
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="text"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
-        </a>
+              Link attivo
+            </span>
+          </div>
+        </a>
       </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste EsempioMultiline 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste ListaTestoAzioniMultipleMetadata 1`] = `
 <div>
   <div
-    class="link-list-wrapper multiline"
+    class="it-list-wrapper"
   >
     <ul
-      class="link-list"
+      class="it-list"
     >
       <li>
-        <a
-          class="icon-right active list-item"
-          href="#"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 1 active
+            <span
+              class="text"
+            >
+              Testo
+              <em>
+                Lorem ipsum dolor sit amet.
+              </em>
             </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="it-multiple"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-          </span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-          </p>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
+              <span
+                class="metadata"
+              >
+                metadata testo
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="icon-right list-item"
-          href="#"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 2
+            <span
+              class="text"
+            >
+              Testo 2
+              <em>
+                Lorem ipsum dolor sit amet.
+              </em>
             </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="it-multiple"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-          </span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-          </p>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
+              <span
+                class="metadata"
+              >
+                <a
+                  href="#"
+                >
+                  metadata link
+                </a>
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="icon-right disabled list-item"
-          href="#"
+        <div
+          class="list-item"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="it-right-zone"
           >
-            <span>
-              Link list 3 disabled
-            </span>
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <a
+              href="#"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
-              />
-            </svg>
-          </span>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
-          </p>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste HeaderEDividerConLink 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <div
-      class="link-list-heading"
-    >
-      <a
-        href="#"
-      >
-        Intestazione con link
-      </a>
-    </div>
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 2
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
+              <span
+                class="text"
+              >
+                Link
+                <em>
+                  Lorem ipsum dolor sit amet.
+                </em>
+              </span>
+            </a>
+            <span
+              class="it-multiple"
+            >
+              <span
+                class="metadata"
+              >
+                <a
+                  href="#"
+                >
+                  metadata link
+                </a>
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
       <li>
-        <a
-          class="list-item"
+        <div
+          class="active list-item"
         >
-          <span>
-            Link list 4
-          </span>
-        </a>
+          <div
+            class="it-right-zone"
+          >
+            <a
+              href="#"
+            >
+              <span
+                class="text"
+              >
+                Link attivo
+                <em>
+                  Lorem ipsum dolor sit amet.
+                </em>
+              </span>
+            </a>
+            <span
+              class="it-multiple"
+            >
+              <span
+                class="metadata"
+              >
+                metadata testo
+              </span>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+              <a
+                aria-label="Testo - Azione "
+                href="#"
+              >
+                <svg
+                  class="icon"
+                  enable-background="new 0 0 24 24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>
+                    icon
+                  </title>
+                  <path
+                    d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                  />
+                </svg>
+              </a>
+            </span>
+          </div>
+        </div>
       </li>
     </ul>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste HeaderEDividerNoLink 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini ElementoSingolo 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="row"
   >
     <div
-      class="link-list-heading"
-    >
-      Intestazione senza link
-    </div>
-    <ul
-      class="link-list"
+      class="col-12 col-lg-4"
     >
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
+      <div
+        class="it-grid-item-wrapper"
+      >
         <a
-          class="list-item"
+          href="#"
         >
-          <span>
-            Link list 2
-          </span>
+          <div
+            class="img-responsive-wrapper"
+          >
+            <div
+              class="img-responsive"
+            >
+              <div
+                class="img-wrapper"
+              >
+                <img
+                  alt="Alternative Text"
+                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                  title="Image Title"
+                />
+              </div>
+            </div>
+          </div>
         </a>
-      </li>
-      <li>
+      </div>
+    </div>
+    <div
+      class="col-12 col-lg-4"
+    >
+      <div
+        class="it-grid-item-wrapper"
+      >
         <a
-          class="list-item"
+          href="#"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
-      </li>
-      <li>
-        <a
-          class="list-item"
-        >
-          <span>
-            Link list 4
-          </span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste NavigationComponentFixed 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="icon-right large medium list-item"
-        >
-          <span
-            class="list-item-title-icon-wrapper"
+          <div
+            class="img-responsive-wrapper"
           >
-            <span>
-              Link list 1 
-            </span>
-            <svg
-              class="icon right icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="icon-right large medium list-item"
-        >
+              <div
+                class="img-wrapper"
+              >
+                <img
+                  alt="Alternative Text"
+                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                  title="Image Title"
+                />
+              </div>
+            </div>
+          </div>
           <span
-            class="list-item-title-icon-wrapper"
+            class="it-griditem-text-wrapper"
           >
-            <span>
-              Link list 2 
+            <span
+              class="it-griditem-text"
+            >
+              Didascalia
             </span>
             <svg
-              class="icon right icon-primary"
+              class="icon icon-sm"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -34054,55 +34384,49 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Navigati
                 icon
               </title>
               <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
               />
             </svg>
           </span>
         </a>
-      </li>
-      <ul
-        class="link-sublist"
+      </div>
+    </div>
+    <div
+      class="col-12 col-lg-4"
+    >
+      <div
+        class="it-grid-item-wrapper it-grid-item-overlay"
       >
-        <li>
-          <a
-            class="list-item"
-          >
-            <span>
-              Link list 4 
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            class="list-item"
-          >
-            <span>
-              Link list 5 
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            class="list-item"
-          >
-            <span>
-              Link list 6 
-            </span>
-          </a>
-        </li>
-      </ul>
-      <li>
         <a
-          class="icon-right large medium list-item"
+          href="#"
         >
+          <div
+            class="img-responsive-wrapper"
+          >
+            <div
+              class="img-responsive"
+            >
+              <div
+                class="img-wrapper"
+              >
+                <img
+                  alt="Alternative Text"
+                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                  title="Image Title"
+                />
+              </div>
+            </div>
+          </div>
           <span
-            class="list-item-title-icon-wrapper"
+            class="it-griditem-text-wrapper"
           >
-            <span>
-              Link list 3 
+            <span
+              class="it-griditem-text"
+            >
+              Didascalia
             </span>
             <svg
-              class="icon right icon-primary"
+              class="icon icon-sm"
               enable-background="new 0 0 24 24"
               role="img"
               viewBox="0 0 24 24"
@@ -34113,647 +34437,371 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Navigati
                 icon
               </title>
               <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
               />
             </svg>
           </span>
         </a>
-      </li>
-    </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste PrimaryESecondaryAction 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini GrigliaStandard 1`] = `
 <div>
   <div
-    class="link-list-wrapper"
+    class="it-grid-list-wrapper"
   >
-    <ul
-      class="link-list"
+    <div
+      class="grid-row"
     >
-      <li>
-        <a
-          class="icon-left active list-item"
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <a
+            href="#"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive-wrapper"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-            <span>
-              Link list 1 active
-            </span>
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="icon-left list-item"
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <a
+            href="#"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive-wrapper"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-            <span>
-              Link list 2
-            </span>
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="icon-left disabled list-item"
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span
-            class="list-item-title-icon-wrapper"
+          <a
+            href="#"
           >
-            <svg
-              aria-hidden="true"
-              class="icon icon-primary"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="img-responsive-wrapper"
             >
-              <title>
-                icon
-              </title>
-              <path
-                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
-              />
-            </svg>
-            <span>
-              Link list 3 disabled
-            </span>
-          </span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste Sizing 1`] = `
-<div>
-  <div
-    class="link-list-wrapper"
-  >
-    <div
-      class="link-list-heading"
-    >
-      Intestazione senza link
-    </div>
-    <ul
-      class="link-list"
-    >
-      <li>
-        <a
-          class="large list-item"
-          href="#"
-        >
-          <span>
-            Link list 1
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="large list-item"
-          href="#"
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span>
-            Link list 2
-          </span>
-        </a>
-      </li>
-      <li>
-        <a
-          class="large list-item"
-          href="#"
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span>
-            Link list 3
-          </span>
-        </a>
-      </li>
-      <li>
-        <span
-          class="divider list-item"
-        />
-      </li>
-      <li>
-        <a
-          class="large list-item"
-          href="#"
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
         >
-          <span>
-            Link list 4
-          </span>
-        </a>
-      </li>
-    </ul>
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste TitoloLista 1`] = `
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Masonry 1`] = `
 <div>
   <div
-    class="sticky-wrapper navbar-wrapper"
+    class="it-grid-list-wrapper it-image-label-grid it-masonry"
   >
-    <nav
-      class="it-navscroll-wrapper it-top-navscroll navbar navbar-expand-lg"
+    <div
+      class="card-columns"
     >
       <div
-        class="container-fluid"
+        class="col-12"
       >
         <div
-          class="menu-wrapper"
+          class="it-grid-item-wrapper"
         >
-          <div
-            class="link-list-wrapper menu-link-list"
+          <a
+            href="#"
           >
-            <h3>
-              Indice della pagina
-            </h3>
-            <ul
-              class="link-list"
+            <div
+              class="img-responsive-wrapper"
             >
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#cos-e"
-                >
-                  <span>
-                    Cos'è
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
+              <div
+                class="img-responsive"
               >
-                <a
-                  class="nav-link"
-                  href="#luogo"
+                <div
+                  class="img-wrapper"
                 >
-                  <span>
-                    Luogo
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#date-e-orari"
-                >
-                  <span>
-                    Date e orari
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#costi"
-                >
-                  <span>
-                    Costi
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#documenti"
-                >
-                  <span>
-                    Documenti
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
-              >
-                <a
-                  class="nav-link"
-                  href="#contatti"
-                >
-                  <span>
-                    Contatti
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/400x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
               >
-                <a
-                  class="nav-link"
-                  href="#appuntamenti"
-                >
-                  <span>
-                    Appuntamenti
-                  </span>
-                </a>
-              </li>
-              <li
-                class="nav-item"
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <a
-                  class="nav-link"
-                  href="#ulteriori-informazioni"
-                >
-                  <span>
-                    Ulteriori informazioni
-                  </span>
-                </a>
-              </li>
-            </ul>
-          </div>
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
         </div>
       </div>
-    </nav>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini ElementoSingolo 1`] = `
-<div>
-  <div
-    class="row"
-  >
-    <div
-      class="col-12 col-lg-4"
-    >
       <div
-        class="it-grid-item-wrapper"
+        class="col-12"
       >
-        <a
-          href="#"
+        <div
+          class="it-grid-item-wrapper"
         >
-          <div
-            class="img-responsive-wrapper"
+          <a
+            href="#"
           >
             <div
-              class="img-responsive"
+              class="img-responsive-wrapper"
             >
               <div
-                class="img-wrapper"
+                class="img-responsive"
               >
-                <img
-                  alt="Alternative Text"
-                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                  title="Image Title"
-                />
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        </a>
-      </div>
-    </div>
-    <div
-      class="col-12 col-lg-4"
-    >
-      <div
-        class="it-grid-item-wrapper"
-      >
-        <a
-          href="#"
-        >
-          <div
-            class="img-responsive-wrapper"
-          >
-            <div
-              class="img-responsive"
+            <span
+              class="it-griditem-text-wrapper"
             >
-              <div
-                class="img-wrapper"
+              <span
+                class="it-griditem-text"
               >
-                <img
-                  alt="Alternative Text"
-                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                  title="Image Title"
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
                 />
-              </div>
-            </div>
-          </div>
-          <span
-            class="it-griditem-text-wrapper"
-          >
-            <span
-              class="it-griditem-text"
-            >
-              Didascalia
+              </svg>
             </span>
-            <svg
-              class="icon icon-sm"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                icon
-              </title>
-              <path
-                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-              />
-            </svg>
-          </span>
-        </a>
+          </a>
+        </div>
       </div>
-    </div>
-    <div
-      class="col-12 col-lg-4"
-    >
       <div
-        class="it-grid-item-wrapper it-grid-item-overlay"
+        class="col-12"
       >
-        <a
-          href="#"
+        <div
+          class="it-grid-item-wrapper"
         >
-          <div
-            class="img-responsive-wrapper"
+          <a
+            href="#"
           >
             <div
-              class="img-responsive"
+              class="img-responsive-wrapper"
             >
               <div
-                class="img-wrapper"
+                class="img-responsive"
               >
-                <img
-                  alt="Alternative Text"
-                  src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                  title="Image Title"
-                />
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/400x700/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
               </div>
             </div>
-          </div>
-          <span
-            class="it-griditem-text-wrapper"
-          >
             <span
-              class="it-griditem-text"
-            >
-              Didascalia
-            </span>
-            <svg
-              class="icon icon-sm"
-              enable-background="new 0 0 24 24"
-              role="img"
-              viewBox="0 0 24 24"
-              xml:space="preserve"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                icon
-              </title>
-              <path
-                d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-              />
-            </svg>
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini GrigliaStandard 1`] = `
-<div>
-  <div
-    class="it-grid-list-wrapper"
-  >
-    <div
-      class="grid-row"
-    >
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
+              class="it-griditem-text-wrapper"
             >
-              <div
-                class="img-responsive"
+              <span
+                class="it-griditem-text"
               >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
           </a>
         </div>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Masonry 1`] = `
-<div>
-  <div
-    class="it-grid-list-wrapper it-image-label-grid it-masonry"
-  >
-    <div
-      class="card-columns"
-    >
       <div
         class="col-12"
       >
@@ -34774,7 +34822,7 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
                 >
                   <img
                     alt="Alternative Text"
-                    src="https://via.placeholder.com/400x300/ebebeb/808080/?text=Immagine"
+                    src="https://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine"
                     title="Image Title"
                   />
                 </div>
@@ -34880,7 +34928,7 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
                 >
                   <img
                     alt="Alternative Text"
-                    src="https://via.placeholder.com/400x700/ebebeb/808080/?text=Immagine"
+                    src="https://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine"
                     title="Image Title"
                   />
                 </div>
@@ -35231,178 +35279,19 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
           </a>
         </div>
       </div>
-      <div
-        class="col-12"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/400x600/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-12"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/400x500/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-12"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
-              >
-                <div
-                  class="img-wrapper"
-                >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/400x400/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Proporzionale 1`] = `
-<div>
-  <div
-    class="it-grid-list-wrapper it-quilted-grid"
-  >
-    <div
-      class="grid-row"
-    >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immagini Proporzionale 1`] = `
+<div>
+  <div
+    class="it-grid-list-wrapper it-quilted-grid"
+  >
+    <div
+      class="grid-row"
+    >
       <div
         class="col-12 col-md-6"
       >
@@ -35797,165 +35686,1556 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag
         </div>
       </div>
       <div
-        class="col-6 col-lg-4"
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
+        >
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
+              >
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
+        >
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
+              >
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="col-6 col-lg-4"
+      >
+        <div
+          class="it-grid-item-wrapper"
+        >
+          <a
+            href="#"
+          >
+            <div
+              class="img-responsive-wrapper"
+            >
+              <div
+                class="img-responsive"
+              >
+                <div
+                  class="img-wrapper"
+                >
+                  <img
+                    alt="Alternative Text"
+                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
+                    title="Image Title"
+                  />
+                </div>
+              </div>
+            </div>
+            <span
+              class="it-griditem-text-wrapper"
+            >
+              <span
+                class="it-griditem-text"
+              >
+                Didascalia
+              </span>
+              <svg
+                class="icon icon-sm"
+                enable-background="new 0 0 24 24"
+                role="img"
+                viewBox="0 0 24 24"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>
+                  icon
+                </title>
+                <path
+                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
+                />
+              </svg>
+            </span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link _Esempi 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link _StatoAttivo 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="active list-item"
+        >
+          <span>
+            Link list 2 active
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link _StatoDisabilitato 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="disabled list-item"
+        >
+          <span>
+            Link list 2 disabled
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link CollapseExample 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right large medium list-item"
+          role="button"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <div
+        class="collapse"
+      >
+        <ul
+          class="link-sublist"
+        >
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 4 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 5 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 6 
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+          role="button"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2 
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <div
+        class="collapse"
+      >
+        <ul
+          class="link-sublist"
+        >
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 7 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 8 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 9 
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+          role="button"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="M11.6 15.4 6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <div
+        class="collapse"
+      >
+        <ul
+          class="link-sublist"
+        >
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 10 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 11 
+              </span>
+            </a>
+          </li>
+          <li>
+            <a
+              class="list-item"
+            >
+              <span>
+                Link list 12 
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ConAvatar 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="active list-item"
+        >
+          <img
+            alt="avataralt"
+            class="avatar lg-size"
+            src="http://via.placeholder.com/40x40"
+            title="avatartitle"
+          />
+          <span>
+            Link list 1 active 
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <img
+            alt="avataralt"
+            class="avatar lg-size"
+            src="http://via.placeholder.com/40x40"
+            title="avatartitle"
+          />
+          <span>
+            Link list 2 
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="disabled list-item"
+        >
+          <img
+            alt="avataralt"
+            class="avatar lg-size"
+            src="http://via.placeholder.com/40x40"
+            title="avatartitle"
+          />
+          <span>
+            Link list 3 disabled 
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ConCheckbox 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="form-check-group form-check"
+          >
+            <input
+              aria-describedby="checkbox1Description"
+              checked=""
+              class="form-control"
+              id="checkbox1"
+              type="checkbox"
+              value=""
+            />
+            <label
+              class="form-check-label"
+              for="checkbox1"
+            >
+              Checkbox selezionato
+            </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="form-check-group form-check"
+          >
+            <input
+              aria-describedby="checkbox2Description"
+              class="form-control"
+              id="checkbox2"
+              type="checkbox"
+              value=""
+            />
+            <label
+              class="form-check-label"
+              for="checkbox2"
+            >
+              Checkbox non selezionato
+            </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div
+          class="disabled list-item"
+        >
+          <div
+            class="form-check-group form-check"
+          >
+            <input
+              aria-describedby="checkbox3Description"
+              class="form-control"
+              disabled=""
+              id="checkbox3"
+              type="checkbox"
+              value=""
+            />
+            <label
+              class="form-check-label"
+              for="checkbox3"
+            >
+              Checkbox disabilitato non selezionato
+            </label>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ConSwitch 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <div
+          class="active list-item"
+        >
+          <div
+            class="toggles"
+          >
+            <label
+              class="form-check-label"
+            >
+              Label per toggle
+              <input
+                class="form-check-input"
+                type="checkbox"
+              />
+              <span
+                class="lever"
+              />
+            </label>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div
+          class="disabled list-item"
+        >
+          <div
+            class="toggles"
+          >
+            <label
+              class="form-check-label"
+            >
+              Label per disabled toggle
+              <input
+                class="form-check-input"
+                disabled=""
+                type="checkbox"
+              />
+              <span
+                class="lever"
+              />
+            </label>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ControlliComponent 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-left active list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+            <span>
+              Link list 1 active
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+            <span>
+              Link list 2
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left disabled list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+            <span>
+              Link list 3 disabled
+            </span>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link ControlliSecondariComponent 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right active list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 active
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-right list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-right disabled list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 disabled
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link EsempioMultiline 1`] = `
+<div>
+  <div
+    class="link-list-wrapper multiline"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right active list-item"
+          href="#"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 active
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+          </p>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="icon-right list-item"
+          href="#"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+          </p>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="icon-right disabled list-item"
+          href="#"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 disabled
+            </span>
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m9.8 17.2-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"
+              />
+            </svg>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit…
+          </p>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link HeaderEDividerConLink 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <div
+      class="link-list-heading"
+    >
+      <a
+        href="#"
+      >
+        Intestazione con link
+      </a>
+    </div>
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 4
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link HeaderEDividerNoLink 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <div
+      class="link-list-heading"
+    >
+      Intestazione senza link
+    </div>
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="list-item"
+        >
+          <span>
+            Link list 4
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link NavigationComponentFixed 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-right large medium list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 1 
+            </span>
+            <svg
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 2 
+            </span>
+            <svg
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+      <ul
+        class="link-sublist"
+      >
+        <li>
+          <a
+            class="list-item"
+          >
+            <span>
+              Link list 4 
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            class="list-item"
+          >
+            <span>
+              Link list 5 
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            class="list-item"
+          >
+            <span>
+              Link list 6 
+            </span>
+          </a>
+        </li>
+      </ul>
+      <li>
+        <a
+          class="icon-right large medium list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <span>
+              Link list 3 
+            </span>
+            <svg
+              class="icon right icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link PrimaryESecondaryAction 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="icon-left active list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+            <span>
+              Link list 1 active
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+            <span>
+              Link list 2
+            </span>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="icon-left disabled list-item"
+        >
+          <span
+            class="list-item-title-icon-wrapper"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon icon-primary"
+              enable-background="new 0 0 24 24"
+              role="img"
+              viewBox="0 0 24 24"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                icon
+              </title>
+              <path
+                d="m13.4 13.4-.7-.7c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.1L9.2 4.9C8 3.8 6.1 3.8 4.9 4.9 3.8 6.1 3.8 8 4.9 9.2L7.8 12l-.7.7-2.9-2.8c-1.5-1.6-1.5-4.1 0-5.7 1.6-1.5 4.1-1.5 5.7 0l3.5 3.6c.8.7 1.2 1.7 1.2 2.8 0 1.1-.4 2.1-1.2 2.8zm6.4 6.4c1.5-1.6 1.5-4.1 0-5.7l-2.9-2.8-.7.7 2.9 2.8c1.1 1.2 1.1 3.1 0 4.3-1.2 1.1-3.1 1.1-4.3 0l-3.5-3.6c-.6-.5-.9-1.3-.9-2.1s.3-1.6.9-2.1l-.7-.7c-.8.7-1.2 1.7-1.2 2.8 0 1.1.4 2.1 1.2 2.8l3.5 3.6c.7.7 1.8 1.1 2.8 1.1 1.1.1 2.1-.3 2.9-1.1z"
+              />
+            </svg>
+            <span>
+              Link list 3 disabled
+            </span>
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link Sizing 1`] = `
+<div>
+  <div
+    class="link-list-wrapper"
+  >
+    <div
+      class="link-list-heading"
+    >
+      Intestazione senza link
+    </div>
+    <ul
+      class="link-list"
+    >
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 1
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 2
+          </span>
+        </a>
+      </li>
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 3
+          </span>
+        </a>
+      </li>
+      <li>
+        <span
+          class="divider list-item"
+        />
+      </li>
+      <li>
+        <a
+          class="large list-item"
+          href="#"
+        >
+          <span>
+            Link list 4
+          </span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di link TitoloLista 1`] = `
+<div>
+  <div
+    class="sticky-wrapper navbar-wrapper"
+  >
+    <nav
+      class="it-navscroll-wrapper it-top-navscroll navbar navbar-expand-lg"
+    >
+      <div
+        class="container-fluid"
       >
         <div
-          class="it-grid-item-wrapper"
+          class="menu-wrapper"
         >
-          <a
-            href="#"
+          <div
+            class="link-list-wrapper menu-link-list"
           >
-            <div
-              class="img-responsive-wrapper"
+            <h3>
+              Indice della pagina
+            </h3>
+            <ul
+              class="link-list"
             >
-              <div
-                class="img-responsive"
+              <li
+                class="nav-item"
               >
-                <div
-                  class="img-wrapper"
+                <a
+                  class="nav-link"
+                  href="#cos-e"
                 >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
-              >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
+                  <span>
+                    Cos'è
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
+                <a
+                  class="nav-link"
+                  href="#luogo"
+                >
+                  <span>
+                    Luogo
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <div
-                  class="img-wrapper"
+                <a
+                  class="nav-link"
+                  href="#date-e-orari"
                 >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
+                  <span>
+                    Date e orari
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
+                <a
+                  class="nav-link"
+                  href="#costi"
+                >
+                  <span>
+                    Costi
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
-        </div>
-      </div>
-      <div
-        class="col-6 col-lg-4"
-      >
-        <div
-          class="it-grid-item-wrapper"
-        >
-          <a
-            href="#"
-          >
-            <div
-              class="img-responsive-wrapper"
-            >
-              <div
-                class="img-responsive"
+                <a
+                  class="nav-link"
+                  href="#documenti"
+                >
+                  <span>
+                    Documenti
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <div
-                  class="img-wrapper"
+                <a
+                  class="nav-link"
+                  href="#contatti"
                 >
-                  <img
-                    alt="Alternative Text"
-                    src="https://via.placeholder.com/660x300/ebebeb/808080/?text=Immagine"
-                    title="Image Title"
-                  />
-                </div>
-              </div>
-            </div>
-            <span
-              class="it-griditem-text-wrapper"
-            >
-              <span
-                class="it-griditem-text"
+                  <span>
+                    Contatti
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                Didascalia
-              </span>
-              <svg
-                class="icon icon-sm"
-                enable-background="new 0 0 24 24"
-                role="img"
-                viewBox="0 0 24 24"
-                xml:space="preserve"
-                xmlns="http://www.w3.org/2000/svg"
+                <a
+                  class="nav-link"
+                  href="#appuntamenti"
+                >
+                  <span>
+                    Appuntamenti
+                  </span>
+                </a>
+              </li>
+              <li
+                class="nav-item"
               >
-                <title>
-                  icon
-                </title>
-                <path
-                  d="m19 12-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8L19 12zM7.9 9.1 5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1-.7-.8zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3-3.8 9.3z"
-                />
-              </svg>
-            </span>
-          </a>
+                <a
+                  class="nav-link"
+                  href="#ulteriori-informazioni"
+                >
+                  <span>
+                    Ulteriori informazioni
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
+    </nav>
   </div>
 </div>
 `;