Blockquote Component

Blockquote is the component for adding a quote from a reference sources. Bissetii uses the standard W3C HTML tag for rendering Blockquote's content.

This component is available starting from v1.11.0.

Hugo

Hugo supports list seamlessly so no special development is required.

Go

Coming Soon.

HTML

Bissetii supports List component seamlessly across multiple output formats. Additionally, starting from version v1.13.0, the use of CSS variable is vital for its upgrade from v1.12.5.

Bissetii HTML codes for this component are the same for Vanilla HTML5 and AMPHTML.

The common Blockquote HTML code pattern is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<blockquote cite="https://loremipsum.io/">
	<p><b>Lorem Ipsum</b></p>
	<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<cite>John Smith, 2021</cite>
</blockquote>

This will render as:

CSS

Bissetii provided a list of CSS variables dedicated for blockquote styling alteration without needing to recompile Sass. These variables are best applied directly to the blockquote HTML tags. Example:

1
2
3
4
5
6

<blockquote style="--blockquote-background-color: none;">
	...
	<cite style="--blockquote-cite-font-style: bold;">
		...
	</cite>
</blockquote>

--blockquote-color

Affects the text color inside the entire <blockquote>. The acceptable value shall be compatible with color: CSS field. The default is var(--color-grey-800).

--blockquote-background-color

Affects the background color of the entire <blockquote>. The acceptable value shall be compatible with background-color CSS field. The default is var(--color-grey-50).

--blockquote-border

Affects the border of the entire <blockquote> in all directions. The acceptable value shall be compatible with border: CSS field. The default is 0.1rem solid var(--color-grey-800).

--blockquote-border-left

Affects the border of the entire <blockquote> only in left direction. The acceptable value shall be compatible with border-left: CSS field. The default is 0.5rem solid var(--color-grey-800).

--blockquote-border-radius

Affects the edge roundness of the entire <blockquote>. The acceptable value shall be compatible with border-radius: CSS field. The default is 0.4rem.

--blockquote-margin

Affects the margin spacing of the entire <blockquote>. The acceptable value shall be compatible with margin: CSS field. The default is 2.1rem 0.

--blockquote-padding

Affects the padding spacing of the entire <blockquote>. The acceptable value shall be compatible with padding: CSS field. The default is 1rem 1.5rem.

--blockquote-font-style

Affects the font style of the entire <blockquote>. The acceptable value shall be compatible with font-style: CSS field. The default is italic.

--blockquote-print-break-inside

Affects the page breaking inside the <blockquote>. The acceptable value shall be compatible with break-inside: CSS field. The default is avoid.

--blockquote-cite-display

Affects the display type of the <cite> inside <blockquote>. The acceptable value shall be compatible with display: CSS field. The default is block.

--blockquote-cite-margin

Affects the margin spacing of the <cite> inside <blockquote>. The acceptable value shall be compatible with margin: CSS field. The default is 1rem auto.

--blockquote-cite-font-size

Affects the font size of the <cite> inside <blockquote>. The acceptable value shall be compatible with font-size: CSS field. The default is larger.

--blockquote-cite-font-style

Affects the font style of the <cite> inside <blockquote>. The acceptable value shall be compatible with font-style: CSS field. The default is italic.

--blockquote-cite-text-align

Affects the text alignment of the <cite> inside <blockquote>. The acceptable value shall be compatible with text-align: CSS field. The default is center.

Javascript

This component does not rely on any Javascript.

Sass

Depending on release version, the Sass files work differently. Bissetii does not package Sass codes explictly so please view them via the git repository.

v1.13.0 and Above

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s Sass codes are available at the following location:

pkg/components/internal/blockquote

v1.12.5 and Before

assets/css/bissetii/modules/core/_Blockquote.scss

Researches

Here are the researches done to ensure Blockquote component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Blockquote component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.