1.5.1 • Public • Published

Intro component

npm version


The vf-intro component is to be used as the main title of a page or section where you need to include some additional text in a larger typeface. The vf-hero can take a heading, lede text, and paragraph(s) of text. It can also include a badge on the heading which can be a link.


Use in vf-eleventy

To use this component in a vf-eleventy project you will need to set the context for the content to pass through from the nunjucks file associated yaml file and include it.

{% set context = UniqueContextName %}
{% include containers.vf_intro %}

note: due to how nunjucks handles special characters we have remove the @ at sign and need to replace the - hyphen used for an _ underscore to { include } a component or container. As shown above instead of writing something like { include containers.@vf-intro } we need to type { include containers.intro }

You may wish to make use of some of your projects side specific data or content. To do this you will need to set the relevant items of content before you {% include ... %} the component. Note: If you also declare this content in the .yml file it will take precedence over the inlined code.

For example. If you wanted to make use of your projects siteConfig information. You can write out the inclusion of the component in you pages .njk file like so:

{% set context = UniqueContextName %}
{% set vf_intro_heading = siteConfig.siteInformation.short_description %}
{% include containers.intro %}


The vf-intro allows for a variety of text.

content type variable description
text vf_intro_heading
text vf_intro_phase
url vf_intro_heading_href
text vf_intro_lede
group vf_intro_text
text intro_text

The vf-intro_phase, vf_intro_heading_href, vf_intro_lede, vf_intro_text, and intro_text are all optional.

To include intro_text you will have to nest and indent the content inside/underneath the vf_intro_text in the .yml file, like:

  - This is an example of intro text paragraph.
  - This is an example of a second intro text paragraph.


This repository is distributed with npm. After installing npm and yarn, you can install with this command.

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


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-intro/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter




Package Sidebar


npm i @visual-framework/vf-intro

Weekly Downloads





Apache 2.0

Unpacked Size

41.4 kB

Total Files


Last publish


  • bhushan-ebi
  • pacope92
  • ebiwebdev
  • sandykadam
  • khawkins98