Page History

Div

class	section

Div

class	container

Div

class	cols justify-content-between

Div

class	col-5

Html-bobswift

<h1 class="heading-deco terciary">EBSI Verifiable Credentials</h1> 
<p>Reducing the time and cost of verification is a challenge that cannot be met with blockchain alone. EBSI's Verifiable Credentials Use Case Family focuses on making information easy to verify, but impossible to fake.</p>

<a href="https://ec.europa.eu/digital-building-blocks/sites/display/EBSIDOC/" class="btn secondary outline anchor-smooth-scroll">
Explore our specifications
</a></p>

Div

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267160/Verifiable%20Credentials_Isometric.png?api=v2
alt	What is EBSI Illustration
class	img-fluid img-right

CSS Stylesheet

/*--- HACK REMOVE TABLE FILTER ---*/
.tf-inline-btn-container { display: none !important; border:1px solid red;}
div.tablefilter-outer-wrapper .tf-floating-btn-container { display: none !important; border:1px solid red;}

/*--- 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:0 2rem 1rem 2rem;}
/*hack confluence*/
.card > p:first-child { display:none; border:1px solid red;}
@media screen and (max-width: 768px) {
  .card-content-custom .card-content img { display: 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: -50px;}
.slider-default .flickity-prev-next-button.next { right: -50px;} 
/*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 (max-width: 768px) {
  .slider-default .flickity-prev-next-button.previous { left: -15px;}
  .slider-default .flickity-prev-next-button.next { right: -15px;}
}

Div

id	explained
class	section pt-0

Div

class	container

Div

class	cols mb-0

Div

Html-bobswift

<h2 id="VCExplained">Verifiable Credentials Explained</h2>
<p>All Verifiable Credentials have in common that they are based on a self-sovereign information sharing pattern where the Holders (subjects) of credentials are in control of how, when, and by whom their information is verified, via an EBSI Conformant wallet. This all is done by implementing the W3C's Verifiable Credentials standard, to ensure wide adoption and compatibility. Below you will find a series of publications that will walk you through the technologies that make it possible for Public Administrations and Businesses to easily verify and trust information received directly from Citizens (or Businesses).</p>

Div

class	slider-default

News Slider

buttonsColor	#0049B0
displayTime	6000
newsText	full_content
color	white
spacesSelected	EBSI
showStats	false
link	false
showSpace	false
showAuthor	false
showDate	false
labels	ebsi-slider-abous-us
navigation	true
showError	true
maxResults	5
sortOrder	created
width	100%
contentType	page
bullets	true

Div

class	ss-cta-register-wave-top

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">

Div

id	ss-cta-register
class	section ss-cta-register

Div

class	container

Div

class	cols justify-content-center

Div

class	col-12 text-center

Div

class	cols

Div

class	col-12

Or do you want to explore more?

Div

class	cols

Div

class	col-4

Html-bobswift

<div class="card-grid">
<div class="card-grid-body">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/illu-early-adopters-rocket.png" alt="">
<p class="card-grid-text"><strong>Explore our Success Stories overview</strong>  and check the demos.</p>
</div> 
<div class="card-grid-footer">
<p><a class="link-cta text-secondary" href="https://ec.europa.eu/digital-building-blocks/sites/x/AARJIg"><span>Explore</span></a></p>
</div>
</div>

Div

class	col-4

Html-bobswift

<div class="card-grid">
<div class="card-grid-body">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/illu-specifications-documents.png" alt="">
<p class="card-grid-text"><strong>Explore the specifications</strong> in details by consulting the VC Playbook.</p>
</div> 
<div class="card-grid-footer">
<p><a class="link-cta text-secondary" href="https://ec.europa.eu/digital-building-blocks/sites/x/6YEvHQ"><span>Explore</span></a></p>       
</div>
</div>

CSS Stylesheet

/*---SS SECTION INTRODUCTION---*/
.success-stories-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-terciary.svg");
background-position: bottom right; background-repeat: no-repeat; background-size: cover;}

/*---SS SECTION FIRST PILOT---*/
.ss-first-pilot  { background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/575210496/bg-curve-half-right-secondary.svg"); background-position: bottom right; background-repeat: no-repeat; background-size: cover;}
.ss-first-pilot .container { margin-bottom: 2rem;}
.ss-first-pilot .card-grid-body .list-flag { margin-top:1rem; margin-bottom:0;}
.ss-first-pilot .card-grid-footer { text-align:right;}

/*---SS SECTION IMPORTANCE ECOSYSTEM---*/
/*wave top*/
.ss-importance-ecosystem-wave-top {  position:relative; height:8rem; background-color: #E5F7FE;}
.ss-importance-ecosystem-wave-top p { margin:0;} 
.ss-importance-ecosystem-wave-top img { position:absolute; top:-1px; left:-1%; width: 102%;}
/*content*/
.ss-importance-ecosystem { background-color: #E5F7FE;}
.ss-importance-ecosystem .cols:first-child { margin-top:-4rem;}
.ss-importance-ecosystem .list-numeral li p:first-child { margin-top:1rem;}

/*---SS SECTION EBSI ECOSYSTEM---*/
.ss-ecosystem h2 { margin-bottom: 0;}

/*---SS SECTION EBSI ECOSYSTEM---*/ 
.ss-actors {  margin-top:-3.5rem;}
.ss-actors [class*="ss-col-actor"] { padding-top: 2rem; padding-bottom: 2.5rem; border-bottom:1px solid #E3E2E6;} 
.ss-actors [class*="ss-col-actor"] p:last-child {margin-bottom:0;}

@media only screen and (max-width: 768px) {
.ss-actors [class*="ss-col-actor"].ss-actor-no-border-mobile { border:none;}
.ss-actor-no-mobile { display:none !important;}
}

@media only screen and (min-width: 769px) {
.ss-actors [class*="ss-col-actor"].ss-actor-no-border-desktop { border:none;}
}

.ss-actor-list-label { padding: 0;}
.ss-actor-list-label li {list-style: none; display: inline-block;}
.ss-actor-list-label li, .ss-actor-label { margin:0.25rem 1rem 0 0; padding:4px 12px; letter-spacing:1px; background-color: #FFCCE4; border-radius: 6px;}

/*---SS SECTION CTA REGISTER---*/
/*wave top*/
.ss-cta-register-wave-top { z-index:1; margin-top:-1rem; position:relative; height:8rem; background-color: #E5F7FE;}
.ss-cta-register-wave-top p { margin:0;} 
.ss-cta-register-wave-top img { position:absolute; top:-1px; left:-1%; width: 102%;}
/*content*/
.ss-cta-register { z-index:2; position: relative; margin-top:-2rem; padding-top:0; 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;}

Page tree

Versions Compared

Old Version 16

New Version 17

Key

Or do you want to explore more?