Logo component

About

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.

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

• Design resources - EMBL
• Contrast (Minimum) (Level AA) - WCAG 2.1 Understanding Docs
• Images of Text (Level AA) - WCAG 2.1 Understanding Docs

Install

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

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack