Text Component

npm version

About

For basic text formatting and sizes.

Install

This component is distributed with npm. After installing npm, you can install the vf-text with this command.

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

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

Make sure you import Sass requirements along with the modules.

File system location: components/vf-text

Variants

Variant: Default live element

Nunjucks demo

{% render '@vf-text--default', {
  "component-type": "element"
} %}

Sample output

Sample output as HTML

 <p class="vf-text-body"></p>

Assets

Variant: Extra Large live element

Nunjucks demo

{% render '@vf-text--extra-large', {
  "component-type": "element",
  "text": "This text is extra large",
  "type": 1
} %}

Sample output

This text is extra large

Sample output as HTML

 <p class="vf-text-body vf-text-body--1">This text is extra large</p>

Assets

Variant: Large live element

Nunjucks demo

{% render '@vf-text--large', {
  "component-type": "element",
  "text": "This text is large",
  "type": 2
} %}

Sample output

This text is large

Sample output as HTML

 <p class="vf-text-body vf-text-body--2">This text is large</p>

Assets

Variant: Regular live element

Nunjucks demo

{% render '@vf-text--regular', {
  "component-type": "element",
  "text": "This text is regular",
  "type": 3
} %}

Sample output

This text is regular

Sample output as HTML

 <p class="vf-text-body vf-text-body--3">This text is regular</p>

Assets

Variant: Small live element

Nunjucks demo

{% render '@vf-text--small', {
  "component-type": "element",
  "text": "This text is small",
  "type": 4
} %}

Sample output

This text is small

Sample output as HTML

 <p class="vf-text-body vf-text-body--4">This text is small</p>

Assets

Variant: Extra Small live element

Nunjucks demo

{% render '@vf-text--extra-small', {
  "component-type": "element",
  "text": "This text is extra small",
  "type": 5
} %}

Sample output

This text is extra small

Sample output as HTML

 <p class="vf-text-body vf-text-body--5">This text is extra small</p>

Assets

All components in this design system

This page is part of the components section.