Page History

Div

class	section verifiable-credentials-introduction

Div

class	container

Div

class	cols justify-content-between

Div

class	col-6

Html-bobswift

<h1 class="heading-deco terciary"><span class="d-block">Verifiable Credentials</span>Framework<h1>
<p style="font-size:24px;"><strong>Make information easy to verify, and impossible to fake.</strong></p> 
<p>In this third age of the internet, Web3, we need a new paradigm for exchanging and verifying information. We need to put users back in control of their data, while creating a framework for trust that doesn't rely on big platforms or strong central government. EBSI's Verifiable Credentials Framework is a full framework for expressing, exchanging, and verifying information, using a new information format (W3C Verifiable Credentials), digital wallets, and the blockchain to establish trust.</p>

Div

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/Verifiable%20Credentials_IsometricVerifiable%20credentials.pnggif
alt	Verifiable Credentials
class	img-fluid img-right

Div

id	vc-history
class	section

Div

class	container

Div

class	cols

Div

class	col-12

Html-bobswift
<h2 class="heading-deco terciary">History</h2>

Div

class	cols vc-history-cards

Div

class	col-4

HTML

<div class="h-card-container">
  <div class="card-grid-header">
    <h3>WEB 1.0</h3>
  </div>
  <div class="line-seperator"><hr /></div>
  <div class="card-grid-footer">
    <div class="info-container">
      <span>Sign in X</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/db_icon.png"
        alt=""
      />
    </div>
    <div class="info-container">
      <span>Sign in Y</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/db_icon.png"
        alt=""
      />
    </div>
    <div class="info-container">
      <span>Sign in Z</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/db_icon.png"
        alt=""
      />
    </div>
  </div>
</div>

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/r-arrow_icon.png
class	arrow-right-history-section

Div

class	col-4

HTML

<div class="h-card-container">
  <div class="card-grid-header">
    <h3>WEB 2.0</h3>
	<p>A trust model relying on trusted third parties.</p>
  </div>
  <div class="line-seperator"><hr /></div>
  <div class="card-grid-footer">
    <div class="info-container">
      <span>Sign in with</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/google_icon.png"
        alt=""
      />
    </div>
    <div class="info-container">
      <span>Sign in with</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/fb_icon.png"
        alt=""
      />
    </div>
    <div class="info-container">
      <span>Centralised-database</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/db_icon.png"
        alt=""
      />
    </div>
  </div>
</div>

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/r-arrow_icon.png
class	arrow-right-history-section

Div

class	col-4 web-3-card

HTML

<div class="h-card-container">
  <div class="card-grid-header">
    <h3><strong>WEB 3.0</strong></h3>
	<p>A trust model relying on Verifiable Information.</p>
  </div>
  <div class="line-seperator"><hr /></div>
  <div class="card-grid-footer">
    <div class="info-container">
      <span>Digital wallets &
verifiable Credentials</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/dlt_icon.png"
        alt=""
      />
    </div>
    <div class="info-container">
      <span>Distributed Ledger Technology &
Smart Contracts</span
      ><img
        src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/dwvc_icon.png"
        alt=""
      />
    </div>
  </div>
</div>

Div

class	cols vc-web3-ssi_movement

Div

class	cols

Div

class	col-11

HTML
<h3 class="heading-deco terciary">EBSI provides the elements of a Web 3.0 trust model</h3> <p>We combine three key technologies to enable trusted, decentralised information exchange:</p>

Div

style	gap: 10px;
class	cols justify-content-between

Div

class	col-4

HTML

<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/verifiable-credentials_icon.png" alt=""/></div>
<div><h4>Verifiable Credentials</h4></div>
<div><p>A new format for expressing information that is almost impossible to fake.</p></div>

Div

class	col-4

HTML

<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/Digital%20wallet%20phone%20conformant_flat_icon.png" alt=""/></div>
<div><h4>Digital wallet</h4></div>
<div><p><a href="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Conformant+wallets" class="text-secondary">Conformance-tested apps</a> built according to <a href="https://apihub-conformancetest.ebsi.eu/docs/specs/providers-and-wallets-metadata" class="text-secondary">EBSI's specifications</a> that allow users to manage credentials and keys <strong>while maintaining control</strong> - their personal data is <strong>never stored on ledger.</strong></p></div>

Div

class	col-4

HTML

<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/Blockchain%20and%20decentralized%20infrastructure_icon.png" alt=""/></div>
<div><h4>Blockchain ledger</h4></div>
<div><p>Highly available and resilient source of information using permissioned Trust Registers deployed on EBSI’s Blockchain to support verification.</p></div>

...

Div

id	understand-eco-ebsi
class	section bg-terciary-10

Div

class	container

Div

class	cols align-items-center

Div

class	col-7

HTML

