<div class="quote">
<div class="quote__line col-xs-mr-ml ">
<div class="quote__text">
<span class="title-m
">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a <a href='#'> piece of classical Latin literature</a> from 45 BC, making it over 2000 years old.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-s">- Lorem ipsum (optional)</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
<div class="quote">
<div class="quote{{#if hasIcon}}__icon{{else}}__line{{/if}} col-xs-mr-ml {{#if hasIcon}}col-sm-8{{/if}}">
{{#if hasIcon}}
{{> @icon icon}}
{{/if}}
<div class="quote__text">
{{> @title titleM }}
{{#if hasBodycopyS}}
{{> @bodycopy bodycopyS }}
{{/if}}
</div>
</div>
</div>
{
"titleM": {
"type": "-m",
"text": "Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a <a href='#'> piece of classical Latin literature</a> from 45 BC, making it over 2000 years old."
},
"hasBodycopyS": true,
"bodycopyS": {
"type": "-s",
"text": "- Lorem ipsum (optional)"
}
}
.quote {
@media(--viewport-xs-max) {
margin-right: 0;
margin-left: 0;
}
&__icon{
display:flex;
align-items: center;
max-width: 100%;
@media(--viewport-xs-min) {
gap:16px;
padding:8px 16px 16px 16px;
}
@media(--viewport-ms-min) {
gap:20px;
padding:16px 32px 32px 32px;
}
.icon {
width:56px;
height:56px;
@media(--viewport-xs-min) {
width:32px;
height:32px;
}
@media(--viewport-ms-min) {
width:40px;
height:40px;
}
@media(--viewport-sm-min) {
width:56px;
height:56px;
}
&.accent {
fill: var(--color-icon-accent);
}
}
.quote__text {
display:flex;
flex-flow:column;
align-items: center;
@media(--viewport-xs-min) {
gap:16px;
}
.title-m, .bodycopy-s {
text-align:center;
display: block;
color: var(--color-text);
}
}
}
&__line {
border-left: solid 2px var(--color-accent);
padding:20px;
gap:20px;
padding:20px;
max-width: 100%;
.quote__text {
display:flex;
flex-flow: column;
gap:20px;
.title-m, .bodycopy-s {
text-align:left;
}
}
}
&__text {
.title-m, .bodycopy-s {
color: var(--color-text);
}
a {
color:var(--color-text-link-secondary);
text-decoration:underline;
}
}
}
No notes defined.