fix: hero updates for typography, spacing and content

Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
italia · Jan 14, 2025 · b1850b8 · b1850b8
1 parent da0ef0b
commit b1850b8
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 107 deletions.
diff --git a/docs/componenti/hero.md b/docs/componenti/hero.md
@@ -9,14 +9,16 @@ toc: true
 La hero è un componente leggero e flessibile che può facoltativamente estendere l'intera finestra per mostrare i messaggi in evidenza sul tuo sito.
 Di seguito una serie di esempi con la descrizione degli elementi e delle classi applicabili.
 
-Il componente Hero può contenere:
+Gli elementi da cui è composto sono:
 
-- Sub head
-- Heading (titolo)
+- Titolo occhiello
+- Titolo principale (heading)
 - Paragrafo
-- Call to action
+- Uno o più pulsanti (call to action)
 - Immagine di background
 
+Poiché il componente occupa in larghezza l'intera pagina, consulta la **[pagina di esempio]**({{ site.baseurl }}/docs/esempi/hero/){:target="\_blank"} per visualizzare tutte le varianti in un contesto reale.
+
 {% capture callout %}
 
 #### Accessibilità
@@ -25,11 +27,6 @@ Valutare attentamente l'opportunità di utilizzare più hero nella stessa pagina
 
 {% endcapture %}{% include callout.html content=callout type="accessibility" %}
 
-{% capture callout %}
-Il componente Hero è un componente full-width.
-Per la visualizzazione reale a schermo fate riferimento alla [pagina di esempio]({{ site.baseurl }}/docs/esempi/hero/){:target="\_blank"}.
-{% endcapture %}{% include callout.html content=callout type="info" %}
-
 ## Con immagine
 
 Il componente Hero è contenuto all'interno della section `.it-hero-wrapper` al quale si possono aggiungere classi che ne varieranno l'aspetto.
@@ -87,10 +84,10 @@ Nei casi in cui fossero presenti contenuti testuali utilizzare per il titolo il
     <div class="row">
         <div class="col-12">
           <div class="it-hero-text-wrapper bg-dark">
-              <span class="it-Categoria">Categoria</span>
-              <h1 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
+              <span class="it-category">Titolo occhiello</span>
+              <h1 class="no_toc">Titolo della sezione</h1>
               <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
-              <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Label CTA</a></div>
+              <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Azione primaria </a></div>
           </div>
         </div>
     </div>
@@ -110,10 +107,10 @@ aggiungere alla section `.it-hero-wrapper` la classe `.it-text-centered`.
       <div class="row">
          <div class="col-12">
             <div class="it-hero-text-wrapper bg-dark">
-               <span class="it-Categoria">Categoria</span>
-               <h2 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h2>
+               <span class="it-category">Titolo occhiello</span>
+               <h2 class="no_toc">Titolo della sezione</h2>
                <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
-               <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Label CTA</a></div>
+               <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Azione primaria</a></div>
             </div>
          </div>
       </div>
@@ -151,10 +148,10 @@ Verificare che l'immagine utilizzata assicuri sempre un adeguato contrasto rispe
     <div class="row">
         <div class="col-12">
           <div class="it-hero-text-wrapper bg-dark">
-              <span class="it-Categoria">Categoria</span>
-              <h2 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h2>
+              <span class="it-category">Titolo occhiello</span>
+              <h2 class="no_toc">Titolo della sezione</h2>
               <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
-              <div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Label CTA</a></div>
+              <div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Azione primaria</a></div>
           </div>
         </div>
     </div>
@@ -183,10 +180,10 @@ Per un div opaco di colore primario, aggiungere alla section `.it-hero-wrapper`
       <div class="row">
          <div class="col-12">
             <div class="it-hero-text-wrapper bg-dark">
-               <span class="it-Categoria">Categoria</span>
-               <h2 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h2>
+               <span class="it-category">Titolo occhiello</span>
+               <h2 class="no_toc">Titolo della sezione</h2>
                <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
-               <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Label CTA</a></div>
+               <div class="it-btn-container"><a class="btn btn-sm btn-outline-primary" href="#">Azione primaria</a></div>
             </div>
          </div>
       </div>
