This repository is distributed with npm. After installing npm and yarn, you can install vf-profile 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.
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.
vf-eleventyTo 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 contaienrs.@vf-intro } we need to type {% include vf_intro }
You may wish to make use of some of your projects side specifc 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 variet 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.
File system location: components/vf-intro
{% render '@vf-intro--default', {
"component-type": "container",
"vf_intro_heading": "Cancer",
"vf_intro_lede": "Cancer is a generic term for lots of different diseases in which cells divide many more times than usual. This abnormal growth can affect many cell types in almost any part of the body.",
"vf_intro_text": [
"Cancer is a multi-stage process. Normal cells begin to divide abnormally, spreading beyond their normal boundaries, and abnormal tissue growth causes swellings called tumours to form. Tumours can be benign – with no harmful effect on the body – or malignant, invading healthy tissue and interfering with normal bodily functions.",
"There are more than 100 types of cancer and symptoms vary depending on the type. <a class=\"vf-link\" href=\"JavaScript:Void(0);\">Read more about Cancer</a>."
],
"vf_intro_badge": {
"style": [
"phases"
],
"text": "alpha",
"theme": "primary",
"badge_href": "JavaScript:Void(0);"
}
} %}
Cancer is a generic term for lots of different diseases in which cells divide many more times than usual. This abnormal growth can affect many cell types in almost any part of the body.
Cancer is a multi-stage process. Normal cells begin to divide abnormally, spreading beyond their normal boundaries, and abnormal tissue growth causes swellings called tumours to form. Tumours can be benign – with no harmful effect on the body – or malignant, invading healthy tissue and interfering with normal bodily functions.
There are more than 100 types of cancer and symptoms vary depending on the type. Read more about Cancer.
<section class="vf-intro | embl-grid embl-grid--has-centered-content">
<div>
<!-- empty -->
</div>
<div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer
<a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">alpha</a> </h1>
<p class="vf-lede">Cancer is a generic term for lots of different diseases in which cells divide many more times than usual. This abnormal growth can affect many cell types in almost any part of the body.</p>
<p class="vf-intro__text">Cancer is a multi-stage process. Normal cells begin to divide abnormally, spreading beyond their normal boundaries, and abnormal tissue growth causes swellings called tumours to form. Tumours can be benign – with no harmful effect on the body – or malignant, invading healthy tissue and interfering with normal bodily functions.</p>
<p class="vf-intro__text">There are more than 100 types of cancer and symptoms vary depending on the type. <a class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
</div>
</section>
vf-componenet-rollup vf-core-components vf-local-overrides vf-sample This page is part of the components section.