ComboStrap UI - Blockquote

Table of Contents

1 - About

A blockquote component is a content with a citation.

3 - Syntax

A blockquote has two type: 

<blockquote type="card">
<header>My Header</header>
=== Title === or <title>Title</title>
content
<cite>The reference</cite>
</blockquote

where:

A card blockquote is just a shortcut that wraps the typographic blockquote in a card.

header is only available since version 1.4

4 - Example

4.1 - Basic

4.1.1 - Card blockquote

<blockquote>
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
The true work does not reveal itself until you get into.
Nico

4.1.2 - Typographic Blockquote

<blockquote typo>
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
The true work does not reveal itself until you get into.
Nico

4.2 - With a class

As a superset HTML element, you can add your own class or style 

<blockquote class="p-4 m-4 mx-auto" style="border-color:blue;max-width:400px">
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
The true work does not reveal itself until you get into.
Nico

4.3 - With a header

An header is supported in the card blockquote. 

<blockquote width="300px" align="center">
<header>True work</header>
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
True work
The true work does not reveal itself until you get into.
Nico

4.4 - With a title and a header

A title is supported in the card blockquote. 

<blockquote width="300px" align="center">
<header>Work</header>
=== True Work ===
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
Work

True Work

The true work does not reveal itself until you get into.
Nico

4.5 - In a card

You can wrap a typographic blockquote in a card in order to add an image header . 

<card width="18rem">
{{teaser_image_2.jpg?25|}}
<header>True Work</header>
<blockquote typo class="mb-0">
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
</card>
True Work
The true work does not reveal itself until you get into.
Nico

This will output the Bootstrap blockquote card of the documentation

4.6 - Card Columns

A blockquote with the type card can also be wrapped in the card-columns layout component. 

<card-columns>
 
<blockquote>
A Blockquote is wrapped by default in a [[card|card]] 
<cite>Say the [[card|card]]</cite>
{{::teaser_image_1.png?400}}
</blockquote>
 
<blockquote>
A Blockquote without [[cite|citation]].
{{::teaser_image_2.jpg}}
</blockquote>
 
<blockquote>
My Blockquote With Citation
<cite>Citation</cite>
</blockquote>
 
 
</card-columns>
A Blockquote is wrapped by default in a card
A Blockquote without citation. teaser_image_2.jpg
My Blockquote With Citation
Citation

4.7 - Blockquote with other components (Math)

A card blockquote accepts any other components

Example with Math 

<blockquote>
<MATH>
\begin{array}{lrl}
\text{errors} & =&  (\text{more code})^2 \\
e & = & mc^2
\end{array}
</MATH>
<cite>[[twitter>ypriverol/status/603134562399559680/photo/1|Brilliant]]</cite>
</blockquote>

  • Result

<MATH> \begin{array}{lrl} \text{errors} & =& (\text{more code})^2 \\ e & = & mc^2 \end{array} </MATH>
Brilliant