<h2 class="heading-deco terciary">Understand the EBSI ecosystem</h2>
<p>By clicking on the visual, you will learn more about the actors and ter role in the EBSI ecosystem as well as the key concepts usefull to understand blockchain applied cross border sevices.</p>
<p>Want to understand in details how EBSI works? <a href="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Explained+Series" class="link-cta text-secondary"><span>Discover our EBSI Explained chapters</span></a></p>

Div

class	cols justify-content-center

Div

class	col-8 tabs hierarchy-first

Div

class	tabs hierarchy-first

HTML

<ul class="case-family_tabs">
<li data-index="0" id="v-actors"><a><img class="num-active" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/num-1-illu-white.png"/><img class="num-deactive" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/num-1-illu-black.png"/><span>Who are the actors?</span></a></li>
<li data-index="1" id="v-process"><a><img class="num-active" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/num-2-illu-white.png"/><img class="num-deactive" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/num-2-illu-black.png"/><span>Understand the process</span></a></li>
<li data-index="2" id="v-credentials"><a><img class="num-active" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/num-3-illu-white.png"/><img class="num-deactive" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/num-3-illu-black.png"/><span>Verifiable credentials</span></a></li>
</ul>

Div

class	cols align-items-center illu-user-log

Html-bobswift

<div id="v-actors_content" class="illu-popup collapse" data-index="0" data-allow-toggle>

<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/VC%20Ecosystem_v3_a.png" alt="EBSI ecosystem illustration" class="img-fluid">
 
<!--POPUP 1-->
<div class="illu-popup-item" id="eco1-container" >
<a class="collapse-trigger" id="eco1" aria-expanded="false" aria-controls="ecosect1">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">Trusted Accreditation Organisations(TAO)</div>
</div>
<div class="collapse-panel" id="ecosect1" role="region" aria-labelledby="eco1" hidden="">
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Trusted Accreditation Organisations(TAO)</strong></p>
<p>In Verifiable Credentials use cases, a TAO is an organisation that can accredit an issuer with the ability to issue certain types of Verifiable Credentials.</p>
</div>
<!---->

<!--POPUP 2-->
<div class="illu-popup-item" id="eco2-container" >
<a class="collapse-trigger" id="eco2" aria-expanded="false" aria-controls="ecosect2">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">Trusted Issuers</div>
</div>
<div class="collapse-panel" id="ecosect2" role="region" aria-labelledby="eco2" hidden="">
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Trusted Issuers</strong></p>
<p>In Verifiable Credentials Use Cases, the Trusted Issuer is a role that a Legal Entity might perform by creating a Verifiable Credential, associating it with a specific subject, and transmitting it to a holder. The Issuer is trusted as its accredited by a TAO, the accreditation is stored on the ledger and can be verified later. For example, issuers include governments, businesses, non-profit organisations, trade associations.</p>
</div>
<!----> 

<!--POPUP 3-->
<div class="illu-popup-item" id="eco3-container" >
<a class="collapse-trigger" id="eco3" aria-expanded="false" aria-controls="ecosect3">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">EBSI</div>
</div>
<div class="collapse-panel" id="ecosect3" role="region" aria-labelledby="eco3" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>EBSI</strong></p>
<p>EBSI's blockchain ledger is a decentralised database that keeps a record of all transactions written on it. The information is stored in blocks that are cryptographically linked to each other, forming a chain - hence "blockchain"- making the information almost impossible to tamper with. On EBSI ledger, we make available specific registries that can be used by the Use Cases as a source of trust. For example, EBSI's Trusted Issuers registry can be used in the education domain to keep a tamper-evident record of all universities accredited by a national educational body, increasing trust and making verification of diploma credentials much easier.</p>
</div>
<!---->

<!--POPUP 4-->
<div class="illu-popup-item" id="eco4-container" >
<a class="collapse-trigger" id="eco4" aria-expanded="false" aria-controls="ecosect4">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">Trusted Verifiers</div>
</div>
<div class="collapse-panel" id="ecosect4" role="region" aria-labelledby="eco4" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Trusted Verifiers</strong></p>
<p>It is a role an entity performs by receiving one or more Verifiable Credentials, optionally inside a verifiable presentation, for processing. For example, an employer will verify the authenticity of a verifiable diploma shared by the student (holder).</p>
</div>
<!---->


<!--POPUP 5-->
<div class="illu-popup-item" id="eco5-container">
<a class="collapse-trigger" id="eco5" aria-expanded="false" aria-controls="ecosect5">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">Holders of Credentials</div>
</div>
<div class="collapse-panel" id="ecosect5" role="region" aria-labelledby="eco5" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Holders of Credentials</strong></p>
<p>The holder of a Verifiable Credential sits at the center of a triangle of trust, mediating between issuer and verifier. The issuer and holder trust each other, the holder trusts the verifier, and the verifier trusts the issuer. Any role in the triangle can be played by a person, an institution, or an IoT-device. The holder of the Verifiable Credential, issued by the issuer, is most often <strong>an individual</strong>, but it can also be an organization. He is the sole owner of the issued Verifiable Credential, and has full control over its handling, use and verification</p>
</div>
<!---->



