Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Div
idunderstand-eco-ebsi
classsection bg-terciary-10
Div
classcontainer
Div
classcols align-items-center
Div
classcol-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
classcols justify-content-center
Div
classcol-8 tabs hierarchy-first
Div
classtabs 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
classcols align-items-center
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
classcols
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
classcols
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
classcols
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 ) {

.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; }
Div
idsharing-benefits
classsection
Div
classcontainer
Div
classcols
Div
classcol-12
HTML
<h3 class="heading-deco secondary">What are the benefits of information sharing based on Verifiable Credentials?</h3>
Div
classcols
Div
classcol-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
classcol-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
classcol-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>

...