<div class="c-starter c-starter--simple c-starter--textual c-starter--padding ">
<p class="c-starter__title">Info</p>
<h3>In autostrada</h3>
<p>
<strong>A1</strong> (provenienti da Milano), prendere l'uscita Bologna Borgo Panigale.
</p>
<p>
<strong>A13</strong> (provenienti da Padova), prendere l'uscita Bologna Arcoveggio.
</p>
<p>
<strong>A14</strong> (provenienti da Ancona), prendere l'uscita Bologna San Lazzaro.
</p>
<p>
Maggiori informazioni al sito: <a href="#">Autostrade per l'Italia S.p.A.</a>
</p>
<h3>In tangenziale</h3>
<p>
In entrambi i sensi di marcia, prendere l'uscita 4 bis.
</p>
<a href="#" class="c-link c-link--primary">
<span>Calcola percorso</span>
<svg class="svg-24">
<use xlink:href="#ic_chevron_right_black_24px"></use>
</svg></a>
<p>
Puoi trovare maggiori info sugli accessi e le corsie riservate ai passegggeri su <a href="#">viabilità
aeroportuale</a>.
</p>
</div>
<div class="c-starter c-starter--simple c-starter--textual c-starter--padding {{ modifier }}">
<p class="c-starter__title">Info</p>
<h3>In autostrada</h3>
<p>
<strong>A1</strong> (provenienti da Milano), prendere l'uscita Bologna Borgo Panigale.
</p>
<p>
<strong>A13</strong> (provenienti da Padova), prendere l'uscita Bologna Arcoveggio.
</p>
<p>
<strong>A14</strong> (provenienti da Ancona), prendere l'uscita Bologna San Lazzaro.
</p>
<p>
Maggiori informazioni al sito: <a href="#">Autostrade per l'Italia S.p.A.</a>
</p>
<h3>In tangenziale</h3>
<p>
In entrambi i sensi di marcia, prendere l'uscita 4 bis.
</p>
{{> @link--primary link }}
<p>
Puoi trovare maggiori info sugli accessi e le corsie riservate ai passegggeri su <a href="#">viabilità
aeroportuale</a>.
</p>
</div>
{
"link": {
"text": "Calcola percorso",
"url": "#",
"modifier": "c-link--primary",
"svg": true
}
}
.c-starter {
margin-bottom: remify(16px);
padding-bottom: remify(16px);
&.c-starter--padding {
padding: remify(24px);
}
.c-title-trend & {
box-shadow: none;
padding: 0;
}
.c-canvas--map & {
margin-bottom: 0;
}
}
.c-starter__title {
text-transform: uppercase;
color: primary(night, 100);
font-weight: fw(bold);
margin-bottom: remify(16px);
.c-title-trend & {
color: primary(night, 80);
}
}
.c-starter li {
margin-bottom: remify(8px);
&:last-child {
margin-bottom: 0;
}
}
.c-starter li ul {
margin-top: remify(8px);
padding-left: remify(20px);
}
.c-starter li ul li {
list-style-type: disc;
}
.c-starter p {
margin-bottom: remify(16px);
}
.c-starter__map {
}
.c-starter__footer {
margin-top: remify(-16px);
display: flex;
align-items: center;
border-bottom-right-radius: remify(6px);
border-bottom-left-radius: remify(6px);
color: secondary(page, 100);
background-color: primary(sky, 120);
padding: remify(16px);
font-size: remify(14px);
@include min-screen (bp(tablet-p)) {
padding: remify(32px) remify(24px);
font-size: remify(16px);
}
p {
margin: 0 0 remify(16px) remify(24px);
font-weight: fw(bold);
}
a {
margin-left: remify(24px);
color: secondary(page, 100);
}
}
/*------------------------------------*\
Simple modifier
\*------------------------------------*/
.c-starter--simple {
background-color: #fff;
}
/*------------------------------------*\
Folder Icon modifier
\*------------------------------------*/
.c-starter--folders {
padding: remify(16px);
li a {
padding-left: remify(32px);
}
li.has-icon > a {
background-image: url(../../images/svgs/folders.svg);
background-repeat: no-repeat;
background-position: center left;
background-size: contain;
}
}
/*------------------------------------*\
Login modifier
\*------------------------------------*/
.c-starter--login {
.c-form .c-button--submit {
display: block;
margin-top: remify(16px);
}
}
/*------------------------------------*\
Inverted modifier
\*------------------------------------*/
.c-starter--inverted {
background-color: primary(night, 80);
color: #fff;
border-radius: remify(16px);
margin-bottom: remify(32px);
.c-starter__title,
a {
color: currentColor;
}
}
/*------------------------------------*\
Archive modifier
\*------------------------------------*/
.c-starter--archive {
li.is-nested {
margin-top: remify(16px);
padding: remify(12px) remify(16px);
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
.c-starter__input-toggle,
.c-starter__target {
display: none;
}
.u-chkbx-toggle:checked ~ .c-starter__target {
display: block;
}
.c-starter__toggle {
position: relative;
display: block;
}
.c-starter__toggle:after {
content: '\276F';
color: #fff;
display: block;
position: absolute;
top: remify(0px);
font-size: remify(16px);
right: remify(0px);
transform: rotate(90deg);
}
.u-chkbx-toggle:checked ~ .c-starter__toggle:after {
transform: rotate(-90deg);
color: primary(sun, 120);
}
}
/*------------------------------------*\
Textual modifier
\*------------------------------------*/
.c-starter--textual {
h3 {
font-size: 125%;
font-weight: fw(regular);
margin-bottom: remify(8px);
@include min-screen(bp(tablet)) {
font-size: 150%;
}
}
.c-link {
margin-bottom: remify(24px);
}
}
/*------------------------------------*\
Feed modifier
\*------------------------------------*/
.c-starter--feed {
padding: remify(24px);
border-radius: remify(16px);
@include shadow(medium);
background-color: secondary(soft, 100);
background: linear-gradient(180deg, #FFFFFF 39%, #EAF2FB 135.82%, #F4F4F4 144.03%);
border: 2px solid primary(night,10);
@include min-screen (bp(tablet-p)) {
ul { max-width: remify(250px); }
}
}
/*------------------------------------*\
Alert modifier
\*------------------------------------*/
.c-starter--alert {
border: 2px solid status(negative);
}
/*------------------------------------*\
Identity modifier
\*------------------------------------*/
.c-starter--identity {
.identity-image {
display: inline-block;
@include shadow(medium);
padding: remify(16px);
border-radius: remify(16px);
margin-bottom: remify(24px);
margin-right: remify(24px);
img {
max-width: remify(110px);
}
}
.fulltext p,
.less {
display: none;
}
.fulltext:target p,
.fulltext:target .less {
display: block;
}
.fulltext:target .more {
display: none;
}
}
.c-starter__app-links {
p {
margin-bottom: remify(16px);
}
li {
display: inline-block;
margin-right: remify(16px);
}
}
No notes defined.