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

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.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.