@@ -229,10 +226,10 @@ Aggiungere alla section `.it-hero-wrapper` la classe `.it-bottom-overlapping-con
       <div class="row">
          <div class="col-12">
             <div class="it-hero-text-wrapper bg-dark">
-               <span class="it-Categoria">Categoria</span>
-               <h2 class="no_toc">Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h2>
+               <span class="it-category">Titolo occhiello</span>
+               <h2 class="no_toc">Titolo della sezione</h2>
                <p class="d-none d-lg-block">Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
-               <div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Label CTA</a></div>
+               <div class="it-btn-container"><a class="btn btn-sm btn-secondary" href="#">Azione primaria</a></div>
             </div>
          </div>
       </div>

diff --git a/docs/esempi/hero/index.html b/docs/esempi/hero/index.html
@@ -5,7 +5,7 @@
 
 <div class="container">
   <div class="row">
-    <h2>Immagine hero</h2>
+    <h2>Hero solo immagine</h2>
   </div>
 </div>
 <div class="it-hero-wrapper">
@@ -23,7 +23,7 @@ <h2>Immagine hero</h2>
 <div class="container">
   <div class="row">
     <div class="col-12">
-      <h2>Immagine hero small size</h2>
+      <h2>Hero solo immagine - small size</h2>
     </div>
   </div>
 </div>
@@ -39,6 +39,34 @@ <h2>Immagine hero small size</h2>
   <!-- - texts-->
 </div>
 <br /><br />
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      <h2>Hero contenuti testuali - small size</h2>
+    </div>
+  </div>
+</div>
+<div class="it-hero-wrapper it-hero-small-size">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="it-hero-text-wrapper bg-dark">
+          <span class="it-category">Titolo occhiello</span>
+          <h1>Questo è il sito informativo di un ente pubblico italiano</h1>
+          <p>
+            Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl
+            nunc mi ipsum faucibus.
+          </p>
+          <div class="it-btn-container">
+            <a class="btn btn-sm btn-outline-primary" href="#">Azione primaria</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- - texts-->
+</div>
+<br /><br />
 <div class="container">
   <div class="row">
     <div class="col-12">
@@ -53,14 +81,14 @@ <h2>Hero con contenuti testuali</h2>
     <div class="row">
       <div class="col-12">
         <div class="it-hero-text-wrapper bg-dark">
-          <span class="it-category">Category</span>
-          <h1>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
-          <p class="d-none d-lg-block">
+          <span class="it-category">Titolo occhiello</span>
+          <h1>Questo è il sito informativo di un ente pubblico italiano</h1>
+          <p>
             Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl
             nunc mi ipsum faucibus.
           </p>
           <div class="it-btn-container">
-            <a class="btn btn-sm btn-outline-primary" href="#">Label button</a>
+            <a class="btn btn-sm btn-outline-primary" href="#">Azione primaria</a>
           </div>
         </div>
       </div>
@@ -82,14 +110,14 @@ <h2>Hero con contenuti testuali centrati</h2>
     <div class="row">
       <div class="col-12">
         <div class="it-hero-text-wrapper bg-dark">
-          <span class="it-category">Category</span>
-          <h1>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
+          <span class="it-category">Titolo occhiello</span>
+          <h1>Questo è il sito informativo di un ente pubblico italiano</h1>
           <p class="d-none d-lg-block">
             Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl
             nunc mi ipsum faucibus.
           </p>
           <div class="it-btn-container">
-            <a class="btn btn-sm btn-outline-primary" href="#">Label button</a>
+            <a class="btn btn-sm btn-outline-primary" href="#">Azione primaria</a>
           </div>
         </div>
       </div>
@@ -118,8 +146,8 @@ <h2>Hero con overlay scuro per testi</h2>
     <div class="row">
       <div class="col-12">
         <div class="it-hero-text-wrapper bg-dark">
-          <span class="it-category">Category</span>
-          <h1>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
+          <span class="it-category">Titolo occhiello</span>
+          <h1>Questo è il sito informativo di un ente pubblico italiano</h1>
           <p class="d-none d-lg-block">
             Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl
             nunc mi ipsum faucibus.
@@ -154,8 +182,8 @@ <h2>Hero con overlay primario per testi</h2>
     <div class="row">
       <div class="col-12">
         <div class="it-hero-text-wrapper bg-dark">
-          <span class="it-category">Category</span>
-          <h1>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
+          <span class="it-category">Titolo occhiello</span>
+          <h1>Questo è il sito informativo di un ente pubblico italiano</h1>
           <p class="d-none d-lg-block">
             Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl
             nunc mi ipsum faucibus.
@@ -209,8 +237,8 @@ <h2>Hero con margine negativo per contenuti sovrapposti</h2>
     <div class="row">
       <div class="col-12">
         <div class="it-hero-text-wrapper bg-dark">
-          <span class="it-category">Category</span>
-          <h1>Heading lorem ipsum dolor sit amet, consetetur sadipscing.</h1>
+          <span class="it-category">Titolo occhiello</span>
+          <h1>Questo è il sito informativo di un ente pubblico italiano</h1>
           <p class="d-none d-lg-block">
             Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl
             nunc mi ipsum faucibus.

diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
@@ -1923,25 +1923,25 @@ $dp-current-size: $v-gap * 4;
 
 //hero
 $hero-bg-color: $primary !default;
-$hero-height-desk: 620px;
-$hero-height-mob: 380px;
+$hero-height-desk: 400px;
+$hero-height-mob: 300px;
 $hero-height-sm-desk: 400px;
 $hero-height-sm-tab: 300px;
-$hero-height-sm-mob: 230px;
+$hero-height-sm-mob: 300px;
 $hero-text-padding: $v-gap * 3;
 $hero-text-color: $white !default;
 $hero-cat-size: 1rem;
-$hero-heading-size: 2rem;
-$hero-heding-size-desk: 2.6666666666666665rem;
+$hero-heading-size: 2.5rem;
+$hero-heding-size-desk: 3rem;
 $hero-p-size: 1rem;
 $hero-cat-spacing: $card-category-l-spacing !default;
 $hero-text-padding-desk: 120px;
-$hero-dark-bg: rgba($neutral-1-a10, 0.54) !default; // Missing in the UI kit
-$hero-primary-bg: rgba($primary, 0.85) !default;
-$hero-negative-margin: 80px;
-$hero-negative-margin-desk: 80px;
-$hero-negative-bottom-padding: 240px;
-$hero-negative-bottom-padding-mob: 136px;
+$hero-dark-bg: rgba($neutral-1-a10, 0.8) !default; // Missing in the UI kit
+$hero-primary-bg: rgba($primary, 0.8) !default;
+$hero-negative-margin: 2rem;
+$hero-negative-margin-desk: 3rem;
+$hero-negative-bottom-padding: 48px;
+$hero-negative-bottom-padding-mob: 96px;
 
 // Carousel
 $crs-margin-bottom: $v-gap * 3;