Description
Blockquote (also called quote) consists of a block of text as a quotation.
It consist of:
- Text of the quote (mandatory) without quotation marks (added automatically by css)
- The Persons Name (mandatory), Position (optional) and Company Name (dependent)
- Because the quote can have different focus (Company giving the quote vs. Message of the quote) we will have two different stylings.
- Focus on quote (the quote is bolded): preferably when the text of the quote is shorter and contains an important message.
- Focus on company (the company is bolded): It is more important who is giving the quote, and the text of the quote ist expected to be longer in this case.
- A big visual quote visual can be displayed
- Above the citation (default and preferred)
- Below the citation (in case it is located below an image of the person or company)
- The image is not part of the Quote component. It is put in Context to the quote by using the Column Control Component or a variant of the Swiper Slider which will be defined later.
Usage
They are used to emphasize a text from somewhere else, like a customer opinion, a case study or project success story.
Blockquote Types
Blockquote is in fact only a (configurable) text. To have a blockquote with image this must be combined with "image" component - see examples below.
Placement
When the blockquote is placed in a narrow area it is better not to put an image. Placement in a narrow area is only recommended for short quotations.
Longer blockquotes should be placed in "Column Control" 4:8 or 8:4 and a picture. The main text in the widest column. The other column receives the image.
Blockquote Content
Blockquote are composed of the following elements:
- Text of the quote: mandatory (the main text)
- Company Name: optional
- Persons Name: mandatory
- Position of the person: optional
- Text alignment (configurable): Left or Center
- Big quote placement: Place the quote above or below the text
- Switch order of quote text: Place the text at top or bottom
- Focus: Focus on company or on quote
Demonstration (narrow)
On the right this is a simply blockquote in a "Content Layout container" (which is in a "Content Layout Container") and "Column Control" 6:6.
Properties of this blockquote (right):
Text of the quote: Lorem ipsum...
Company Name: ./. empty
Persons Name: Max Mustermann
Position of the person:./. empty
Text alignment: Center
Big quote placement: Place the quote above the text
Switch order of quote text: Place the text at top
Focus: Focus on quote
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Demonstration (wide) see below
This blockquote is combined with the image component. This blockquote in a "Content Layout container" (which is in a "Content Layout Container") and "Column Control" 4:8.
This blockquote has following (configurable) properties:
Text of the quote: Lorem ipsum...
Company Name: Company XYZ
Persons Name: Max Mustermann
Position of the person: Position in the company
Text alignment: Left
Big quote placement: Place the quote above the text
Switch order of quote text: Place the text at top
Focus: Focus on company
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Another demonstration (wide) see below
This is an blochquote in a "Content Layout container" (which is in a "Content Layout Container") and "Column Control" 8:4.
This blockquote has following (configurable) properties:
Text of the quote: Lorem ipsum...
Company Name: Company XYZ
Persons Name: Max Mustermann
Position of the person: Position in the company
Text alignment: Center
Big quote placement: Place the quote below the text
Switch order of quote text: Place the text at bottom
Focus: Focus on quote
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
How to build a Blockquote
1) Place the Blockquote into a 6 or 8-col column and drag a "Block Quote" component to this area (see illustration below).
2) Edit the different fields by filling them in with the desired values.
Please note:
- "Text of the quote" and "Persons Name" are mandatory.
All other fields are optional. - Insert the text of the quotes without quotes (like „” or « »).
They will be placed automatically and will be formatted according to the typographical rules adapted to the country language.