</div>

Div

class	cols illu-user-log

Html-bobswift

<div id="v-process_content" class="illu-popup collapse" data-index="1" data-allow-toggle>

<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/VC%20Ecosystem_v3_b.png" alt="EBSI ecosystem illustration" class="img-fluid">

<!--POPUP 6-->
<div class="illu-popup-item" id="eco6-container">
<a class="collapse-trigger" id="eco6" aria-expanded="false" aria-controls="ecosect6">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4" style="width: 70px;">Register to EBSI</div>
</div>
<div class="collapse-panel" id="ecosect6" role="region" aria-labelledby="eco6" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Register to EBSI</strong></p>
<p>This is the process that will allow the TAO to get accredited and register the information on the EBSI Trusted Issuers Registry.</p>
</div>
<!----> 

<!--POPUP 7-->
<div class="illu-popup-item" id="eco7-container">
<div class="illu-popup-title h4" style="width:auto;">Issue Verifiable Credentials</div>
<a class="collapse-trigger" id="eco7" aria-expanded="false" aria-controls="ecosect7">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
</div>
<div class="collapse-panel" id="ecosect7" role="region" aria-labelledby="eco7" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Issue Verifiable Credentials</strong></p>
<p>This is the process taken by a Trusted Issuer to issue a Verifiable Credential addressed to a Holder.</p>
</div>
<!---->  

<!--POPUP 8-->
<div class="illu-popup-item" id="eco8-container">
<div class="illu-popup-title h4" style="width:60px">Register to EBSI</div>
<a class="collapse-trigger" id="eco8" aria-expanded="false" aria-controls="ecosect8">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
</div>
<div class="collapse-panel" id="ecosect8" role="region" aria-labelledby="eco8" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Register to EBSI</strong></p>
<p>This is the process that will give access to the EBSI DID Registry and enable the Trusted Issuer to register the DID and DID Document on the EBSI Ledger.</p>
</div>
<!---->

<!--POPUP 9-->
<div class="illu-popup-item" id="eco9-container">
<div class="illu-popup-title h4" style="text-align:center;">Verify VCs using EBSI</div>
<a class="collapse-trigger" id="eco9" aria-expanded="false" aria-controls="ecosect9">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
</div>
<div class="collapse-panel" id="ecosect9" role="region" aria-labelledby="eco9" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Verify VCs using EBSI</strong></p>
<p>This is the process taken by the Verifier to verify the authenticity of the Verify Credentials shared by the Holder on the EBSI Legder.</p>
</div>
<!---->


<!--POPUP 10-->
<div class="illu-popup-item" id="eco10-container">
<a class="collapse-trigger" id="eco10" aria-expanded="false" aria-controls="ecosect10">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">Present VCs as Verifiable Presentations</div>
</div>
<div class="collapse-panel" id="ecosect10" role="region" aria-labelledby="eco10" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Present VCs as Verifiable Presentations</strong></p>
<p>This is the process taken by the Holder to exchange on or more Verifiable Credentials with a Verifier.</p>
</div>
<!---->


</div>

Div

class	cols illu-user-log

Html-bobswift

<div id="v-credentials_content" class="illu-popup collapse" data-index="2" data-allow-toggle>

<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/VC%20Ecosystem_v3_c.png" alt="EBSI ecosystem illustration" class="img-fluid">

 <!--POPUP 11-->
<div class="illu-popup-item" id="eco11-container">
<div class="illu-popup-title h4" style="width:auto;">Verifiable Credentials</div>
<a class="collapse-trigger" id="eco11" aria-expanded="false" aria-controls="ecosect11">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
</div>
<div class="collapse-panel" id="ecosect11" role="region" aria-labelledby="eco11" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Verifiable Credentials</strong></p>
<p>It is a digital document format based on the W3C open standard for Verifiable Credentials. EBSI's Verifiable Credentials profile uses this W3C standard to ensure interoperability and wide adoption. They can represent information found in physical credentials, such as a passport or license, as well as new things that have no physical equivalent, such as ownership of a bank account. They have numerous advantages over physical credentials, most notably that they're digitally signed, which makes them tamper-resistant and instantaneously verifiable.</p>
</div>
<!---->  


  <!--POPUP 12-->
