Spid

<div class="u-padding-all-xxl">

    <h3 class="u-text-h3">Versione GET</h3>

    <div class="Grid">

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <a href="#spid-button-get-xxs" data-menu-trigger="spid-button-get-xxs" class="Button Spid-button u-text-r-xxs">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                <div id="spid-button-get-xxs" data-menu class="Spid-menu Dropdown-menu">
                    <ul class="Linklist js-randomize">

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg"
                alt="" class="u-text-r-xxs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg"
                alt="" class="u-text-r-xxs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg"
                alt="" class="u-text-r-xxs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg"
                alt="" class="u-text-r-xxs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg"
                alt="" class="u-text-r-xxs" />
            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <a href="#spid-button-get-xs" data-menu-trigger="spid-button-get-xs" class="Button Spid-button u-text-r-xs">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                <div id="spid-button-get-xs" data-menu class="Spid-menu Dropdown-menu">
                    <ul class="Linklist js-randomize">

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg"
                alt="" class="u-text-r-xs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg"
                alt="" class="u-text-r-xs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg"
                alt="" class="u-text-r-xs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg"
                alt="" class="u-text-r-xs" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg"
                alt="" class="u-text-r-xs" />
            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <a href="#spid-button-get-s" data-menu-trigger="spid-button-get-s" class="Button Spid-button u-text-r-s">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                <div id="spid-button-get-s" data-menu class="Spid-menu Dropdown-menu">
                    <ul class="Linklist js-randomize">

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg"
                alt="" class="u-text-r-s" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg"
                alt="" class="u-text-r-s" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg"
                alt="" class="u-text-r-s" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg"
                alt="" class="u-text-r-s" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg"
                alt="" class="u-text-r-s" />
            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <a href="#spid-button-get-m" data-menu-trigger="spid-button-get-m" class="Button Spid-button u-text-r-m">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                <div id="spid-button-get-m" data-menu class="Spid-menu Dropdown-menu">
                    <ul class="Linklist js-randomize">

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg"
                alt="" class="u-text-r-m" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg"
                alt="" class="u-text-r-m" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg"
                alt="" class="u-text-r-m" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg"
                alt="" class="u-text-r-m" />
            </a>
                        </li>

                        <li>
                            <a href="#" class="Spid-idp">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg"
                alt="" class="u-text-r-m" />
            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

    </div>

    <h3 class="u-text-h3">Versione POST</h3>

    <div class="Grid">

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <form name="spid_idp_access" action="#" method="post" class="Spid u-margin-bottom-xxl">

                    <input type="hidden" name="param_001" value="" />
                    <input type="hidden" name="param_002" value="" />
                    <input type="hidden" name="param_003" value="" />

                    <a href="#spid-button-post-xxs" data-menu-trigger="spid-button-post-xxs" class="Button Spid-button u-text-r-xxs">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                    <div id="spid-button-post-xxs" data-menu class="Spid-menu Dropdown-menu">
                        <ul class="Linklist js-randomize">

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg" alt="" class="u-text-r-xxs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg" alt="" class="u-text-r-xxs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg" alt="" class="u-text-r-xxs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg" alt="" class="u-text-r-xxs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg" alt="" class="u-text-r-xxs" />
            </button>
                            </li>

                        </ul>
                    </div>

                </form>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <form name="spid_idp_access" action="#" method="post" class="Spid u-margin-bottom-xxl">

                    <input type="hidden" name="param_001" value="" />
                    <input type="hidden" name="param_002" value="" />
                    <input type="hidden" name="param_003" value="" />

                    <a href="#spid-button-post-xs" data-menu-trigger="spid-button-post-xs" class="Button Spid-button u-text-r-xs">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                    <div id="spid-button-post-xs" data-menu class="Spid-menu Dropdown-menu">
                        <ul class="Linklist js-randomize">

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg" alt="" class="u-text-r-xs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg" alt="" class="u-text-r-xs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg" alt="" class="u-text-r-xs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg" alt="" class="u-text-r-xs" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg" alt="" class="u-text-r-xs" />
            </button>
                            </li>

                        </ul>
                    </div>

                </form>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <form name="spid_idp_access" action="#" method="post" class="Spid u-margin-bottom-xxl">

                    <input type="hidden" name="param_001" value="" />
                    <input type="hidden" name="param_002" value="" />
                    <input type="hidden" name="param_003" value="" />

                    <a href="#spid-button-post-s" data-menu-trigger="spid-button-post-s" class="Button Spid-button u-text-r-s">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                    <div id="spid-button-post-s" data-menu class="Spid-menu Dropdown-menu">
                        <ul class="Linklist js-randomize">

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg" alt="" class="u-text-r-s" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg" alt="" class="u-text-r-s" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg" alt="" class="u-text-r-s" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg" alt="" class="u-text-r-s" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg" alt="" class="u-text-r-s" />
            </button>
                            </li>

                        </ul>
                    </div>

                </form>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

        <div class="Grid-cell u-md-size1of2 u-lg-size1of4">
            <div class="Spid">
                <form name="spid_idp_access" action="#" method="post" class="Spid u-margin-bottom-xxl">

                    <input type="hidden" name="param_001" value="" />
                    <input type="hidden" name="param_002" value="" />
                    <input type="hidden" name="param_003" value="" />

                    <a href="#spid-button-post-m" data-menu-trigger="spid-button-post-m" class="Button Spid-button u-text-r-m">
        <img src="../raw/spid/spid-ico-circle-bb.svg" alt="" />
        <span>Entra con SPID</span>
      </a>
                    <div id="spid-button-post-m" data-menu class="Spid-menu Dropdown-menu">
                        <ul class="Linklist js-randomize">

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Infocert ID</span>
              <img src="../raw/spid/spid-idp-infocertid.svg" alt="" class="u-text-r-m" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con TIM ID</span>
              <img src="../raw/spid/spid-idp-timid.svg" alt="" class="u-text-r-m" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Poste ID</span>
              <img src="../raw/spid/spid-idp-posteid.svg" alt="" class="u-text-r-m" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Sielte ID</span>
              <img src="../raw/spid/spid-idp-sielteid.svg" alt="" class="u-text-r-m" />
            </button>
                            </li>

                            <li>
                                <button class="Spid-idp" tabindex="0">
              <span class="u-hiddenVisually">Prosegui con Aruba ID</span>
              <img src="../raw/spid/spid-idp-arubaid.svg" alt="" class="u-text-r-m" />
            </button>
                            </li>

                        </ul>
                    </div>

                </form>
            </div>
            <ul class="Prose u-margin-top-l u-margin-bottom-xxl">
                <li>
                    <a href="http://www.spid.gov.it" class="u-color-50">Informazioni su SPID</a>
                </li>
            </ul>
        </div>

    </div>

