What is a blockquote widget and how to use it

Undraw My Documents

About

A blockquote component is a content with a citation.

A blockquote is an extract from another source and is set appart with a citation.

A pullquote is an typographic effect that quotes words of the current article

Syntax

A blockquote has three type:

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

where:

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

Example

Basic

Card blockquote

The card blockquote is the default type.

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

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

Nico

Typographic Blockquote

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

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

Nico

With a class

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

<blockquote class="p-4 m-4 mx-auto" border-color=blue 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

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

With a heading and a header

A heading is supported in the card blockquote.

  • Input:
<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>
  • Output:
Work
True Work

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

Nico

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|}}
<header>True Work</header>
<blockquote typo>
The true work does not reveal itself until you get into.
<cite>Nico</cite>
</blockquote>
</card>
Teaser Image 2
True Work

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

Nico

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 [[:docs:content: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

Teaser Image 1

A Blockquote without citation.

Teaser Image 2

My Blockquote With Citation

Citation

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>

Tweet

For more information on tweet, see the corresponding page

<blockquote width="300px">
<cite>[[https://twitter.com/themaxburns/status/1372630627611201536]]</cite>
</blockquote>




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap UI - Block

A block component is a component that wraps/encapsulate: content such as text, image,... other block component If the component should start at a new line or expand on multiple line and you can...
Card Illustration
ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action
Undraw Add Content Re Vgqa
ComboStrap UI - Cite

The cite element will give credit to a portion of text. It can go anywhere but you put it mostly in a blockquote. Markup Output: You can style them. For instance, with a blue color Markup...
Undraw My Documents
ComboStrap UI - Header

header is the top location of a page or of a component. Combostrap supports: the modification of the page header with the header slot the definition of an header in the following component: ...
Undraw Website Builder Re Ii6e
ComboStrap UI - Masonry

masonry is a layout component. Its children are laid out like a mason-fitting stones in a wall (placing elements based on available vertical space). This layout is handy when you want to lay out a list...
Undraw My Documents
Float an element in ComboStrap

Float permits to print text along the side of a component
Tweet Embeded Tweet
How to embed a tweet in your ComboStrap pages

This article shows you the tweet web component and how you can use it to embed a tweet in your pages



Task Runner