Text element

For basic text formatting and sizes.

github location npm version

Usage

EMBL’s primary corporate typeface is IBM Plex Sans. Subdomains should use the same font except for cases where they have a different brand guideline.

The vf-text component leverages the design token typography sizes.

The default font size for paragraphs is 19px.

Apply tokens, such as vf-text-body--1 to change the size and other stylistic elements of the default body text.

This component provides utility-like functionality and you'll rarely need to directly use this component. When coding a component's Sass, it will typically be better to use the mixins (@include set-type(text-body--1);) than these vf-text classes.

How to use

  • Align a body of text to the left, this make it easier to read.
  • Large body text - The large body text variant is used for lead paragraphs and blockquotes.
  • Default body text - The default paragraph font size is 19px.
  • Small body text - Text smaller than 16px is defined as part of certain vf components. Avoid using this for standalone paragraph text because it can be too small to read.
  • For optimal readability avoid using body texts below 12 px.

How not to use

  • Do not justify (Align a body of text to both the left and right) a body of text as this causes readability issues
  • Do not use other typefaces in the Subdomains unless for cases with different brand guidelines.
  • Avoid using all caps, as this makes it harder for a reader to identify words by shapes.
  • Do not underline texts unless they are links.

Related documentation

For more information on text please consult the following documents:

Variants

Large Body Text variant

This is large body text

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"text" : "This is large body text",
"type" : 1,
 }
%}
{% include "../path_to/vf-text/vf-text.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-text', {
  "component-type" : "element",
  "text" : "This is large body text",
  "type" : 1,}
%}
HTML 
 <p class="vf-text-body vf-text-body--1">This is large body text</p>

Default Body Text variant

This is the default paragraph text

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"text" : "This is the default paragraph text",
"type" : 2,
 }
%}
{% include "../path_to/vf-text/vf-text.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-text', {
  "component-type" : "element",
  "text" : "This is the default paragraph text",
  "type" : 2,}
%}
HTML 
 <p class="vf-text-body vf-text-body--2">This is the default paragraph text</p>

Small Body Text variant

This is a small body text

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"text" : "This is a small body text",
"type" : 3,
 }
%}
{% include "../path_to/vf-text/vf-text.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-text', {
  "component-type" : "element",
  "text" : "This is a small body text",
  "type" : 3,}
%}
HTML 
 <p class="vf-text-body vf-text-body--3">This is a small body text</p>

Extra Small Bold Body Text variant

This is an extra small bold body text

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"text" : "This is an extra small bold body text",
"type" : 4,
 }
%}
{% include "../path_to/vf-text/vf-text.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-text', {
  "component-type" : "element",
  "text" : "This is an extra small bold body text",
  "type" : 4,}
%}
HTML 
 <p class="vf-text-body vf-text-body--4">This is an extra small bold body text</p>

Extra Small Body Text variant

This is an extra small body text

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"text" : "This is an extra small body text",
"type" : 5,
 }
%}
{% include "../path_to/vf-text/vf-text.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-text', {
  "component-type" : "element",
  "text" : "This is an extra small body text",
  "type" : 5,}
%}
HTML 
 <p class="vf-text-body vf-text-body--5">This is an extra small body text</p>

Extra Extra Small Body Text variant

This is an extra extra small body text

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "element",
"text" : "This is an extra extra small body text",
"type" : 6,
 }
%}
{% include "../path_to/vf-text/vf-text.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-text', {
  "component-type" : "element",
  "text" : "This is an extra extra small body text",
  "type" : 6,}
%}
HTML 
 <p class="vf-text-body vf-text-body--6">This is an extra extra small body text</p>

Examples

Installation info

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

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

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

Changelog

Changelog

1.1.1

  • Documentation: Detailed documentation added Tracking issue
  • Updated: Naming convention updated as per design recommendations Tracking issue

1.1.0

  • Changes of name of variants to reflect connection to design tokens.
  • https://github.com/visual-framework/vf-core/issues/1661

1.0.1

  • Add notes to README.md

1.0.0

  • Initial stable release

Assets


File system location: components/vf-text

Find an issue on this page? Propose a change or discuss it.