</div>
  • Content:
    /** @define Spid; weak */
    
    /*
     * 1. mandatory font-family
     */
    
    :root {
      --Spid-font-ratio: 1.2em;
      --Spid-img-height: 2.5em;
      --Spid-img-width: 3em;
      --Spid-idp-img-height: 2em;
      --Spid-background: #06c;
      --Spid-font-family: "Titillium Web"; /* [1] */
    }
    
    .Spid {
      @extend .u-inline;
      @extend .u-posRelative;
    }
    
    .Spid-button {
      @extend .u-color-white;
      @extend .u-alignMiddle;
      @extend .u-linkClean;
      @extend .u-borderRadius-s;
      @extend .u-padding-bottom-xxs;
      @extend .u-padding-top-xxs;
    
      background-color: var(--Spid-background);
      font-family: var(--Spid-font-family);
      text-transform: none !important;
    }
    
    .Spid-button:focus,
    .Spid-button:hover {
      background-color: color(var(--Spid-background) l(-15%));
    }
    
    .Spid-button > span {
      @extend .u-alignMiddle;
    
      font-size: var(--Spid-font-ratio);
    }
    
    .Spid-button > img {
      @extend .u-alignMiddle;
      @extend .u-margin-r-right;
      @extend .u-padding-r-right;
      @extend .u-border-right-xxs;
    
      color: color(var(--Spid-background) l(+8%) s(-15%));
      height: var(--Spid-img-height);
      width: var(--Spid-img-width);
    }
    
    .Spid-button:focus > img,
    .Spid-button:hover > img {
      color: color(var(--Spid-background) l(-8%) s(-15%));
    }
    
    .Spid-menu {
      @extend .u-background-white;
      @extend .u-borderShadow-m;
      @extend .u-zindex-50;
    
      width: 100%;
    }
    
    .Spid-idp {
      @extend .u-padding-r-all;
    
      width: 100%;
    }
    
    .Spid-idp:hover {
      @extend .u-background-grey-10;
    }
    
    .Spid-idp > img {
      height: var(--Spid-idp-img-height);
    }
    
  • URL: /components/raw/spid/index.css
  • Filesystem Path: src/modules/spid/index.css
  • Size: 1.5 KB

Il font da utilizzare per il pulsante ‘Entra con SPID’ è tassativamente ‘Titillium Web’.