COMPONENT

c-quote

Demo Section

Each variation will be presented in the following sections.

Simple quote

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 quote

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 –

Technical Details

Bower versionGitter Chat

Quote

Description

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


Installation

Installation with Veams

veams install vc quote

Installation with Bower

bower install veams-component-quote --save


Fields

Settings

  • settings.quoteContextClass {String} [default] - Context class of component.
  • settings.quoteClasses {String} - Modifier classes for component.

Content

  • content.quoteContent {String} - Content text in blockquote.
  • content.quoteAuthor {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 –"
			}
		}
	}
}

c-quote

<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;
	}
}

Simple quote

<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>

Full quote

<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>