<div class="illu-popup-item" id="eco12-container">
<a class="collapse-trigger" id="eco12" aria-expanded="false" aria-controls="ecosect12">
<img class="illu-popup-icon" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2">
</a>
<div class="illu-popup-title h4">Verifiable Presentation</div>
</div>
<div class="collapse-panel" id="ecosect12" role="region" aria-labelledby="eco12" hidden="" >
<div class="close-button"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/plus-illu.png?api=v2" style="width: 24px; transform: rotate(45deg);"/></div>
<p><strong>Verifiable Presentation</strong></p>
<p>A verifiable presentation expresses data from one or more Verifiable Credentials, and is packaged in such a way that the authorship of the data is verifiable. If Verifiable Credentials are presented directly, they become verifiable presentations. Data formats derived from Verifiable Credentials that are cryptographically verifiable, but do not of themselves contain Verifiable Credentials, might also be verifiable presentations. The data in a presentation is often about the same subject, but might have been issued by multiple issuers. The aggregation of this information typically expresses an aspect of a person, organisation, or entity.</p>
</div>
<!---->   

</div>

Div

class	cols

HTML

<div class="ebsi-works-container"><h3>Want to understand in details how EBSI works?</h3>
<p><a class="btn secondary outline" href="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Explained+Series"><span><strong>Discover our EBSI Explained chapters</strong></span><span class="ico-cta"></span></a></p></div>

CSS Stylesheet

