Aeroporto di Bologna - Design System

Stickers 

<style>
    body {
        padding: 10px;
    }

    .icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        width: 80%;
        margin: 0 auto;
    }

    .icons__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;
        width: 240px;
    }

    .icons__name,
    .icons__donwload {
        font-size: 0.75em;
        text-align: center;
    }

    .preview-icon.preview-icon {
        display: block;
        height: 40px;
        width: 40px;
        margin-bottom: 0.5rem;
    }
</style>
<div class="icons">
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-avatar"></use>
        </svg> <span class="icons__name">stk-avatar</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-close-account"></use>
        </svg> <span class="icons__name">stk-close-account</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-add-luggage"></use>
        </svg> <span class="icons__name">stk-add-luggage</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-departure-return"></use>
        </svg> <span class="icons__name">stk-departure-return</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-booking-quit"></use>
        </svg> <span class="icons__name">stk-booking-quit</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-ar-investor"></use>
        </svg> <span class="icons__name">stk-ar-investor</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-assistance"></use>
        </svg> <span class="icons__name">stk-assistance</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-blq"></use>
        </svg> <span class="icons__name">stk-blq</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-marker"></use>
        </svg> <span class="icons__name">stk-marker</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-true"></use>
        </svg> <span class="icons__name">stk-true</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-car-fw"></use>
        </svg> <span class="icons__name">stk-car-fw</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-ticket-persand"></use>
        </svg> <span class="icons__name">stk-ticket-persand</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-care"></use>
        </svg> <span class="icons__name">stk-care</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-cart"></use>
        </svg> <span class="icons__name">stk-cart</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-connect"></use>
        </svg> <span class="icons__name">stk-connect</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-develop"></use>
        </svg> <span class="icons__name">stk-develop</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-emotion"></use>
        </svg> <span class="icons__name">stk-emotion</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-experience"></use>
        </svg> <span class="icons__name">stk-experience</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-faq"></use>
        </svg> <span class="icons__name">stk-faq</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-invoice"></use>
        </svg> <span class="icons__name">stk-invoice</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-financial-doc"></use>
        </svg> <span class="icons__name">stk-financial-doc</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-financial-graph"></use>
        </svg> <span class="icons__name">stk-financial-graph</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-free-wifi"></use>
        </svg> <span class="icons__name">stk-free-wifi</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-booking-manager"></use>
        </svg> <span class="icons__name">stk-booking-manager</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-help-center"></use>
        </svg> <span class="icons__name">stk-help-center</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-info-point"></use>
        </svg> <span class="icons__name">stk-info-point</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-location"></use>
        </svg> <span class="icons__name">stk-location</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-mourning"></use>
        </svg> <span class="icons__name">stk-mourning</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-mail"></use>
        </svg> <span class="icons__name">stk-mail</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-meet-greet"></use>
        </svg> <span class="icons__name">stk-meet-greet</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-booking-modifier"></use>
        </svg> <span class="icons__name">stk-booking-modifier</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-my-blq"></use>
        </svg> <span class="icons__name">stk-my-blq</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-order"></use>
        </svg> <span class="icons__name">stk-order</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-organi-adb"></use>
        </svg> <span class="icons__name">stk-organi-adb</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-departure-bologna"></use>
        </svg> <span class="icons__name">stk-departure-bologna</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-password"></use>
        </svg> <span class="icons__name">stk-password</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-performance"></use>
        </svg> <span class="icons__name">stk-performance</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-privacy-preferences"></use>
        </svg> <span class="icons__name">stk-privacy-preferences</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-booking"></use>
        </svg> <span class="icons__name">stk-booking</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-press"></use>
        </svg> <span class="icons__name">stk-press</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-user-generic"></use>
        </svg> <span class="icons__name">stk-user-generic</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-user-woman"></use>
        </svg> <span class="icons__name">stk-user-woman</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-user-man"></use>
        </svg> <span class="icons__name">stk-user-man</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-booking-refund"></use>
        </svg> <span class="icons__name">stk-booking-refund</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-return-bologna"></use>
        </svg> <span class="icons__name">stk-return-bologna</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-reclaim"></use>
        </svg> <span class="icons__name">stk-reclaim</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-text-us"></use>
        </svg> <span class="icons__name">stk-text-us</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-solidarity"></use>
        </svg> <span class="icons__name">stk-solidarity</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-strategy"></use>
        </svg> <span class="icons__name">stk-strategy</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-telepass"></use>
        </svg> <span class="icons__name">stk-telepass</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-telepass-app"></use>
        </svg> <span class="icons__name">stk-telepass-app</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-telepass-code"></use>
        </svg> <span class="icons__name">stk-telepass-code</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-parking-exit"></use>
        </svg> <span class="icons__name">stk-parking-exit</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-gym-kit"></use>
        </svg> <span class="icons__name">stk-gym-kit</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-resident"></use>
        </svg> <span class="icons__name">stk-resident</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-workout"></use>
        </svg> <span class="icons__name">stk-workout</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-sport-equipment"></use>
        </svg> <span class="icons__name">stk-sport-equipment</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-trainer"></use>
        </svg> <span class="icons__name">stk-trainer</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk-travel-agency"></use>
        </svg> <span class="icons__name">stk-travel-agency</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk_operaio"></use>
        </svg> <span class="icons__name">stk_operaio</span>
    </div>
    <div class="icons__wrapper">
        <svg class="preview-icon">
            <use xlink:href="#stk_transenna"></use>
        </svg> <span class="icons__name">stk_transenna</span>
    </div>
