<footer class="c-footer c-footer--vanilla u-py-small u-py-medium@md u-mt-auto">
    <div class="u-gap-medium o-divider u-flex u-column u-items-center">
        <div class="u-flex u-column u-row@md u-gap-small u-text-center u-label-08 u-color-light">
            <span> © 2024 Citynews SpA - P.IVA 10786801000 </span>
            <span> <a href=https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359>Termini e Condizioni</a> </span>
            <span> <a href=https://citynews.it/condizioni-particolari#_ga=2.5143347.1498799164.1669298142-1368784910.1664177783>Condizioni particolari </a></span>
            <span> <a href=https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359>Privacy Policy</a> </span>
            <span> <a href=https://www.citynews.it/gruppo/compliance />Modello 231 e Codice Etico</a></span>
        </div>
        <a class="u-mr-base" href="">
            <svg class="c-brand-cn" width="176" height="46">
                <use xlink:href="#brand-citynews"></use>
            </svg>
        </a>
    </div>
</footer>
<footer class="c-footer c-footer--vanilla u-py-small u-py-medium@md u-mt-auto">
    <div class="u-gap-medium o-divider u-flex u-column u-items-center">
      <div class="u-flex u-column u-row@md u-gap-small u-text-center u-label-08 u-color-light">
        <span> {{copyright}} </span>
        <span> <a href={{linkConditions}}>{{conditions}}</a> </span>
        <span> <a href={{linkParticular}}>{{particular}} </a></span>
        <span> <a href={{linkPrivacy}}>{{privacy}}</a> </span>
        <span> <a href={{linkEthic}}>{{ethic}}</a></span>
      </div>      
        <a class="u-mr-base" href="">
          <svg class="c-brand-cn"width="176" height="46">
            <use xlink:href="#brand-citynews"></use>
          </svg>
        </a>
    </div>
</footer>
{
  "claim": "Il tuo brand sulle nostre testate",
  "action": "Richiedi info",
  "links": [
    {
      "item": "Chi siamo"
    },
    {
      "item": "Press"
    },
    {
      "item": "Contatti"
    }
  ],
  "navigation": [
    {
      "nav": null,
      "name": "Canali",
      "list": [
        {
          "item": null,
          "name": "Notizie"
        },
        {
          "item": null,
          "name": "Ultime notizie"
        },
        {
          "item": null,
          "name": "Life"
        },
        {
          "item": null,
          "name": "Cultura"
        },
        {
          "item": null,
          "name": "Opinioni"
        }
      ]
    },
    {
      "nav": null,
      "name": "Link utili",
      "list": [
        {
          "item": null,
          "name": "Presentazione"
        },
        {
          "item": null,
          "name": "Registrati"
        },
        {
          "item": null,
          "name": "Codice di condotta"
        },
        {
          "item": null,
          "name": "Condizioni generali"
        },
        {
          "item": null,
          "name": "Privacy"
        },
        {
          "item": null,
          "name": "Invia contenuti"
        },
        {
          "item": null,
          "name": "Help"
        }
      ]
    }
  ],
  "copyright": "© 2024 Citynews SpA - P.IVA 10786801000",
  "conditions": "Termini e Condizioni",
  "particular": "Condizioni particolari",
  "privacy": "Privacy Policy",
  "ethic": "Modello 231 e Codice Etico",
  "linkConditions": "https://citynews.it/termini-servizio#_ga=2.195002985.558624410.1646066405-2053839960.1623412359",
  "linkParticular": "https://citynews.it/condizioni-particolari#_ga=2.5143347.1498799164.1669298142-1368784910.1664177783",
  "linkPrivacy": "https://citynews.it/privacy#_ga=2.195002985.558624410.1646066405-2053839960.1623412359",
  "linkEthic": "https://www.citynews.it/gruppo/compliance/"
}
  • Content:
    // Name:            Footer
    // Description:     Footer of website
    //
    // Component:       `c-footer`
    //
    // Dependencies:    `settings/colors.tokens`
    //                  `v7_colors`
    //
    // ========================================================================
    @use '../../../assets/sass/objects/v7/links' as *;
    @use '../../../assets/sass/objects/v7/icons' as *;
    
    @use '../../../assets/sass/tools/v7/utils'as *;
    @use '../../../assets/sass/tools/v7/colors'as *;
    @use '../../../assets/sass/tools/v7/mq'as *;
    @use '../../../assets/sass/tools/v7/spacing'as *;
    @use '../../../assets/sass/tools/v7/typography'as *;
    @use '../../../assets/sass/tools/v7/zindex'as *;
    
    @use '../../../assets/sass/settings/v7/layout-standard' as *;
    @use '../../../assets/sass/settings/v7/atomictypography.map' as *;
    @use '../../../assets/sass/settings/v7/colors.tokens' as *;
    @use '../../../assets/sass/settings/v7/colors.map' as *;
    @use '../../../assets/sass/settings/v7/sizes.map' as *;
    @use '../../../assets/sass/settings/v7/spacing.tokens' as *;
    @use '../../../assets/sass/settings/v7/typography.tokens' as *;
    @use '../../../assets/sass/settings/v7/visibility.map' as *;
    @use '../../../assets/sass/settings/v7/global' as *;
    @use '../../../assets/sass/settings/v7/properties' as *;
    @use '../../../assets/sass/settings/v7/scrollbar' as *;
    
    .c-footer {
    
      // Custom properties
      // ======================================================================
    
      --footer-brand-height: 2rem;
      
      // ======================================================================
    
      border-top: 2px solid var(--divider-color);
    
      &--vanilla{
        border-top: unset;
        color: var(--background-color-light);
        a{
          color: inherit;
        }
    
        .c-brand-cn{
          fill: var(--background-color-muted-alpha);
          height: var(--footer-brand-height);
          @if $responsive-breakpoints {
            @include bp(sm) {
              --footer-brand-height: 2.5rem;
            }
          }
        }
      }
    
      .c-brand {
        fill: $ui-01;
        height: var(--footer-brand-height);
        @if $responsive-breakpoints {
          @include bp(sm) {
            --footer-brand-height: 2.5rem;
          }
        }
      }
    
      &__claim {
        background-color: $ui-07;
      }
    
      &__head {
        justify-content: center;
        @if $responsive-breakpoints {
          @include bp(sm) {
            align-items: center;
            justify-content: space-between;
          }
        }
      }
      
      &__badge {
        height: $icon-size-large;
        width: auto;
        fill: $ui-01;
        @if $responsive-breakpoints {
          @include bp(md) {
            margin-top: 0;
          }
        }
      }
    
      .c-dropdown--network {
        color: $link-01;
      }
    }
    
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/lib/components/footer/footer.scss
  • Size: 2.6 KB

Footer

Footer of website

The structure of the component, in detail, provides

  • the logo of the magazine
  • a navigation links
  • a buttons link for social media

Usage

In order to display a default footer component use following syntax:

  {% render "@footer" %}