@media screen and ( max-width: 600px ) {

.

CSS Stylesheet

@media screen and ( max-width: 600px ) {

.close-button { display: flex!important; position: relative; }

.illu-popup .collapse-panel { max-width: unset!important; top: -93px!important;}

.illu-popup-title { font-size: 14px!important;}




#eco1-container { top: 32%; left: 0%; }
#eco2-container { top: 69%; left: 24%; }
#eco2-container .h4 { width: 80px; }
#eco3-container { top: 69%; left: 54%; }
#eco4-container { top: 30%; left: 70%; }
#eco5-container { top: 0%; left: 55%; }
#eco6-container { top: 64%; left: 21%; flex-direction: column; }
#eco6-container .h4 { width: 80px; text-align: center; }
#eco7-container { top: 6%; left: 20%; flex-direction: column;}
#eco7-container .h4 { width: 150px!important; text-align: center; margin-bottom: 1rem;}
#eco8-container { top: 52%; left: 41%; flex-direction: column-reverse; }
#eco9-container { top: 52%; left: 51%; right: 5%; flex-direction: column-reverse; }
#eco9-container .h4 { width: 70px; text-align: center;}
#eco10-container { top: 4%; left: 55%; flex-direction: column-reverse; text-align: center; }
#eco11-container { top: 32%; right: 53%; flex-direction: row; }
#eco11-container .h4 { width: 100px!important; text-align: center; }
#eco12-container { top: 17%; left: 57%; flex-direction: column-reverse;}
#eco12-container .h4 { text-align: center; }

#v-actors_content, #v-process_content, #v-credentials_content { margin-top: 7.5rem; margin-bottom: 7.5rem; }

.collapse-panel { box-shadow: 0 0 0 9999px rgb(0 0 0 / 50%); }

}

@media screen and (min-width: 601px) {

.illu-popup .collapse-panel { max-width: unset!important;}

.illu-popup-title { font-size: 16px!important; text-align: center; }


#eco1-container { top: 37%; left: 7%; bottom: 50%; }
#eco2-container { top: 72%; left: 29%; bottom: 20%; }
#eco3-container { top: 72%; left: 58%; bottom: 20%; }
#eco4-container { top: 69%; left: 75%; bottom: 20%; right: 3%; flex-direction: column; text-align: center; }
#eco5-container { top: 17%; left: 64%; }
#eco6-container { top: 72.5%; left: 26%; flex-direction: column; text-align: center;}

#eco7-container { top: 32%; right: 53%; bottom: 55%; left: unset; flex-direction: row; text-align: center;}
#eco7-container .h4 { width: 150px!important; text-align: center; margin-bottom: 1rem;}
#eco8-container { top: 56%; left: 43%; right: 50%; flex-direction: column-reverse; text-align: center;}
#eco9-container { top: 56%; left: 64%; right: 20%; flex-direction: column-reverse; text-align: center;}
#eco10-container { top: 30%; left: 70%; bottom: 55%; flex-direction: row; text-align: center;}
#eco11-container { top: 39%; right: 54%; flex-direction: row; }
#eco11-container .h4 { width: 100px!important; text-align: center; }
#eco12-container { top: 39%; left: 74%; flex-direction: row;}
#eco12-container .h4 { text-align: center; }

}


@media screen and (min-width: 1000px) {

#eco1-container { top: 42%; left: 7%; bottom: unset;}
#eco1-container .h4 { text-align: start!important; }
#eco2-container { top: 42%; left: 29%; bottom: unset;}
#eco3-container { top: 72%; left: 58%; bottom: unset;}
#eco4-container { top: 72%; left: 83%; right: 5%; bottom: unset; flex-direction: row; text-align: start; }
#eco4-container .h4 { width: auto!important; text-align: start;}
#eco5-container { top: 17%; left: 64%; }
#eco5-container .h4 { text-align: start; }
#eco6-container { top: 73%; left: 26%; right: unset; bottom: unset; flex-direction: column; }
#eco7-container .h4 { margin: 0px; }
#eco8-container { top: 55%; left: 43%; right: unset; flex-direction: column; }
#eco9-container { top: 55%; left: 66%; right: unset; flex-direction: column; }
#eco10-container { }
#eco11-container { top: 39%; right: 54%;}
#eco12-container { top: 39%; left: 74%; }

#ecosect1 { top: 47.5%; left: 8%; right: 50%;}
#ecosect2 { top: 47.5%; left: 31%; right: 24%; }
#ecosect3 { top: 29%; left: 60%; right: unset; }
#ecosect4 { top: 48.5%; left: 45%; right: 12%; }
#ecosect5 { top: 22%; left: 66%; right: unset; }
#ecosect6 { top: 56%; left: 29%; right: 30%; }
#ecosect7 { top: 18%; left: 44%; right: 10%; }
#ecosect8 { top: 65%; left: 45%; right: 14%; }
#ecosect9 { top: 65%; left: 30%; right: 28%; }
#ecosect10 { top: 20%; left: 14%; right: 27%; }
#ecosect11 { top: 9%; left: 43.5%; right: unset; }
#ecosect12 { top: 6%; left: 19%; right: 24%; }

}

@media screen and (min-width: 1920px) {

#eco8-container { top: 56%; }
#eco9-container { top: 56%; }

#ecosect3 { top: 37%; }
#ecosect4 { top: 50.5%; }
#ecosect6 { top: 58%; }
#ecosect7 { top: 20%; left: 45%; }
#ecosect8 { top: 66%; }
#ecosect9 { top: 66%; right: 29%; }
#ecosect10 { top: 22%; right: 28%; }
#ecosect11 { top: 12%; left: 44.5%; }
#ecosect12 { top: 12%; }
}

.close-button { cursor: pointer; display: flex; flex-direction: flow; justify-content: flex-end; align-items: center; display: none;}

.fadeBody { top:0px; left:0px; z-index: 99; background: black; }
.ebsi-works-container { display:flex; flex-direction: column; gap: 24px; }

.illu-user-log { margin-bottom: 0!important; }
.hierarchy-first { margin-bottom: -1.5rem; }

Div

id	sharing-benefits
class	section

Div

class	container

Div

class	cols

Div

class	col-12

HTML
<h3 class="heading-deco secondary">What are the benefits of information sharing based on Verifiable Credentials?</h3>

Div

class	cols

Div

class	col-4

HTML

<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/checkmark-illu.png?api=v2" alt=""/></div>
<div><h5><strong>Cross-border format friendly</strong></h5></div>
<div><p>With our standardised Verifiable Credentials data model, information’s format and structure is unified across borders and domains – making it less costly for an ecosystem to form.</p></div>

Div

class	col-4

HTML

<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/checkmark-illu.png?api=v2" alt=""/></div>
<div><h5><strong>Self-sovereignty, privacy & usability.</strong></h5></div>
<div><p>Holders of data are in control of what data they share, and when, with verifiers, thanks to their digital wallets. They can also prove that the information they share belongs to them.</p></div>

Div

class	col-4

HTML

<div class="img-container"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/checkmark-illu.png?api=v2" alt=""/></div>
<div><h5><strong>Easier & faster verification.</strong></h5></div>
<div><p>The Verifiable Credentials model allows verifiers to trust the data without needing to trust the source of it and to easily identify holders.</p></div>

...

Div

class	section

Div

class	container

Div

class	cols align-items-center

Div

class	col-6

Html-bobswift
<img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/verifiable%20credentials%20Playbook_Isometric%201.png" alt="">

Div

class	col-5

Html-bobswift

<h3 class="heading-deco secondary">EBSI Specifications</h3>  
<p>If you have already defined your use case, you might be ready to start your design process. <strong>EBSI has developed the Specifications section to help TAOs, Issuers, Wallet Providers and Verifiers answer key questions and understand how to implement VCs according to W3C and EBSI standards.</strong> In case, you want to explore more about our key concepts of EBSI's technology before deep diving into the specifications, you can check out our EBSI Explained series.</p>
<div class="btns-horizontal"><a class="btn secondary outline" href="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/Explained+Series"><span><strong>EBSI explained</strong></span><span class="ico-cta"></span></a> <a class="btn secondary" href="https://echub.europaebsi.eu/digital-building-blocks/sites/display/EBSIDOC/get-started"><span><strong>EBSI Specifications</strong></span><span class="ico-cta"></span></a></div>

...

CSS Stylesheet

/*--- HOME SECTION USE CASES ---*/  
.home-use-cases {}
.home-use-cases img { height: 113px;}
/*card content custom*/
.card-content-custom .card-content { padding:0; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 16px;}
.card-content-custom .card-content .card-content-text { padding:1rem 2rem 0 2rem;}
.card-content-custom .card-content .card-content-footer {display: flex; justify-content: end; padding:0 2rem 1.5rem 2rem; }
.card-content-custom .card-content .card-content-capabilities { background: #E8E7EB; max-width: 191px; border-radius: 6px; text-align: center; letter-spacing: 1px; }
.card-content-custom .card-content { display: flex; flex-direction: column; justify-content: space-between; }

/*--- MACRO HOME SLIDER NEWS ---*/
.flickity-viewport .card-grid-sc-slider{min-height: 449px;}
.home-slider-news { position:relative; z-index:2; padding-top: 0; padding-bottom:0; border:1px solid #00b3ef;}
.home-slider-news .flickity-enabled { position:relative; background-color: transparent; box-shadow:none;}
.home-slider-news .flickity-enabled.is-draggable { box-shadow:none;}
.home-slider-news .news-slider-root > div { padding:0;}
.home-slider-news .aui-item > div { margin:0; padding:0;}
.home-slider-news .aui-item { display:inline-block; padding:0;}
.home-slider-news .aui-group>.aui-item { padding-top:0; padding-bottom:0; width: 100%;}
.home-slider-news .aui-group>.aui-item+.aui-item { padding:0; width: 100%;}
.home-slider-news > ul { list-style: none; margin: 0; padding: 0;}
/*heading*/
.home-slider-news h2:first-child { display: none;}
/*arrow*/
.home-slider-news .flickity-button { display:none;}
/*dots*/
.home-slider-news .flickity-page-dots { position:absolute; top:auto; bottom:-3rem; margin-bottom: 0; height:1rem; text-align: center !important;}
.home-slider-news .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;}
.home-slider-news .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;}
.home-slider-news .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
/*content*/
.home-slider-news-label { display: inline-block; padding: 0.25rem; font-weight: normal; letter-spacing: 2px; line-height: 1em; text-align: center; text-decoration: none; background-color: #E6F7FD; border: 1px solid transparent; border-radius: 6px;}
.home-slider-news-title { margin-bottom: 0; }
.home-slider-news-title h3 { font-size: 1.2rem; padding-top:1rem; line-height: 1.2;}

@media screen and (min-width: 576px) {     
  .home-slider-news-cell { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
  .home-slider-news-label { padding: 0.5rem 0.75rem; font-weight: normal; letter-spacing: 2px; line-height: 1em;}
  .home-slider-news-title { flex-grow: 1;}
  .home-slider-news-title h3 { padding-left: 1rem; padding-right:1rem; font-size: 1.5rem;}
} 
.home-slider-news-container.flickity-enabled.is-draggable:focus { outline:0; outline:none; box-shadow:none;}


/*--- MACRO SLIDER BY DEFAULT ---*/
.slider-default { position:relative; z-index:8; }
.slider-default .flickity-enabled { background-color: transparent; box-shadow:none;}
.slider-default .flickity-enabled.is-draggable { box-shadow:none;}
.slider-default .news-slider-root > div { padding:0;}
.slider-default .aui-item > div { margin:0; padding:0;}
.slider-default .aui-item { display:inline-block; padding:0 15px 10px 15px;}
.slider-default .aui-group>.aui-item { padding-top:0; padding-top:1rem; padding-bottom:0; width: 100%;}
.slider-default .aui-group>.aui-item+.aui-item { padding:0; width: 100%;}
.slider-default > ul { list-style: none; margin: 0; padding: 0;}
/*heading*/
.slider-default h2:first-child { display: none;}
/*arrow*/ 
.slider-default .flickity-button { top:38% !important; background-color: #fff !important; border:1px solid #CD1D8B; border-radius:8px !important;}
.slider-default .flickity-button:hover { background-color: #FFE7F2 !important;}
.slider-default .flickity-button:focus {  outline: 2px dashed black; outline-offset: 2px; box-shadow: none;} 
.slider-default .flickity-prev-next-button .flickity-button-icon { left: 30%; top: 30%; width: 40%; height: 40%; fill: rgb(205, 29, 139) !important;} 
.slider-default .flickity-prev-next-button.previous { left: -15px;}
.slider-default .flickity-prev-next-button.next { right: -15px;} 
/*dots*/
.slider-default .flickity-page-dots { position:relative; margin-bottom: 0; top:1rem !important; height:1rem; text-align: center !important;}
.slider-default .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;}
.slider-default .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;}
.slider-default .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}

@media screen and (min-width: 1280px) {
  .slider-default .flickity-prev-next-button.previous { left: -50px;}
  .slider-default .flickity-prev-next-button.next { right: -50px;}
}

.flickity-viewport { height: 551px; }



/*--- HOME SS SLIDER BY DEFAULT ADD ON ---*/
.ss-carroussel { position:relative; padding-top:0; padding-bottom:0;}
.ss-carroussel .slider-default { margin-top:1rem;}
/*hack*/
.ss-carroussel .slider-default > p:last-child { display: none;}
/*arrow*/
.ss-carroussel .slider-default .flickity-button { background-color: rgba(205, 29, 139, .3) !important;; border:1px solid #FFF;}
.ss-carroussel .slider-default .flickity-button:hover { background-color: #CD1D8B !important;}
.ss-carroussel .slider-default .flickity-prev-next-button .flickity-button-icon { fill: rgb(255, 255, 255) !important;}

@media screen and (min-width: 1280px) {
  .ss-carroussel .slider-default .flickity-button { background-color: transparent !important; border:1px solid #FFF;}
}
.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important }

/*card*/ 
.ss-carroussel .card-grid-body p:first-child { margin-bottom:0.25rem;}
.ss-carroussel .card-grid-body p:last-child { margin-bottom:0;}
.ss-carroussel .list-flag { margin-bottom: 0;}
.ss-carroussel .card-grid-footer p { text-align: right;}
/*content*/
.ss-carroussel h2 { margin-top:-2rem;}
/*wave top*/
.success-stories-curve-top { z-index:1; position: absolute; left: 0; right: 0; height: 100%; margin-top: 7.7rem;}
.success-stories-curve-top p { margin:0;} 
.success-stories-curve-top img {width: 103%;}
/*wave bottom*/ 
.success-stories-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; }
.success-stories-wave-bottom p { margin:0;} 
.success-stories-wave-bottom img { position:absolute; bottom:0; left:-1%; width: 102%;}


                               /*---HOME SS SECTION CTA REGISTER---*/
.ss-cta-register { position: relative; padding-top:4rem; padding-bottom: 6rem; background-color: #E5F7FE;}
.ss-cta-register .cols:last-child { margin-top: -3rem;}
/*HACK to remove empty p*/
.ss-cta-register .cols:first-child p:first-child { display: none;}
/*CARD*/
.ss-cta-register .card-grid-body img { margin-top:1rem; width: 80px}
.ss-cta-register .card-grid-text { margin:1rem 0 0 0;}
.ss-cta-register .card-grid-footer { text-align: right;}  


#ss-become-a-pilot { position: relative; z-index: 1000; padding-top: 4rem; }
#ss-become-a-pilot h3 { color: white; }
#ss-become-a-pilot p { color: white; }
#ss-become-a-pliot span { color: white; }
#ss-stories-get-inspired { padding-left: 2.5rem; padding-bottom: 0;}



.home-slider-news { background: #001E65; border-radius: 0px 0px 24px 24px; border: none!important;}
#bg-news-left { position: absolute; left: 0%; bottom: 0px; width: 15%; max-width: 180px; border-bottom-left-radius: 24px;}
#bg-news-right { position: absolute; right: 50px; bottom: 0px; height: 100%; z-index: 1; }
.news-info { display: flex; gap: 1rem; align-items: center;}
.news-slider-container { min-height: 78px; display: flex; justify-content: space-between; align-items: center; }
.home-slider-news p { margin: 0px!important; padding: 0px!important; }
.news-text { display: flex; align-items: center; }
.news-text > h3 { margin-bottom: 0px; color: white; z-index: 10;}
.home-slider-news-label {background: white!important; font-size: 18px; color: #D70058; z-index: 10;}
.news-cta { z-index: 10; }

@media screen and ( max-width: 768px ) {
	#bg-news-left { width: 100%; }
	#bg-news-right { right: -253px; bottom: 0px; width: 300px; }
	.news-info { padding-top: 1rem; padding-bottom: 1rem; }
	.news-cta { padding-bottom: 1rem; }
	.news-slider-container { flex-direction: column; }
}

CSS Stylesheet

.verifiable-credentials-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/600343491/bg-introduction-vc.svg");
background-position: top right; background-repeat: no-repeat; background-size: contain;}

.vc-history-cards .card-grid { max-width: 339px; padding: 34px 21px 20px; min-height: 250px; box-shadow: none; background: #F6F5F7; min-height: 449px; }
.vc-history-cards .card-grid-body { display: flex; flex-direction: column; justify-content: space-between; }
.vc-history-cards .card-grid-body > p:first-child, .vc-history-cards .card-grid-body > p:last-child { display: none; }
.vc-history-cards .card-grid-header > h3 { font-size: 20px; margin-bottom: 13px; }
.vc-history-cards .card-grid-footer > p { font-size: 14px; }

@media screen and (max-width: 768px) {
 	.btns-horizontal { flex-direction: column; }
	.vc-history-cards { display: flex!important; }
}

@media screen and ( max-width: 1088px) {
	.vc-history-cards .col-4 { width: 100%!important;}
	.vc-history-cards > p { display: flex; justify-content: center; align-items: center; }
    .vc-history-cards .arrow-right-history-section { transform: rotate(90deg); top: 0px!important; left: 50%; }
	.vc-history-cards { flex-direction: column; }
	.vc-history-cards .card-grid { max-width: none!important; width: 100%; }
	.vc-history-cards .card-grid+p { transform: rotate(90deg); margin-top: 1rem; }
}

#vc-history .vc-history-cards .col-4 { width: 31%; }
#vc-history .col-4 {padding: 0;}
#vc-history .col-4 > p:first-child, #vc-history .col-4 > p:last-child { display: none; }
#vc-history .line-seperator hr { background: #E8E7EB; height: 1px; border: none; margin:0;}
#vc-history .info-container { display: flex; align-items: center; gap: 15.5px; background: #f6f5f7; padding: 12px 16px; border-radius: 6px; width: fit-content; min-height: 48px;}
#vc-history .card-grid-header { padding: 40px 40px 24px; min-height: 156px;}
#vc-history .card-grid-header h3 { font-size: 32px; margin-bottom: 8px;}
#vc-history .card-grid-header p { margin-bottom: 0; }
#vc-history .card-grid-footer { display: flex; flex-direction: column; gap: 12px; padding: 40px 40px}
#vc-history .web-3-card { background: white; border: 1px solid #00B3EF; border-radius: 16px;}
#vc-history .web-3-card .info-container { background: #E6F7FD; }
#vc-history .arrow-right-history-section { position: relative; top: 40px; }


#vc-history .vc-web3-ssi_movement .col-4 { max-width: 345px; }
#vc-history .vc-web3-ssi_movement { border: 1px solid #00B3EF; margin-top: 2.5rem; position: relative; border-radius: 16px; display: flex; flex-direction: column; padding: 40px;}
#vc-history .vc-web3-ssi_movement::after { content: ''; height: 15px; width: 15px; position: absolute; background-color: white; border-top: #00B3EF solid 1px; border-left: #00B3EF solid 1px; transform: rotate(45deg); right: 15%; top: -8.6px; }
#vc-history .vc-web3-ssi_movement > div:first-child { margin-bottom: 0; padding-bottom: 0; }
#vc-history .vc-web3-ssi_movement > div:first-child > div:first-child { padding-left: 0; }
#vc-history .vc-web3-ssi_movement > div:nth-child(2) { padding-top: 0; }
#vc-history .vc-web3-ssi_movement h4 { margin-top: 1rem; }
#vc-history .vc-web3-ssi_movement .img-container { min-height: 88px; display: flex; align-items: center; }


.case-family_tabs { margin-bottom: 3rem0rem!important; }
.case-family_tabs ul { list-style: none;}
.case-family_tabs li {display: flex; align-items: center; justify-content: center; list-style: none; height: 72px; cursor: pointer; padding-right: 40px; padding-left: 40px;}
.case-family_tabs li:first-child { padding-left: 40px; }
.case-family_tabs li:last-child { padding-right: 40px; }
.case-family_tabs a { text-decoration: none; color: black; text-align: center; line-height: 1;}
.case-family_tabs { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 20px; list-style: none; background: rgba(255, 255, 255, 0.8); }
.case-family_tabs .active {background: #cd1d8b; display: flex; align-items: center; border-radius: 16px; color: white; padding-top: 16px; padding-bottom: 16px; }
/* .case-family_tabs .active a {color: white;} */
.num-active { display: none; }





 @media screen and ( max-width: 1074px ) {

	.case-family_tabs { flex-direction: column; }
	.case-family_tabs li { width: 100%; padding-left: 40px; justify-content: flex-start!important; }
	.active { width: 100%; justify-content: flex-start!important; }
}

@media screen and ( min-width: 1117px ) {

 .case-family_tabs li:hover, .case-family_tabs li:active { background : #ffb3d7; border-radius: 16px; color: white; }
}

#understand-eco-ebsi .case-family_tabs a { display: flex; flex-direction: column; align-items: start; gap: 4px;} 
.btns-horizontal { display: flex; gap: 1rem; margin-top: 2rem; }

...

Page tree

Versions Compared

Old Version 47

New Version 57

Key