+
+
+ Container
+-
+
+
- + Banner + +
- + Hero + +
-
-
- 
-
-
-
-
-
-
-
-
- (THIS DOES NOT YET WORK) npm init @visual-framework/vf-react your-new-site-name
- This will install a new vf-react to a folder named your-new-site-name.
Then follow the onscreen prompts and links below to develop and configure.
- -To add a component you can use npm/Yarn or install it manually.
-In either case you'll need to re-run gulp dev to ensure the component is fully loaded.
yarn add @visual-framework/vf-logoyarn upgrade-interactive --latest./vf-components/vf-component-nameYou can add a custom VF-compatible component to ./vf-components and use it in
- your site.
gulp vf-component
- Edit src/Home.js or
vf-components/vf-componenet-rollup/index.scss and save to reload.
-
Cancer is a generic term for lots of different diseases in which cells divide many more times than usual. This abnormal growth can affect many cell types in almost any part of the body.
-Cancer is a multi-stage process. Normal cells begin to divide abnormally, spreading beyond their normal boundaries, and abnormal tissue growth causes swellings called tumours to form. Tumours can be benign – with no harmful effect on the body – or malignant, invading healthy tissue and interfering with normal bodily functions.
-There are more than 100 types of cancer and symptoms vary depending on the type. Read more about Cancer.
-
+ Visual Framework
+
+
+
+ + Good defaults and technical flexibility for life science websites +
+ ++ With compatibility with existing CSS and JS, you can bring your + Bootstrap, React or vanilla code base. The VF will not break your + existing code. +
+ + About the VF + + ++ How to get the VF code, guidance and get help. +
++ Individual building block components and pattern-level example + boilerplates. +
++ Developing and contributing to the Visual Framework Core and its + components. +
++ Colour, typography, spacing and other stylistic decisions as + structured data. +
++ Use Figma software to design and collaborate on ideas without + using code. +
++ Here you will find guidance on what, why and how. +
++ Use an npm starter package for new projects or to graft existing + code. +
++ Build components into CSS and JS with{" "} + + vf-build-boilerplate + + : +
+
+ yarn create{" "}
+
+ @visual-framework/vf-project
+ {" "}
+ your-new-site-name{" "}
+
+ vf-build-boilerplate
+
+
+ + A full static site generator based off 11ty with{" "} + + vf-eleventy + + : +
+
+ yarn create{" "}
+
+ @visual-framework/vf-project
+ {" "}
+ your-new-site-name{" "}
+
+ vf-eleventy
+
+
+ + + More about the above and further options + {" "} + and{" "} + + follow a guide to setting up your development environment + + . +
++ Install the source Sass and JavaScript files via yarn to an existing + project +
+
+
+
+ # 1. Add the Sass config, starter and any components
+
+ yarn add @visual-framework/vf-sass-config
+ @visual-framework/vf-sass-starter @visual-framework/vf-content
+ @visual-framework/vf-analytics-google
+ # 2. Import it in your Sass
+ @import{" "}
+
+ 'node_modules/@visual-framework/vf-sass-starter/index.scss'
+
+ ; @import{" "}
+
+ 'node_modules/@visual-framework/vf-content/vf-content.scss'
+
+ ;# 3. Import JS modules
+
+
+ + Get a kitchen sink of pre-compiled CSS and JS from the CDN. +
+
+
+ <!-- CSS only -->
+
+ <link{" "}
+ rel=
+ "stylesheet"{" "}
+ href=
+
+ "https://dev.assets.emblstatic.net/vf/develop/css/styles.css"
+
+ >
+
+ <!-- JS -->
+
+ <script{" "}
+ src=
+
+ "https://dev.assets.emblstatic.net/vf/develop/scripts/scripts.js"
+
+ >
+
+
+ </script>
+
+
+
+ + + See examples in our HTML boilerplates + {" "} + for quick starts and layouts. +
+v2.5.21
+
+ + Find an issue on this page? + + Propose a change + {" "} + or{" "} + + discuss it + + . +
++ An anchor or JavaScript button to scroll the user to top of the current page, or to a target element. +
+
+ 
+
Only use on component per page, multiple "back to top" links are not recommended.
+The inline variant can be used without JavaScript and placed at the bottom of content or the page.
+The floating variant is recommended for this component, which appears floating at the bottom right of page. It will appear once the user has scrolled down to 100% of the page height. This requires JavaScript to function.
+vf-back-to-top now has React support which has been tested on react version 18.2.0
+yarn add @visual-framework/vf-back-to-topimport VfBackToTop from '@visual-framework/vf-back-to-top/vf-back-to-top.react';<VfBackToTop type="floating" />@import '~@visual-framework/vf-sass-config/index.scss';Usage:
+<VfBackToTop type="floating" />
+ import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.react.js";
+ // or
+ import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.jsx";
+ <VfBackToTop type="inline" text="Top" scrollToId="top" example="true" />
+
+ import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.react.js";
+ // or
+ import { VfBackToTop } from "@visual-framework/vf-back-to-top/vf-back-to-top.jsx";
+ <VfBackToTop type="floating" />
+
+
+ The vf-badge component is used to denote if a page,
+ section, or link has a production state of alpha,{" "}
+ beta or other information.
+
+
+ As of version 3.0.0-alpha.1 vf-badge has experimental React support + which has been tested on react version 18.2.0 +
+
+ 
+ yarn add @visual-framework/vf-badge
+
+
+ import VfBadge from '@visual-framework/vf-badge/vf-badge.react';
+ Make sure you have the jsx support enabled with babel.
+ Alternatively, you can also copy the vf-badge.react.js file from below to your react project and import as per the location.
+
+
+
+
+ <VfBadge text="ALPHA" theme="primary" id="Badge1"/>
+
+
+
+
+ @import '~@visual-framework/vf-sass-config/index.scss';
+ @import '~@visual-framework/vf-badge/vf-badge.css';
+
+
+ you should also install and import{" "}
+
+ vf-sass-starter
+ {" "}
+ for the styles
+ Usage:
+
+
+ <VfBadge text="ALPHA" theme="primary" id="Badge1"/>
+
+
+
+
+ <VfBadge text="ALPHA" theme="primary" id="Badge1"/>
+
+
+ + + Informs visitors about important changes or persistent conditions. + Use this component if you need to communicate to visitors in a + prominent way. Banners are placed at the top of the page or + section they apply to, and below the page or section header. + +
+ + +
+ 
+ vf-banner vf-banner--notice
+ vf-banner vf-banner--phase
+ vf-banner vf-banner--alert vf-banner--info
+
+ This replaces vf-banner--phase
+
+ vf-banner vf-banner--alert vf-banner--success
+ vf-banner vf-banner--alert vf-banner--alert
+ vf-banner vf-banner--alert vf-banner--warning
+
+ note: The vf-banner--alert variants
+ include the option to dismiss the banner. This is currently a 'bring
+ your own JavaScript' button. To include a close button in the markup
+ you need to make sure you have the variable{" "}
+ banner__dismissable set to true:
+
+ banner__dismissable: true
+
+ --modal variant
+
+ Like all JS-enabled components in the Visual Framework, if you wish
+ to use the bundled JS, you need to include JS data attributes, here
+ is an overview of what the options are for the{" "}
+ vf-banner--modal variant.
+
dismissible: standard messaging type
+ blocking: full screen
+ persistent: no close button
+ blocking banner state
+ "y"
+ "myServiceName"
+ "0.1"{" "}
+ Incrementing this string will invalidate old cookies.
+
+ "<a href='#'>Optional button</a><a
+ target='_blank' href='#'>New tab
+ button</a>">
+ {" "}
+ This HTML string will be converted into VF markup for extra
+ buttons. Optional.
+ .innerHTML of
+ this element will be used as the markup for the message itself
+ + As of version 2.0.0-alpha.2 vf-banner has experimental React support + which has been tested on react version 18.2.0 +
+
+ Install yarn add @visual-framework/vf-banner
+
+ Import in the JS file where you want to include this component +
+
+
+ import VfBanner from '@visual-framework/vf-banner/vf-banner.react';
+ Make sure you have the jsx support enabled with babel.
+ Alternatively, you can also copy the vf-banner.react.js file from below to your react project and import as per the location.
+
+
+ Can be used as
+
+
+ <VfBanner
+ banner__variant="banner__info"
+ banner__dismissible="true"
+ banner__message="Here is some very, <em>very</em> <a className='vf-banner__link' href='#' onClick='return false;'>important information</a>"
+ />
+
+
+ Possible combinations
+| Variable | +Options | +Default | +Release | +Applicable to banner types | +
|---|---|---|---|---|
| banner__message | ++ | + | + | 'basic' | +
| banner__type | ++ | 'basic' | +current | +all types | +
| + | 'inline' | ++ | current | ++ |
| + | 'fixed' | ++ | current | ++ |
| + | 'top' | ++ | current | ++ |
| banner__variant | +'banner__info' | ++ | + | 'basic' | +
| + | 'banner__warning' | ++ | + | + |
| + | 'banner__danger' | ++ | + | + |
| + | 'banner__success' | ++ | + | + |
| banner__dismissible | +true, false | +false | ++ | 'basic' | +
| banner__inline_href | ++ | + | + | 'inline', 'top' | +
| banner__text | ++ | + | + | 'fixed' | +
| data_service_id | ++ | + | + | 'fixed' | +
| data_protection_version | ++ | + | + | 'fixed' | +
CSS to be added to your styles.scss
++ You should install{" "} + + vf-sass-starter + {" "} + for the styles and then add below code in your main SCSS file +
+
+
+ $vf-font-plex-mono-prefix: '~@visual-framework/vf-font-plex-mono/assets';
+ $vf-font-plex-sans-prefix: '~@visual-framework/vf-font-plex-sans/assets';
+ @import '~@visual-framework/vf-box/vf-box.scss';
+ @import '~@visual-framework/vf-stack/vf-stack.scss';
+ @import '~@visual-framework/vf-u-fullbleed/vf-u-fullbleed.scss';
+
+
+ + as per your banner of choice add all or some to your styles.scss +
+
+
+ @import '~@visual-framework/vf-banner/vf-banner.scss';
+ @import '~@visual-framework/vf-banner/vf-banner--phase.scss';
+ @import '~@visual-framework/vf-banner/vf-banner--alerts.scss';
+ @import '~@visual-framework/vf-banner/vf-banner--gdpr.scss';
+
+
+ + for the 'fixed' and 'top' banner type additionally add below to + styles.scss +
+
+
+ @import '~@visual-framework/vf-banner/vf-banner--fixed.scss';
+ @import "~@visual-framework/vf-badge/vf-badge.scss";
+ @import '~@visual-framework/vf-button/vf-button.scss';
+ @import '~@visual-framework/vf-grid/vf-grid.scss';
+
+
+ Usage:
+
+
+ <VfBanner banner__variant="banner__info"
+ banner__dismissible="true"
+ banner__message="Here is some very,
+ <em>very</em> <a className='vf-banner__link'
+ href='#' onclick='return false;'>important
+ information</a>"/>
+
+
+
+
+ <VfBanner
+ banner__variant="banner__info"
+ banner__dismissible="true"
+ banner__message="Here is some very, <em>very</em> <a className='vf-banner__link' href='#' onClick='return false;'>important information</a>"
+ />
+
+
+
+
+ <VfBanner banner__variant="banner__warning"
+ banner__dismissible="true" banner__message="Easy
+ now, easy does it. <a className='vf-banner__link'
+ href='JavaScript:Void(0);'>link
+ example</a>"/>
+
+
+
+
+ <VfBanner banner__variant="banner__danger"
+ banner__message="Oh dear, what have you done? <a
+ className='vf-banner__link'
+ href='JavaScript:Void(0);'>link
+ example</a>"/>
+
+
+
+
+ <VfBanner banner__variant="banner__success"
+ banner__dismissible="false"
+ banner__message="Congratulations! You have made something
+ <a className='vf-banner__link'
+ href='JavaScript:Void(0);'>awesome</a>!"/>
+
+
+
+
+ For 'top' variant - <VfBanner
+ banner__type="top"
+ banner__inline_href="JavaScript:Void(0);"/> For
+ 'fixed' variant - <VfBanner
+ banner__type="fixed" banner__text="I agree, dismiss
+ this banner"/>
+
+
+
+
+ For 'top' variant - <VfBanner
+ banner__type="top"
+ banner__inline_href="JavaScript:Void(0);"/> For
+ 'fixed' variant - <VfBanner
+ banner__type="fixed" banner__text="I agree, dismiss
+ this banner"/>
+
+
+
+
+ The vf-blockquote highlights a section that is quoted
+ from an external source.
+
+
+ The vf-blockquote should be used to highlight texts
+ from external sources like quotes and testimonials. It should be
+ used for more than decorative purposes, ensuring that the text being
+ quoted is relevant to the content of the page and adds value to the
+ content.
+
+ It should not be confused with a pull quote which highlights a + section of text from the same source/page. +
++ Quotes should be as concise as possible. The impact of the + blockquote is diminished when it has long texts as this overwhelms + the reader. +
++ Provide proper attribution such as the name, source and relevant + information to give credibility to the quote. The component allows + you to add the image of the person, the name (Which can be linked to + a profile or source page) and other attribution details. +
++ The blockquote is designed to be used on a white background, it is + advisable to avoid using it on backgrounds with gradients, images or + other colours. If the background colour is changed, ensure the + contrast ratio between the texts and the background meet + accessibility standards. +
+
+ 
+ vf-blockquote.
+ Vf-blockquotes should not be used solely for
+ decorative purposes, ensuring that the quoted text adds value to
+ the content.
+ + When using vf-blockquote with headings that have smaller font sizes + such as 24 px, it is recommended to use the small-vf-blockquote + variant as the default blockquote variant has a font size of 28px + and could compete with smaller heading sizes for attention. When + showing multiple quotes in a section, such as testimonials or + multiple endorsements the small variant is recommended. +
++ As of version 1.2.1 vf-blockquote has experimental React support + which has been tested on react version 18.2.0 +
+
+ Install yarn add @visual-framework/vf-blockquote
+
+
+
+
+ import VfBlockquote from '@visual-framework/vf-blockquote/vf-blockquote.react';
+ Make sure you have the jsx support enabled with babel.
+ Alternatively, you can also copy the vf-blockquote.react.js file from below to your react project and import as per the location.
+
+
+ Can be used as
+
+
+ <VfBlockquote blockquote_text=""Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip."" blockquote_author="Marion Burton"
+ blockquote_author_imageurl="vf-icon--avatar.svg"
+ blockquote_author_href="#"
+ blockquote_author_details="Title and other
+ details"/>
+
+
+ Styling changes
++ You should install{" "} + + vf-sass-starter + {" "} + for the styles and then add below code in your main SCSS file +
+
+
+ $vf-font-plex-mono-prefix:
+ '~@visual-framework/vf-font-plex-mono/assets';
+ $vf-font-plex-sans-prefix:
+ '~@visual-framework/vf-font-plex-sans/assets';
@import
+ '~@visual-framework//vf-sass-starter/index.scss';
@import
+ "~@visual-framework/vf-profile/vf-profile.scss";
+ @import "~@visual-framework/vf-text/vf-text.scss";
+ @import '~@visual-framework/vf-blockquote/vf-blockquote.scss';
+
+
+ Usage:
+
+
+ <VfBlockquote blockquote_text=""Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip."" blockquote_author="Marion Burton"
+ blockquote_author_imageurl="vf-icon--avatar.svg"
+ blockquote_author_href="#"
+ blockquote_author_details="Title and other
+ details"/>
+
+
+
+
+ <VfBlockquote blockquote_text=""Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip."" blockquote_author="Marion Burton"
+ blockquote_author_details="Title and other details"
+ modifier="default"/>
+
+
+
+
+ <VfBlockquote blockquote_text=""Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip."" blockquote_author="Marion Burton"
+ blockquote_author_imageurl="vf-icon--avatar.svg"
+ blockquote_author_details="Title and other details"
+ modifier="default"/>
+
+
+ +++++ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip." ++ + +
+
+ <VfBlockquote blockquote_text=""Lorem ipsum dolor sit
+ amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip."" blockquote_author="Marion Burton"
+ blockquote_author_details="Title and other details"
+ modifier="small"/>
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
