Blockquote Component

npm version

About

A way to quote and highlight text.

The pullquote variant will be a decorative variation but has yet to be implemented, it may take inspiration from the VF 1.3 pullquote.

Install

This component is distributed with npm. After installing npm, you can install the vf-blockquote with this command.

$ yarn add --dev @visual-framework/vf-blockquote

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-blockquote/index.scss";

Make sure you import Sass requirements along with the modules.

File system location: components/vf-blockquote

Variants

Variant: Default live element

Nunjucks demo

{% render '@vf-blockquote--default', {
  "component-type": "element",
  "text": "“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“"
} %}

Sample output

“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“

Sample output as HTML

<blockquote class="vf-blockquote">“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“</blockquote>

Assets

Variant: Pullquote live element

Nunjucks demo

{% render '@vf-blockquote--pullquote', {
  "component-type": "element",
  "text": "“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“"
} %}

Sample output

“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“

Sample output as HTML

<blockquote class="vf-blockquote vf-blockquote--pullquote">“Look back to move forwards” is a well-known saying. Thus, I recently turned to VF’s archivist, Anne-Flore Laloë, who helped me to search VF’s amazing archive to learn how VF has depicted itself through the years. Maybe knowing more about our first visual identity could help us better.“</blockquote>

Assets

All components in this design system

This page is part of the components section.