Each variation will be presented in the following sections.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus, aliquid assumenda cum deleniti doloribus est facere illo maiores odit quas quos ratione rerum sapiente sequi tenetur totam voluptatibus voluptatum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus, aliquid assumenda cum deleniti doloribus est facere illo maiores odit quas quos ratione rerum sapiente sequi tenetur totam voluptatibus voluptatum.– Albert Einstein –
A simple quote component. The specs says:
The
<blockquote>
element represents a section that is quoted from another source. Content inside a<blockquote>
must be quoted from another source, whose address, if it has one, may be cited in the cite attribute
veams install vc quote
bower install veams-component-quote --save
String
} [default] - Context class of component.String
} - Modifier classes for component.String
} - Content text in blockquote.String
} - Author of quote.{
"variations": {
"simple": {
"docs": {
"variationName": "Simple quote",
"sectionCenter": true
},
"settings": {
"quoteContextClass": false
},
"content": {
"quoteContent": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus, aliquid assumenda cum deleniti doloribus est facere illo maiores odit quas quos ratione rerum sapiente sequi tenetur totam voluptatibus voluptatum."
}
},
"full": {
"docs": {
"variationName": "Full quote",
"sectionCenter": true
},
"settings": {
"quoteContextClass": false
},
"content": {
"quoteContent": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus, aliquid assumenda cum deleniti doloribus est facere illo maiores odit quas quos ratione rerum sapiente sequi tenetur totam voluptatibus voluptatum.",
"quoteAuthor": "– Albert Einstein –"
}
}
}
}
<div class="c-quote{{#if settings.quoteContextClass}}--{{ settings.quoteContextClass}}{{else}}--default{{/if}}{{#if
settings.quoteClasses}} {{ settings.quoteClasses}}{{/if}}" data-css="c-quote">
<blockquote class="quote__content">
{{content.quoteContent}}
</blockquote>
{{#if content.quoteAuthor}}
<cite class="quote__author">{{content.quoteAuthor}}</cite>
{{/if}}
</div>
/* ===================================================
COMPONENT: QUOTE
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-quote"] {
.quote__content {
&::before {
}
}
.quote__author {
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-quote--default {
max-width: 70%;
text-align: left;
position: relative;
.quote__content {
padding-left: 5rem;
font-size: 3rem;
font-weight: 300;
line-height: 120%;
font-style: italic;
&::before {
content: '"';
display: inline;
font-weight: 700;
font-size: 11rem;
position: absolute;
left: -2rem;
top: 2.5rem;
}
}
.quote__author {
display: block;
padding-left: 5rem;
margin-top: 1rem;
font-size: 2rem;
font-weight: 700;
text-align: right;
}
}
<div class="c-quote--default" data-css="c-quote">
<blockquote class="quote__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus, aliquid assumenda cum deleniti doloribus est facere illo maiores odit quas quos ratione rerum sapiente sequi tenetur totam voluptatibus voluptatum.
</blockquote>
</div>
<div class="c-quote--default" data-css="c-quote">
<blockquote class="quote__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus, aliquid assumenda cum deleniti doloribus est facere illo maiores odit quas quos ratione rerum sapiente sequi tenetur totam voluptatibus voluptatum.
</blockquote>
<cite class="quote__author">– Albert Einstein –</cite>
</div>