Logo element

A simple component to add the Visual Framework logo to a page. You'll likely want to use this one as a template to add your own logo.

github location npm version

Usage

This component allows you to add the vf-logo on your page. It can also serve as a template to add your own logo if it has a similar layout and design to the vf-logo. Before using it, ensure that your logo usage guidance and design layout do not conflict with the component.

Considering that texts in logo’s are classified as essential, there are no contrast requirements for adding a logo. However, where possible, make sure the logo is clearly visible against the background colour.

Useful links

Variants

Default variant

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",
"logo_href" : "https://stable.visual-framework.dev/",
"logo_text" : "Visual Framework",
"image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
"hidden_text" : false,
 }
%}
{% include "../path_to/vf-logo/vf-logo.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-logo', {
  "component-type" : "element",
  "logo_href" : "https://stable.visual-framework.dev/",
  "logo_text" : "Visual Framework",
  "image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
  "hidden_text" : false,}
%}
HTML 
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
  <img class="vf-logo__image" src="https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg" alt="Visual Framework" loading="eager">
  <span class="vf-logo__text">Visual Framework</span>
</a>

Extreme variant

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",
"logo_href" : "https://stable.visual-framework.dev/",
"logo_text" : "Visual Framework",
"image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
"override_class" : "vf-logo--extreme",
"hidden_text" : false,
 }
%}
{% include "../path_to/vf-logo/vf-logo.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-logo', {
  "component-type" : "element",
  "logo_href" : "https://stable.visual-framework.dev/",
  "logo_text" : "Visual Framework",
  "image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
  "override_class" : "vf-logo--extreme",
  "hidden_text" : false,}
%}
HTML 
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text | vf-logo--extreme">
  <img class="vf-logo__image" src="https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg" alt="Visual Framework" loading="eager">
  <span class="vf-logo__text">Visual Framework</span>
</a>

Hidden Text variant

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",
"logo_href" : "https://stable.visual-framework.dev/",
"logo_text" : "Visual Framework",
"image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
"hidden_text" : true,
 }
%}
{% include "../path_to/vf-logo/vf-logo.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-logo', {
  "component-type" : "element",
  "logo_href" : "https://stable.visual-framework.dev/",
  "logo_text" : "Visual Framework",
  "image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
  "hidden_text" : true,}
%}
HTML 
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
  <img class="vf-logo__image" src="https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg" alt="Visual Framework" loading="eager">
  <span class="vf-logo__text vf-u-sr-only">Visual Framework</span>
</a>

Extreme With Hidden Text variant

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",
"logo_href" : "https://stable.visual-framework.dev/",
"logo_text" : "Visual Framework",
"image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
"override_class" : "vf-logo--extreme",
"hidden_text" : true,
 }
%}
{% include "../path_to/vf-logo/vf-logo.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-logo', {
  "component-type" : "element",
  "logo_href" : "https://stable.visual-framework.dev/",
  "logo_text" : "Visual Framework",
  "image" : "https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg",
  "override_class" : "vf-logo--extreme",
  "hidden_text" : true,}
%}
HTML 
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text | vf-logo--extreme">
  <img class="vf-logo__image" src="https://assets.emblstatic.net/vf/v2.4.6/assets/vf-logo/assets/logo.svg" alt="Visual Framework" loading="eager">
  <span class="vf-logo__text vf-u-sr-only">Visual Framework</span>
</a>

Examples

Installation info

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

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

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-logo/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.5.2

1.5.1

  • Makes logo larger only when using extreme variant.
  • changes any set- style functions to cleaner version

1.5.0

  • removes some unneeded CSS.
  • deprecates --extrene variation.
  • makes the maximum height of the logo 3rem (48px).

1.4.0

  • updates spacing design tokens
  • requires v2.0.0 of the vf-design-tokens package or newer

1.3.0

  • adds loading="eager" to the img element for better performance

1.2.0

  • adds 'context' for the logo

1.1.0

  • adds if statement for if there is text or not so no HTML is printed if not
  • adds class if logo text is provided
  • changes what is making space between logo and text to it being the text item

1.0.1

  • Tweaks height, adds larger "extreme" variant

1.0.0

  • Initial stable release

Assets


File system location: components/vf-logo

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