Nougat Predominant Middleware


    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



    npm i @visual-framework/vf-intro

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    41.4 kB

    Total Files


    Last publish


    • khawkins98