Visual Framework
Visual Framework
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.
vf-blockquote.Vf-blockquotes should not be used solely for decorative purposes, ensuring that the quoted text adds value to the content."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.
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.
includeYou'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 = {
"component-type" : "element",
"blockquote_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.",
"blockquote_citation" : "Someone <a href="#">Really F. Amous</a> said this.",
}
%}
{% include "../path_to/vf-blockquote/vf-blockquote.njk" %}
renderThis 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', {
"component-type" : "element",
"blockquote_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.",
"blockquote_citation" : "Someone <a href="#">Really F. Amous</a> said this.",}
%}
<blockquote class="vf-blockquote | vf-stack vf-stack--400">
<p class="vf-blockquote__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.</p>
<footer class="vf-blockquote__footer">
<cite class="vf-blockquote__citation">Someone <a href="#">Really F. Amous</a> said this.</cite>
</footer>
</blockquote>
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. You can use a project boilerplate or the vf-sass-starter
if statement to make it useable in vf-11ty.cite element.vf-stack.set- style functions to cleaner version--pullquote variant as it was never properly finalised and implemented.
File system location: components/vf-blockquote
Find an issue on this page? Propose a change or discuss it.