Intro component

About

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.

Usage

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 %}

Content

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:

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

Install

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

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

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

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

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack