Blockquote element

The vf-blockquote highlights a section that is quoted from an external source.

github location npm version

Usage

The vf-blockquote should be used to highlight texts from external sources like quotes and testimonials. It should be used for more than decorative purposes, ensuring that the text being quoted is relevant to the content of the page and adds value to the content. This component is not optimised for mobile devices.

It should not be confused with a pull quote which highlights a section of text from the same source/page.

Quotes should be as concise as possible. The impact of the blockquote is diminished when it has long texts as this overwhelms the reader.

Provide proper attribution such as the name, source and relevant information to give credibility to the quote. The component allows you to add the image of the person, the name (Which can be linked to a profile or source page) and other attribution details.

The blockquote is designed to be used on a white background, it is advisable to avoid using it on backgrounds with gradients, images or other colours. If the background colour is changed, ensure the contrast ratio between the texts and the background meet accessibility standards.

When to use

  • Quoting external sources such as individuals, experts, publications etc.
  • Testimonials and feedback can be highlighted using the vf-blockquote.

When not to use

  • Self-quoting or usage as a pull quote should be avoided in the context of the page/content. This component should not be used to highlight a portion of text from the same content.
  • Vf-blockquotes should not be used solely for decorative purposes, ensuring that the quoted text adds value to the content.

Accessibility

  • This component targets WCAG 2.1 AA accessibility.

Angular

As of version 1.2.1 vf-blockquote has experimental Angular support. This package was generated with Angular version 15.2.0 and has been tested on application with Angular version 15.2.0.

  1. Install yarn add @visual-framework/vf-blockquote

  2. Import in your app.module

    import { VfBlockquoteAngularModule } from '@visual-framework/vf-blockquote/vf-blockquote.angular';
    
    @NgModule({
      imports: [VfBlockquoteAngularModule, YourOtherModules],
      ...
    })
    
  3. Can be used as

    <vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_imageurl]="'./assets/vf-icon--avatar.svg'"  [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
    
  4. Styling changes

    In angular.json add the following in architect -> build -> options -> assets:

    {
      "glob": "**/*",
      "input": "./node_modules/@visual-framework/vf-font-plex-mono/assets/IBM-Plex-Mono",
      "output": "./assets/fonts/IBM-Plex-Mono"
    },
    {
      "glob": "**/*",
      "input": "./node_modules/@visual-framework/vf-font-plex-sans/assets/IBM-Plex-Sans",
      "output": "./assets/fonts/IBM-Plex-Sans"
    }
    

    You should install vf-sass-starter for the styles and then add below code in your main SCSS file.

    $vf-font-plex-mono-prefix: '/assets/fonts';
    $vf-font-plex-sans-prefix: '/assets/fonts';
    @import '../node_modules/@visual-framework//vf-sass-starter/index.scss';
    @import "../node_modules/@visual-framework/vf-text/vf-text.scss";
    @import "../node_modules/@visual-framework/vf-profile/vf-profile.scss";
    @import '../node_modules/@visual-framework/vf-blockquote/vf-blockquote.scss';
    
  5. Usage:

    <vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_imageurl]="'./assets/vf-icon--avatar.svg'"  [blockquote_author_href]="'#'" [blockquote_author_details]="'Title and other details'"/>
    

React

As of version 1.2.1 vf-blockquote has experimental React support which has been tested on react version 18.2.0

  1. Install yarn add @visual-framework/vf-blockquote

  2. Import in the JS file where you want to include this component

    import VfBlockquote from '@visual-framework/vf-blockquote/vf-blockquote.react';
    
    Make sure you have the jsx support enabled with babel. Alternatively, you can also copy the vf-blockquote.react.js file from below to your react project and import as per the location.
    
  3. Can be used as

    <VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_imageurl="vf-icon--avatar.svg" blockquote_author_href="#" blockquote_author_details="Title and other details"/>
    
  4. Styling changes

    You should install vf-sass-starter for the styles and then add below code in your main SCSS file

    $vf-font-plex-mono-prefix: '~@visual-framework/vf-font-plex-mono/assets';
    $vf-font-plex-sans-prefix: '~@visual-framework/vf-font-plex-sans/assets';
    
    @import '~@visual-framework//vf-sass-starter/index.scss';
    @import "~@visual-framework/vf-profile/vf-profile.scss";
    @import "~@visual-framework/vf-text/vf-text.scss";
    @import '~@visual-framework/vf-blockquote/vf-blockquote.scss';
    
  5. Usage:

    <VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_imageurl="vf-icon--avatar.svg" blockquote_author_href="#" blockquote_author_details="Title and other details"/>
    

