Page History

Excerpt

Div

id	guidance-cta
class	section

Div

class	container

Div

class	cols

Div

class	col-6

Html-bobswift

<div class="card-grid">

<div class="card-grid-body">
<div class="guidance-cta-col">

<div class="guidance-cta-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/illu-calendar.png"> 
</div>

<div class="guidance-cta-col-text">
<p>Explore the benefits of the Once-Only Technical System and its development by registering for webinars and other events.</p> 
</div>

</div>
</div>

<div class="card-grid-footer">
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Events+calendar"><span>Go to events</span><span class="ico-cta-forward"></span></a></p>
</div>

</div>

Div

class	col-6

Html-bobswift

<div class="card-grid">

<div class="card-grid-body">
<div class="guidance-cta-col">

<div class="guidance-cta-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/604504755/illu-introduction.png"> 
</div>

<div class="guidance-cta-col-text">
<p>Understand how the Once-Only Technical System decentralized high-level architecture connects public authorities so that they can exchange evidence at the request of a citizen or business.</p> 
</div>

</div>
</div>

<div class="card-grid-footer">
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Architecture"><span>Go to OOTS architecture</span><span class="ico-cta-forward"></span></a></p>
</div>

</div>

CSS Stylesheet

#guidance-cta .card-grid { padding:5rem 3.5rem; height: 90% !important; background: #F3F4F7; box-shadow:none;} 
#guidance-cta .card-grid .guidance-cta-col .guidance-cta-col-illu img {width: 120px;}  

@media screen and (min-width: 1280px) {
	#guidance-cta .card-grid .guidance-cta-col { display:flex; align-items: center;}
	#guidance-cta .card-grid .guidance-cta-col .guidance-cta-col-illu { width: 30%;}
	#guidance-cta .card-grid .guidance-cta-col .guidance-cta-col-text { width: 70%;}
	#guidance-cta .card-grid .card-grid-footer { padding-left: 30%;}
}

#guidance_navigation {position: absolute !important;}

/*---USER JOURNEY PROTOTYPE---*/
#user-journey-prototype { /*background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/613549035/bg-user-journey-prototype.svg") no-repeat top center;*/}
#user-journey-prototype .cols { justify-content:center;}
#user-journey-prototype .cols .col-8 { padding-top:0; padding-bottom: 0;}
#user-journey-prototype .card-grid { padding:5rem 3.5rem; height: 90% !important; background: #F3F4F7; box-shadow:none;} 
#user-journey-prototype .card-grid .user-journey-prototype-cta-col .user-journey-prototype-cta-col-illu img { width: 120px;}

@media screen and (min-width: 1280px) {
	#user-journey-prototype .card-grid .user-journey-prototype-cta-col { display:flex; align-items: center;}
	#user-journey-prototype .card-grid .user-journey-prototype-cta-col .user-journey-prototype-cta-col-illu { width: 25%;}
	#user-journey-prototype .card-grid .user-journey-prototype-cta-col .user-journey-prototype-cta-col-text { width: 75%;}
	#user-journey-prototype .card-grid .card-grid-footer { padding-left: 25%;}
}

#user-journey-prototype + p:empty { display: none; border:1px solid red;}

Div

style	display:none;
id	user-journey-prototype
class	section

Div

class	container

Div

class	cols

Div

class	col-8

Html-bobswift

<div class="card-grid">

<div class="card-grid-body">
<div class="user-journey-prototype-cta-col">

<div class="user-journey-prototype-cta-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/613549035/illu-user-journey-prototype.png"> 
</div>

<div class="user-journey-prototype-cta-col-text">
<p>Understand how the Once-Only Technical System connects public authorities so that they can exchange evidence at the request of a citizen or business, by navigating our prototype.</p> 
</div>

</div>
</div>

<div class="card-grid-footer">
<p><a class="btn ghost" href="https://www.figma.com/proto/4SyUgc8mKqMBkyk96AFw2L/OOTS-user-journey?page-id=16164%3A35647&node-id=9524-49289&viewport=681%2C895%2C0.02&t=30kRwBNTO5aJv3OP-1&scaling=min-zoom&starting-point-node-id=9524%3A49289"><span>Go to the prototype</span><span class="ico-cta-forward"></span></a></p>
</div>

</div>

Page tree

Versions Compared

Old Version 15

New Version 16

Key