From b1850b832c1f985ca0d6902d02f03f5ae699fcbc Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 14 Jan 2025 22:16:52 +0100 Subject: [PATCH] fix: hero updates for typography, spacing and content Co-authored-by: Andrea Stagi --- docs/componenti/hero.md | 45 +++++++++---------- docs/esempi/hero/index.html | 58 +++++++++++++++++------- src/scss/base/_variables.scss | 22 +++++----- src/scss/components/_hero.scss | 80 ++++++++++------------------------ 4 files changed, 98 insertions(+), 107 deletions(-) diff --git a/docs/componenti/hero.md b/docs/componenti/hero.md index 0f6343ac81..419f5df604 100755 --- 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
- Categoria -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Titolo della sezione

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.

-
Label CTA
+
Azione primaria
@@ -110,10 +107,10 @@ aggiungere alla section `.it-hero-wrapper` la classe `.it-text-centered`.
- Categoria -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Titolo della sezione

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.

-
Label CTA
+
Azione primaria
@@ -151,10 +148,10 @@ Verificare che l'immagine utilizzata assicuri sempre un adeguato contrasto rispe
- Categoria -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Titolo della sezione

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.

-
Label CTA
+
Azione primaria
@@ -183,10 +180,10 @@ Per un div opaco di colore primario, aggiungere alla section `.it-hero-wrapper`
- Categoria -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Titolo della sezione

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.

-
Label CTA
+
Azione primaria
@@ -229,10 +226,10 @@ Aggiungere alla section `.it-hero-wrapper` la classe `.it-bottom-overlapping-con
- Categoria -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Titolo della sezione

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.

-
Label CTA
+
Azione primaria
diff --git a/docs/esempi/hero/index.html b/docs/esempi/hero/index.html index 7af2d85eda..8051e7964d 100644 --- a/docs/esempi/hero/index.html +++ b/docs/esempi/hero/index.html @@ -5,7 +5,7 @@
-

Immagine hero

+

Hero solo immagine

@@ -23,7 +23,7 @@

Immagine hero

-

Immagine hero small size

+

Hero solo immagine - small size

@@ -39,6 +39,34 @@

Immagine hero small size



+
+
+
+

Hero contenuti testuali - small size

+
+
+
+
+
+
+
+
+ Titolo occhiello +

Questo è il sito informativo di un ente pubblico italiano

+

+ 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. +

+
+ Azione primaria +
+
+
+
+
+ +
+

@@ -53,14 +81,14 @@

Hero con contenuti testuali

- Category -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

-

+ Titolo occhiello +

Questo è il sito informativo di un ente pubblico italiano

+

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.

- Label button + Azione primaria
@@ -82,14 +110,14 @@

Hero con contenuti testuali centrati

- Category -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Questo è il sito informativo di un ente pubblico italiano

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.

- Label button + Azione primaria
@@ -118,8 +146,8 @@

Hero con overlay scuro per testi

- Category -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Questo è il sito informativo di un ente pubblico italiano

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 @@

Hero con overlay primario per testi

- Category -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Questo è il sito informativo di un ente pubblico italiano

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 @@

Hero con margine negativo per contenuti sovrapposti

- Category -

Heading lorem ipsum dolor sit amet, consetetur sadipscing.

+ Titolo occhiello +

Questo è il sito informativo di un ente pubblico italiano

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 index 0725da7fdf..5e88c41c7c 100644 --- 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; diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss index 8fa4526d28..706dad2e3b 100644 --- a/src/scss/components/_hero.scss +++ b/src/scss/components/_hero.scss @@ -5,7 +5,7 @@ background-color: $hero-bg-color; display: flex; align-items: flex-end; - // img ------------------------------------------- + // Img ------------------------------------------- .img-responsive-wrapper { position: absolute; width: 100%; @@ -23,12 +23,10 @@ } // Text container ---------------------------- .it-hero-text-wrapper { - padding: $hero-text-padding * 2 $hero-text-padding + ($v-gap * 2)-6; + padding: 3rem 0.75rem; background: transparent !important; position: relative; - :last-child { - margin-bottom: 0; - } + span, h1, h2, @@ -40,30 +38,33 @@ color: $hero-text-color; margin-bottom: $v-gap * 3; } - span.it-category { + .it-category { display: block; font-size: $hero-cat-size; text-transform: uppercase; font-weight: 600; - letter-spacing: $hero-cat-spacing; + margin-bottom: $v-gap; } h1 { font-size: $hero-heading-size; - letter-spacing: unset; } p { font-size: $hero-p-size; font-family: $font-family-serif; } .it-btn-container { - margin-top: $v-gap; + margin-top: 1.5rem; } } + // Small size container ---------------------------- + &.it-hero-small-size .it-hero-text-wrapper { + padding-top: 1.5rem; + padding-bottom: 1.5rem; + } // Text container centered---------------------------- - &.it-text-centered { - .it-hero-text-wrapper { - text-align: center; - } + &.it-text-centered .it-hero-text-wrapper { + margin: 0 auto; + text-align: center; } // overlay color-------------------------------------- &.it-overlay { @@ -193,20 +194,10 @@ &.it-hero-small-size { min-height: $hero-height-sm-tab; } - // Text container ---------------------------- - .it-hero-text-wrapper { - padding: $v-gap * 6 40% $v-gap * 6 ($v-gap * 5)-6; - } - // Text container centered---------------------------- - &.it-text-centered { - .it-hero-text-wrapper { - padding: $v-gap * 6 20% $v-gap * 6 20%; - } - } } } -//Tablet horizontal / small desktop +// Tablet horizontal / small desktop @include media-breakpoint-up(lg) { .it-hero-wrapper { position: relative; @@ -218,48 +209,23 @@ } // Text container ---------------------------- .it-hero-text-wrapper { - padding: $hero-text-padding-desk 40% $hero-text-padding-desk + ($v-gap * 6) ($v-gap * 4)-6; - span.it-category { - position: absolute; - margin-top: -$v-gap * 7; - } + padding: $v-gap * 12 0; + max-width: 50vw; + h1 { font-size: $hero-heding-size-desk; } - p { - margin-bottom: 0; - } - .it-btn-container { - position: absolute; - margin-top: $v-gap * 6; - } - } - // Text container centered---------------------------- - &.it-text-centered { - .it-hero-text-wrapper { - padding: $hero-text-padding-desk 20% $hero-text-padding-desk + ($v-gap * 3) 20%; - span.it-category { - left: 20%; - right: 20%; - } - .it-btn-container { - left: 20%; - right: 20%; - } - } } + // negative bottom &.it-bottom-overlapping-content { margin-bottom: -$hero-negative-margin-desk; .it-hero-text-wrapper { - padding-bottom: $hero-negative-bottom-padding; - padding-top: $hero-text-padding-desk + $hero-negative-margin-desk * 0.5; + padding-bottom: $hero-negative-bottom-padding * 2; } - & + .container { - .card-wrapper { - .card-body { - padding-top: $card-padding * 2; - } + & .card-wrapper { + .card-body { + padding-top: 48px; } } }