Variants

“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.”
Marion Burton
Title and other details
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "element",
"blockquote_text" : "“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.”",
"blockquote_author" : "Marion Burton",
"blockquote_author_details" : "Title and other details",


 }
%}
{% include "../path_to/vf-blockquote/vf-blockquote.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-blockquote', {
  "exampleMultiColumns" : "false",
  "component-type" : "element",
  "blockquote_text" : "“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.”",
  "blockquote_author" : "Marion Burton",
  "blockquote_author_details" : "Title and other details",
  
  }
%}
                
Angular syntax
<vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_details]="'Title and other details'"/>
                  
React syntax
<VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_details="Title and other details"/>
                  
HTML
<blockquote class="vf-blockquote vf-u-margin__left--800">

  <div>
    <div>“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.”</div>

    <footer class="vf-u-margin__top--600">
      <div>Marion Burton</div>
      <div class="vf-text-body--2">Title and other details</div>
    </footer>
  </div>
</blockquote>
              
“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.”
Marion Burton
Title and other details
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "element",
"variant" : "image",
"blockquote_text" : "“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.”",
"blockquote_author" : "Marion Burton",
"blockquote_author_imageurl" : "/assets/vf-profile/assets/vf-icon--avatar.svg",
"blockquote_author_details" : "Title and other details",


 }
%}
{% include "../path_to/vf-blockquote/vf-blockquote.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-blockquote', {
  "exampleMultiColumns" : "false",
  "component-type" : "element",
  "variant" : "image",
  "blockquote_text" : "“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.”",
  "blockquote_author" : "Marion Burton",
  "blockquote_author_imageurl" : "/assets/vf-profile/assets/vf-icon--avatar.svg",
  "blockquote_author_details" : "Title and other details",
  
  }
%}
                
Angular syntax
<vf-blockquote [blockquote_text]="'“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.”'" [blockquote_author]="'Marion Burton'" [blockquote_author_imageurl]="'./assets/vf-icon--avatar.svg'" [blockquote_author_details]="'Title and other details'"/>
                  
React syntax
<VfBlockquote blockquote_text="“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.”" blockquote_author="Marion Burton" blockquote_author_imageurl="vf-icon--avatar.svg"  blockquote_author_details="Title and other details"/>
                  
HTML
<blockquote class="vf-blockquote vf-u-margin__left--800">

  <img class="vf-profile__image vf-u-margin__right--600" src="/assets/vf-profile/assets/vf-icon--avatar.svg" alt="" loading="lazy" />
  <div>
    <div>“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.”</div>

    <footer class="vf-u-margin__top--600">
      <div>Marion Burton</div>
      <div class="vf-text-body--2">Title and other details</div>
    </footer>
  </div>
</blockquote>
              

Examples

“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.”
“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.”
Installation info

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

Sass/CSS

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. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.2.1

  • Changed: Modified the Blockquote component in line with stakeholder requirements and to improve consistency
  • Added : Angular support for Blockquote component
  • Added : React support for Blockquote component
  • Documentation: Updated the documentation for blockquote as per new implementation
  • Tracking issue

1.2.0

  • adds context if statement to make it useable in vf-11ty.
  • adds cite element.
  • adds vf-stack.
  • kept `` so it shouldn't break

1.1.1

  • changes any set- style functions to cleaner version

1.1.0

  • removes --pullquote variant as it was never properly finalised and implemented.

1.0.1 (2020-01-24)

  • Makes the CSS linter happy

1.0.0 (2019-12-17)

  • Initial stable release

Assets



File system location: components/vf-blockquote

Find an issue on this page? Propose a change or discuss it.