</div>
 
<style>
	body{
		padding: 10px;
	}
  .icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
    margin: 0 auto;
  }

  .icons__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    width: 240px;
  }

  .icons__name,
  .icons__donwload {
    font-size: 0.75em;
    text-align: center;
  }

  .preview-icon.preview-icon {
    display: block;
    height: 40px;
    width: 40px;
    margin-bottom: 0.5rem;
  }
</style>
<div class="icons">
  {{#each stickers}}
    <div class="icons__wrapper">
      {{> @sticker
        symbol=this.symbol
        class="preview-icon"
      }}
      <span class="icons__name">{{ this.symbol }}</span>
    </div>
  {{/each}}
</div>
 
{
  "stickers": [
    {
      "symbol": "stk-avatar"
    },
    {
      "symbol": "stk-close-account"
    },
    {
      "symbol": "stk-add-luggage"
    },
    {
      "symbol": "stk-departure-return"
    },
    {
      "symbol": "stk-booking-quit"
    },
    {
      "symbol": "stk-ar-investor"
    },
    {
      "symbol": "stk-assistance"
    },
    {
      "symbol": "stk-blq"
    },
    {
      "symbol": "stk-marker"
    },
    {
      "symbol": "stk-true"
    },
    {
      "symbol": "stk-car-fw"
    },
    {
      "symbol": "stk-ticket-persand"
    },
    {
      "symbol": "stk-care"
    },
    {
      "symbol": "stk-cart"
    },
    {
      "symbol": "stk-connect"
    },
    {
      "symbol": "stk-develop"
    },
    {
      "symbol": "stk-emotion"
    },
    {
      "symbol": "stk-experience"
    },
    {
      "symbol": "stk-faq"
    },
    {
      "symbol": "stk-invoice"
    },
    {
      "symbol": "stk-financial-doc"
    },
    {
      "symbol": "stk-financial-graph"
    },
    {
      "symbol": "stk-free-wifi"
    },
    {
      "symbol": "stk-booking-manager"
    },
    {
      "symbol": "stk-help-center"
    },
    {
      "symbol": "stk-info-point"
    },
    {
      "symbol": "stk-location"
    },
    {
      "symbol": "stk-mourning"
    },
    {
      "symbol": "stk-mail"
    },
    {
      "symbol": "stk-meet-greet"
    },
    {
      "symbol": "stk-booking-modifier"
    },
    {
      "symbol": "stk-my-blq"
    },
    {
      "symbol": "stk-order"
    },
    {
      "symbol": "stk-organi-adb"
    },
    {
      "symbol": "stk-departure-bologna"
    },
    {
      "symbol": "stk-password"
    },
    {
      "symbol": "stk-performance"
    },
    {
      "symbol": "stk-privacy-preferences"
    },
    {
      "symbol": "stk-booking"
    },
    {
      "symbol": "stk-press"
    },
    {
      "symbol": "stk-user-generic"
    },
    {
      "symbol": "stk-user-woman"
    },
    {
      "symbol": "stk-user-man"
    },
    {
      "symbol": "stk-booking-refund"
    },
    {
      "symbol": "stk-return-bologna"
    },
    {
      "symbol": "stk-reclaim"
    },
    {
      "symbol": "stk-text-us"
    },
    {
      "symbol": "stk-solidarity"
    },
    {
      "symbol": "stk-strategy"
    },
    {
      "symbol": "stk-telepass"
    },
    {
      "symbol": "stk-telepass-app"
    },
    {
      "symbol": "stk-telepass-code"
    },
    {
      "symbol": "stk-parking-exit"
    },
    {
      "symbol": "stk-gym-kit"
    },
    {
      "symbol": "stk-resident"
    },
    {
      "symbol": "stk-workout"
    },
    {
      "symbol": "stk-sport-equipment"
    },
    {
      "symbol": "stk-trainer"
    },
    {
      "symbol": "stk-travel-agency"
    },
    {
      "symbol": "stk_operaio"
    },
    {
      "symbol": "stk_transenna"
    }
  ]
}

No notes defined.