design-comuni-plone-theme 8.8.2 → 9.0.0

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoDocumenti.jsx

@@ -28,6 +28,7 @@ const DocumentoDocumenti = ({ content }) => {
         title={intl.formatMessage(messages.documenti)}
         id="elenco-documenti"
       />
+
       {richTextHasContent(content.formati_disponibili) && (
         <RichTextSection
           tag_id="formats"

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoUlterioriInformazioni.jsx

@@ -23,8 +23,9 @@ const DocumentoUlterioriInformazioni = ({ content }) => {
       richTextHasContent(content?.riferimenti_normativi),
     [content],
   );
+
   return (
-    <Metadata content={content} showSectionTitle={showSectionTitle}>
+    <Metadata content={content} showSectionTitle={showSectionTitle} title="">
       {richTextHasContent(content?.ulteriori_informazioni) && (
         <HelpBox text={content?.ulteriori_informazioni} />
       )}
@@ -32,7 +33,9 @@ const DocumentoUlterioriInformazioni = ({ content }) => {
       {/* RIFERIMENTI NORMATIVI */}
       {richTextHasContent(content?.riferimenti_normativi) && (
         <div className="mt-2">
-          <h5>{intl.formatMessage(messages.riferimenti_normativi)}</h5>
+          <h3 className="h5 mb-3">
+            {intl.formatMessage(messages.riferimenti_normativi)}
+          </h3>
           <RichText serif={false} data={content.riferimenti_normativi} />
         </div>
       )}

package/src/components/ItaliaTheme/View/DocumentoView/DocumentoView.jsx

@@ -72,7 +72,7 @@ const DocumentoView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
@@ -81,7 +81,7 @@ const DocumentoView = ({ content, location }) => {
           <section
             ref={documentBody}
             id="main-content-section"
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/EventoView/EventoContatti.jsx

@@ -34,22 +34,8 @@ const messages = defineMessages({
   },
 });
 
-const EventoDocumenti = ({ content }) => {
+const EventoContatti = ({ content }) => {
   const intl = useIntl();
-  const getSupportatoDa = () => {
-    return (
-      content?.supportato_da?.length > 0 && (
-        <>
-          <h5 className="mt-4 supported-by">
-            {intl.formatMessage(messages.supported_by)}
-          </h5>
-          {content?.supportato_da?.map((item) => (
-            <OfficeCard key={item['@id']} office={item} icon={'it-pa'} />
-          ))}
-        </>
-      )
-    );
-  };
 
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.organizzato_da_interno.length > 0 ||
@@ -62,7 +48,6 @@ const EventoDocumenti = ({ content }) => {
       {content.contact_info.map((contact) => (
         <ContactsCard contact={contact} key={contact['@id']} />
       ))}
-
       {/* ---organizzato da esterno */}
       {richTextHasContent(content?.organizzato_da_esterno) ||
       content?.telefono ||
@@ -74,9 +59,8 @@ const EventoDocumenti = ({ content }) => {
             noWrapper={true}
             tag="div"
           >
-            <CardTitle tag="h5">
-              <Icon icon="it-telephone" padding={true} />
-            </CardTitle>
+            <Icon icon="it-telephone" />
+
             <CardBody tag="div" className={'card-body pe-3'}>
               <RichText data={content.organizzato_da_esterno} />
               {content?.telefono && (
@@ -104,11 +88,10 @@ const EventoDocumenti = ({ content }) => {
           </Card>
         </div>
       ) : null}
-
       {/* ---contatti interno */}
       {content?.organizzato_da_interno?.length > 0 && (
         <div className="mb-5">
-          <h5>{intl.formatMessage(messages.organizzato_da)}</h5>
+          <h3 className="h5">{intl.formatMessage(messages.organizzato_da)}</h3>
           {content?.organizzato_da_interno?.map((item, index) => (
             <OfficeCard
               margin_bottom={
@@ -127,15 +110,23 @@ const EventoDocumenti = ({ content }) => {
           ))}
         </div>
       )}
-
       {/* ---supportato da */}
-      {getSupportatoDa()}
+      {content?.supportato_da?.length > 0 && (
+        <div className="mb-5">
+          <h3 className="mt-4 supported-by h5">
+            {intl.formatMessage(messages.supported_by)}
+          </h3>
+          {content?.supportato_da?.map((item) => (
+            <OfficeCard key={item['@id']} office={item} icon={'it-pa'} />
+          ))}
+        </div>
+      )}
     </RichTextSection>
   ) : null;
 };
 
-EventoDocumenti.propTypes = {
+EventoContatti.propTypes = {
   content: PropTypes.object.isRequired,
 };
 
-export default EventoDocumenti;
+export default EventoContatti;

package/src/components/ItaliaTheme/View/EventoView/EventoCosE.jsx

@@ -50,9 +50,9 @@ const EventoCosE = ({ content }) => {
     >
       {content?.persone_amministrazione?.length > 0 && (
         <>
-          <h5 className="parteciperanno-section">
+          <h3 className="parteciperanno-section h5">
             {intl.formatMessage(messages.parteciperanno)}
-          </h5>
+          </h3>
           {content?.persone_amministrazione?.map((item, i) => (
             <UniversalLink
               href={flattenToAppURL(item['@id'])}
@@ -83,7 +83,6 @@ const EventoCosE = ({ content }) => {
       {richTextHasContent(content?.descrizione_destinatari) && (
         <div className="mb-5 pt-2">
           <RichText
-            title_size="h5"
             title={intl.formatMessage(messages.a_chi_rivolto)}
             data={content?.descrizione_destinatari}
           />

package/src/components/ItaliaTheme/View/EventoView/EventoSponsors.jsx

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types';
 import { Sponsors } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const EventoSponsors = ({ content }) => (
-  <Sponsors content={content} folder_name={'sponsor_evento'} />
+  <section id="sponsors" className="it-page-section mb-5">
+    <Sponsors content={content} folder_name={'sponsor_evento'} />
+  </section>
 );
 
 EventoSponsors.propTypes = {

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -45,7 +45,7 @@ const EventoUlterioriInformazioni = ({ content }) => {
       )}
       {content?.event_url && (
         <div className="mt-4">
-          <h5>{intl.formatMessage(messages.event_url)}</h5>
+          <h3 className="h5">{intl.formatMessage(messages.event_url)}</h3>
           <UniversalLink href={content.event_url}>
             {content.event_url}
           </UniversalLink>
@@ -56,7 +56,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           {richTextHasContent(content?.patrocinato_da) && (
             <div className="mb-5">
               <RichText
-                title_size="h5"
                 title={intl.formatMessage(messages.patrocinato_da)}
                 data={content?.patrocinato_da}
               />
@@ -66,7 +65,9 @@ const EventoUlterioriInformazioni = ({ content }) => {
       )}
       {content?.strutture_politiche?.length > 0 && (
         <div className="mt-4">
-          <h5>{intl.formatMessage(messages.strutture_politiche)}</h5>
+          <h3 className="h5">
+            {intl.formatMessage(messages.strutture_politiche)}
+          </h3>
           <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
             {content?.strutture_politiche?.map((item, i) => (
               <GenericCard

package/src/components/ItaliaTheme/View/EventoView/EventoView.jsx

@@ -78,7 +78,7 @@ const EventoView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
@@ -87,7 +87,7 @@ const EventoView = ({ content, location }) => {
           <section
             ref={documentBody}
             id="main-content-section"
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/IncaricoView/IncaricoPersone.jsx

@@ -3,6 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Chip, ChipLabel } from 'design-react-kit';
+import { RichTextSection } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const messages = defineMessages({
   persona: {
@@ -15,10 +16,10 @@ const IncaricoPersone = ({ content }) => {
   const intl = useIntl();
 
   return content?.persona?.length > 0 ? (
-    <section id="persone-struttura" className="it-page-section mb-5">
-      <h2 id="header-persone-struttura">
-        {intl.formatMessage(messages.persona)}
-      </h2>
+    <RichTextSection
+      tag_id="persone-struttura"
+      title={intl.formatMessage(messages.persona)}
+    >
       <div className="ruolo-persone-struttura">
         {content?.persona?.map((person, _i) => (
           <Link
@@ -39,7 +40,7 @@ const IncaricoPersone = ({ content }) => {
           </Link>
         ))}
       </div>
-    </section>
+    </RichTextSection>
   ) : null;
 };
 

package/src/components/ItaliaTheme/View/IncaricoView/IncaricoView.jsx

@@ -82,7 +82,7 @@ const IncaricoView = (props) => {
         showtassonomiaargomenti={false}
       />
       <section
-        className="col-lg-12 it-page-sections-container my-4 py-4"
+        className="col-lg-12 it-page-sections-container border-light my-4 py-4"
         id="main-content-section"
       >
         {content.tipologia_incarico && (

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemView.jsx

@@ -84,12 +84,12 @@ const NewsItemView = ({ content, location }) => {
 
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
           >

package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx

@@ -92,12 +92,12 @@ const PaginaArgomentoViewNoBlocks = ({ content }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
           >

package/src/components/ItaliaTheme/View/PersonaView/PersonaRuolo.jsx

@@ -296,7 +296,6 @@ const PersonaRuolo = ({ content }) => {
           content={content}
           folder_name="foto-e-attivita-politica"
           title={intl.formatMessage(messages.foto_attivita_politica)}
-          title_type="h3"
         />
       )}
 

package/src/components/ItaliaTheme/View/PersonaView/PersonaView.jsx

@@ -58,12 +58,12 @@ const PersonaView = ({ content }) => {
           showdates={false}
           showtassonomiaargomenti={true}
         />
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
           >

package/src/components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView.jsx

@@ -14,7 +14,7 @@ import {
   PuntoDiContattoPlaceholderAfterRelatedItems,
   RelatedItems,
   IncaricoPersone,
-  RichTextArticle,
+  RichTextSection,
   RelatedItemsChipsPDC,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { renderPDCItemValue } from 'design-comuni-plone-theme/helpers';
@@ -88,51 +88,53 @@ const PuntoDiContattoView = (props) => {
   const { content } = props;
   const intl = useIntl();
   return (
-    <div className="container px-4 my-4 punto-di-contatto-view">
-      <SkipToMainContent />
-      <PageHeader
-        content={{ ...content, stato_servizio: null }}
-        showreadingtime={false}
-        showdates={false}
-        showtassonomiaargomenti={false}
-      />
-      <section
-        className="col-lg-12 it-page-sections-container my-4 py-4"
-        id="main-content-section"
-      >
-        {/* TODO: add tipologia when present */}
-        <RichTextArticle
-          tag_id="contatti"
-          title={intl.formatMessage(messages.contatti)}
-        >
-          {content?.value_punto_contatto?.map((pdc, i) => {
-            return (
-              <div className="my-2" key={i}>
-                <h6>
-                  {messages[pdc?.pdc_type] === undefined
-                    ? pdc?.pdc_type
-                    : intl.formatMessage(messages.label, {
-                        value: intl.formatMessage(messages[pdc?.pdc_type]),
-                      })}
-                  <span className="ml-1">{renderPDCItemValue(pdc)}</span>
-                </h6>
-              </div>
-            );
-          })}
-        </RichTextArticle>
-        <IncaricoPersone content={content} />
-        <RelatedItemsChipsPDC
-          content={content}
-          fieldLists={[
-            'strutture_correlate',
-            'servizi_correlati',
-            'eventi_correlati',
-            'luoghi_correlati',
-            'persone_correlate',
-          ]}
+    <div className="punto-di-contatto-view">
+      <div className="container px-4 my-4">
+        <SkipToMainContent />
+        <PageHeader
+          content={{ ...content, stato_servizio: null }}
+          showreadingtime={false}
+          showdates={false}
+          showtassonomiaargomenti={false}
         />
-      </section>
-      <PuntoDiContattoPlaceholderAfterContent content={content} />
+        <section
+          className="col-lg-12 it-page-sections-container border-light my-4 py-4"
+          id="main-content-section"
+        >
+          {/* TODO: add tipologia when present */}
+          <RichTextSection
+            tag_id="contatti"
+            title={intl.formatMessage(messages.contatti)}
+          >
+            {content?.value_punto_contatto?.map((pdc, i) => {
+              return (
+                <div className="my-2" key={i}>
+                  <h5 className="h6">
+                    {messages[pdc?.pdc_type] === undefined
+                      ? pdc?.pdc_type
+                      : intl.formatMessage(messages.label, {
+                          value: intl.formatMessage(messages[pdc?.pdc_type]),
+                        })}
+                    <span className="ml-1">{renderPDCItemValue(pdc)}</span>
+                  </h5>
+                </div>
+              );
+            })}
+          </RichTextSection>
+          <IncaricoPersone content={content} />
+          <RelatedItemsChipsPDC
+            content={content}
+            fieldLists={[
+              'strutture_correlate',
+              'servizi_correlati',
+              'eventi_correlati',
+              'luoghi_correlati',
+              'persone_correlate',
+            ]}
+          />
+        </section>
+        <PuntoDiContattoPlaceholderAfterContent content={content} />
+      </div>
       <RelatedItems list={content?.relatedItems} />
       <PuntoDiContattoPlaceholderAfterRelatedItems content={content} />
     </div>

package/src/components/ItaliaTheme/View/ServizioView/ServizioAChiSiRivolge.jsx

@@ -37,14 +37,18 @@ const ServizioAChiSiRivolge = ({ content }) => {
       {richTextHasContent(content.chi_puo_presentare) && (
         <RichText
           title={intl.formatMessage(messages.chi_puo_presentare)}
-          title_size="h4"
+          title_size="h3"
+          title_class_name="h5"
+          add_class="mb-5"
           data={content.chi_puo_presentare}
         />
       )}
       {richTextHasContent(content.copertura_geografica) && (
         <RichText
           title={intl.formatMessage(messages.copertura_geografica)}
-          title_size="h4"
+          title_size="h3"
+          title_class_name="h5"
+          add_class="mb-5"
           data={content.copertura_geografica}
         />
       )}

package/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx

@@ -40,12 +40,14 @@ const ServizioAccedi = ({ content }) => {
           )}
           <RichText data={content.prenota_appuntamento} content={content} />
           {content.canale_fisico?.map?.((canale) => (
-            <OfficeCard
-              key={canale['@id']}
-              office={canale}
-              load_data={false}
-              data-element="service-generic-access"
-            />
+            <div className="mt-3">
+              <OfficeCard
+                key={canale['@id']}
+                office={canale}
+                load_data={false}
+                data-element="service-generic-access"
+              />
+            </div>
           ))}
         </RichTextSection>
       )}

package/src/components/ItaliaTheme/View/ServizioView/ServizioCostiVincoli.jsx

@@ -44,7 +44,8 @@ const ServizioCostiVincoli = ({ content }) => {
               ? intl.formatMessage(messages.vincoli)
               : null
           }
-          title_size="h4"
+          title_size="h3"
+          title_class_name="h5"
           add_class="mb-5"
           data={content.vincoli}
         />

package/src/components/ItaliaTheme/View/ServizioView/ServizioSitiEsterni.jsx

@@ -28,7 +28,7 @@ const ServizioSitiEsterni = ({ content }) => {
         tag="div"
       >
         <CardBody tag="div">
-          <RichText add_class="p-4 pt-0" data={content.link_siti_esterni} />
+          <RichText add_class="p-4 py-0" data={content.link_siti_esterni} />
         </CardBody>
       </Card>
     </RichTextSection>

package/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx

@@ -132,13 +132,13 @@ const ServizioView = ({ content, moment }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
 
-        <div className="row row-column-border row-column-menu-left">
+        <div className="row row-column-border border-light row-column-menu-left">
           <aside className="col-lg-4 ">
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             id="main-content-section"
-            className="col-lg-8 it-page-sections-container"
+            className="col-lg-8 it-page-sections-container border-light"
             ref={documentBody}
           >
             {/* SEZIONI */}

package/src/components/ItaliaTheme/View/UOView/UOContacts.jsx

@@ -34,7 +34,7 @@ const UOContacts = ({ content }) => {
         content?.zip_code?.length > 0 ||
         richTextHasContent(content?.orario_pubblico) ||
         content?.contact_info?.length > 0) && (
-        <section id="contatti" className="it-page-section anchor-offset mt-5">
+        <section id="contatti" className="it-page-section anchor-offset mb-5">
           <h2 id="header-contatti" className="mb-3 h4">
             {intl.formatMessage(messages.contatti)}
           </h2>
@@ -43,13 +43,15 @@ const UOContacts = ({ content }) => {
           <UOContactsLocations content={content} />
 
           {richTextHasContent(content.contact_info) && (
-            <div className="mb-5 mt-3">
+            <div className="mb-5">
               <RichText data={content.contact_info} />
             </div>
           )}
           {richTextHasContent(content.orario_pubblico) && (
-            <div className="mb-5 mt-3">
-              <h5>{intl.formatMessage(messages.orario_pubblico)}</h5>
+            <div className="mb-5">
+              <h3 className="h5">
+                {intl.formatMessage(messages.orario_pubblico)}
+              </h3>
               <RichText data={content.orario_pubblico} />
             </div>
           )}

package/src/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsContacts.jsx

@@ -4,10 +4,13 @@ import { ContactsCard } from 'design-comuni-plone-theme/components/ItaliaTheme/V
 
 const UOContactsContacts = ({ content }) => {
   return (
-    content?.contact_info?.length > 0 &&
-    content.contact_info.map((contact) => (
-      <ContactsCard contact={contact} key={contact['@id']} />
-    ))
+    content?.contact_info?.length > 0 && (
+      <div className="mb-5">
+        {content.contact_info.map((contact) => (
+          <ContactsCard contact={contact} key={contact['@id']} />
+        ))}
+      </div>
+    )
   );
 };
 export default UOContactsContacts;

package/src/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsLocations.jsx

@@ -12,7 +12,7 @@ const UOContactsLocations = ({ content }) => {
     content?.zip_code?.length > 0 ||
     content?.quartiere?.length > 0 ||
     content?.circoscrizione?.length > 0 ? (
-    <div className="mb-5 mt-3">
+    <div className="mb-5">
       <Locations
         content={content}
         locations={content.sede ?? []}

package/src/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsSediSecondarie.jsx

@@ -13,11 +13,16 @@ const UOContactsSediSecondarie = ({ content }) => {
   const intl = useIntl();
 
   return content.sedi_secondarie?.length > 0 ? (
-    <div className="mb-5 mt-5">
-      <h5>{intl.formatMessage(messages.altre_sedi)}</h5>
+    <div className="mb-5">
+      <h3 className="h5">{intl.formatMessage(messages.altre_sedi)}</h3>
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
         {content.sedi_secondarie.map((item, _i) => (
-          <GenericCard key={item['@id']} item={item} showimage={false} />
+          <GenericCard
+            key={item['@id']}
+            item={item}
+            showimage={false}
+            className="my-3"
+          />
         ))}
       </div>
     </div>

package/src/components/ItaliaTheme/View/UOView/UODocuments.jsx

@@ -21,11 +21,8 @@ const UODocuments = ({ content }) => {
     <>
       {(contentFolderHasItems(content, 'allegati') ||
         content.documenti_pubblici?.length > 0) && (
-        <section
-          id="allegati"
-          className="it-page-section anchor-offset mt-5 mb-5"
-        >
-          <h2 className="h4" id="header-allegati">
+        <section id="allegati" className="it-page-section anchor-offset mb-5">
+          <h2 className="mb-3 h4" id="header-allegati">
             {intl.formatMessage(messages.documenti)}
           </h2>
           <Attachments
@@ -33,6 +30,7 @@ const UODocuments = ({ content }) => {
             folder_name={'allegati'}
             as_section={false}
           />
+
           <Row className="card-wrapper card-teaser-wrapper documenti-pubblici">
             {content?.documenti_pubblici?.map((dp, i) => (
               <Attachment {...dp} download_url={dp?.['@id']} key={dp['@id']} />

package/src/components/ItaliaTheme/View/UOView/UOPeople.jsx

@@ -20,23 +20,23 @@ const UOPeople = ({ content }) => {
   return content?.persone_struttura?.length > 0 ? (
     <section
       id="persone-struttura"
-      className="it-page-section anchor-offset mt-5"
+      className="it-page-section anchor-offset mb-5 "
     >
-      <h2 className="h4" id="header-persone-struttura">
+      <h2 className="mb-3 h4" id="header-persone-struttura">
         {intl.formatMessage(messages.persone_struttura)}
       </h2>
-      <p className="mt-4">
-        {intl.formatMessage(messages.persone_p_description)}:
-      </p>
+      <p>{intl.formatMessage(messages.persone_p_description)}:</p>
+
       <Row className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal ruolo-persone-struttura">
         {content?.persone_struttura?.map((p, _i) => {
           return (
-            <Col xs="12" lg="12" xl="6" md="12" key={p['@id']}>
+            <Col xs="12" lg="12" xl="6" md="12" className="mb-3" key={p['@id']}>
               <CardPersona
                 item={p}
                 className={'shadow-sm'}
                 showImage={true}
-                titleTagName={'h5'}
+                titleTagName="h3"
+                titleClassName="h5"
               />
             </Col>
           );