The Visual Framework
A front-end toolkit to quickly and collaboratively build better life science websites.
2023-10-09T17:30:00Z
https://stable.visual-framework.dev
Visual Framework system
web-development-team@ebi.ac.uk
Rollup release 2.5.14
2023-10-09T17:30:00Z
https://stable.visual-framework.dev/updates/2023-10-09-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-10-09-component-updates/" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-10-09-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.14 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.14/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.14/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>New features <a href="https://stable.visual-framework.dev/updates/2023-10-09-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-blockquote/">vf-blockquote</a> <span class="vf-badge vf-badge--secondary">1.2.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-blockquote/v/1.2.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/22f07801641e6e5b25d92a5e7ef6cde407ef4453" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changed: Modified the Blockquote component in line with stakeholder requirements and to improve consistency</li>
<li>Added : Angular support for Blockquote component</li>
<li>Added : React support for Blockquote component</li>
<li>Documentation: Updated the documentation for blockquote as per new implementation <a href="https://github.com/visual-framework/vf-core/issues/1945">#1945</a></li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2023-10-09-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.7</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.7" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6ca3da362ef7f061de5c3c95acb646f7cf004381" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Documentation: Updated build process document with missing step for <code>vfVersion</code> update <a href="https://github.com/visual-framework/vf-core/issues/1966">#1966</a></li>
<li>Added : Angular support for Blockquote component</li>
<li>Added : React support for Blockquote component</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-breadcrumbs/">vf-breadcrumbs</a> <span class="vf-badge vf-badge--secondary">2.0.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-breadcrumbs/v/2.0.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bdbf740f25f66a764f02a730e4ca0c27ed02327f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Documentation: Updated usage guidelines to show full navigation path <a href="https://github.com/visual-framework/vf-core/issues/1957">#1957</a></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-back-to-top/">vf-back-to-top</a> <span class="vf-badge vf-badge--secondary">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-back-to-top/v/1.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/66b351660ea96ecb55ae60addbc6c7f46bd00b25" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updated the Back to Top button to secondary and changed arrow colour. <a href="https://github.com/visual-framework/vf-core/issues/1956">#1956</a></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-social-links/">vf-social-links</a> <span class="vf-badge vf-badge--secondary">0.0.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-social-links/v/0.0.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bb5dedad550358a644227bcf9b116e93149cdd61" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updated Twitter icon with X icon</li>
</ul>
Rollup release 2.5.13
2023-05-10T02:30:00Z
https://stable.visual-framework.dev/updates/2023-05-10-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-05-10-component-updates/" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-05-10-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-05-10-component-updates/" class="vf-navigation__link">Bug fixes</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.13 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.13/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.13/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.13/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.13/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>New features <a href="https://stable.visual-framework.dev/updates/2023-05-10-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/2.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dba63115fafd71d02abf807f757fd5b169a5daf3" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Experimental Angular support for fixed and top banner type. See README.md for more.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-badge/">vf-badge</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-badge/v/3.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/91d362d4509dbae0caff8733014aac87ec8b2965" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Angular syntax for different variants as compared to common syntax</li>
<li>Added : Experimental React support for Badge component</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">4.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/4.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6782cf72b064cdd79ff6367d918d83561a602f04" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Angular syntax for different variants as compared to common syntax</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2023-05-10-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/3.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9c0a3945fde2442e37757730e0bc250ea675e101" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changed : Angular support for Button component as a standalone package. See README.md for more.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.6" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e8e5c86ed1977788830449ce89ff59690e26595b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug fix: Fixed changelog for Pagination component. Extension to bug #1874</li>
<li>Added: Angular experimental support for vf-button component</li>
<li>Added: Angular experimental support for vf-banner component for 'fixed' and 'top' variant</li>
<li>Added: Angular syntax for different variants for vf-badge, vf-button, vf-banner, vf-hero component</li>
<li>Added: React experimental support for vf-badge component</li>
<li>Bug fix: Updated vf-card documentation to fix the typo</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2023-05-10-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.7.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.7.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0e6b93b0eacfab0d222bdb537294130e1bf90a5d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug fix: Updated vf-card documentation to fix the typo</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-pagination/">vf-pagination</a> <span class="vf-badge vf-badge--secondary">1.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-pagination/v/1.1.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ba042ceeb41e8f6a589014a245eb49797bf784c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug fix : Changelog updated to match npmjs versions.</li>
</ul>
Rollup release 2.5.12
2023-03-21T10:30:00Z
https://stable.visual-framework.dev/updates/2023-03-21-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-03-21-component-updates/" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-03-21-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-03-21-component-updates/" class="vf-navigation__link">Bug fixes</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.12 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.12/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.12/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.12/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.12/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>New features <a href="https://stable.visual-framework.dev/updates/2023-03-21-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">4.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/4.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2357f982860ec053163e6cb77f7b97d79b1dc872" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Experimental Angular support for Hero component</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/2.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9da745711ff2e74402bea72e3c1b440649d021c8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Experimental Angular support for basic and inline banner type. See README.md for more. Support for additional banner types planned for future sprint.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-badge/">vf-badge</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-badge/v/3.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4b71b95d3eb148148996ee6f04df6c35e612558d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Experimental Angular support for Badge</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-core/">vf-core</a> <span class="vf-badge vf-badge--secondary">2.2.39</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.39" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4b71b95d3eb148148996ee6f04df6c35e612558d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added : Angular support for vf-badge, vf-banner, vf-hero</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-extensions/">vf-extensions</a> <span class="vf-badge vf-badge--secondary">2.1.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions/v/2.1.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/81a71cf307167657f46275a311d98080aba438ce" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Feature: This adds support for Eleventy v2 and should remain backwards compatible with v1.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/81a71cf307167657f46275a311d98080aba438ce" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Feature: This adds support for Eleventy v2 and should remain backwards compatible with v1.</li>
<li>Added: Angular experimental support for vf-badge component</li>
<li>Added: Angular experimental support for vf-banner component</li>
<li>Added: Angular experimental support for vf-hero component</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2023-03-21-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-card-container/">vf-card-container</a> <span class="vf-badge vf-badge--secondary">3.2.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.2.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/06733115050bb1d1456476e04a7342fd7242dc78" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>docs: Updated documentation for hidden flag usage and fixed 3.1.0 changelog text which was causing compile error</li>
<li>moves the <code>default</code> context data in the <code>.yml</code> file to a <code>variant</code> to allow easier use of ``.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-link/">vf-link</a> <span class="vf-badge vf-badge--secondary">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-link/v/2.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9cf29c148ab40e6f9bd5e1f1ee627e97ee56f7e3" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixed: Fixed space issue to make the 'default' variant example look like a link (#1895)</li>
<li>Added: Added documentation for vf-link: description in About, Usage notes and links to related documentation.(#1894)</li>
<li>Added: Added accessibility note to vf-link documentation (#1899)</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-section-header/">vf-section-header</a> <span class="vf-badge vf-badge--secondary">1.5.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.5.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/75f1933bc40b9273b61e3cbd47f372332e7a810b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>fix: Changed the hidden header code to show a header without a link. If not hidden then it'd show as usual.</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2023-03-21-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5055f1984ff2a9390e36b733fefb9f7979e7f220" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug fix: Fixes identical changelog information for all components changelog section #1874</li>
</ul>
Rollup release 2.5.10
2023-02-09T12:30:00Z
https://stable.visual-framework.dev/updates/2023-02-09-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2023-02-09-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.10 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.10/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.10/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.10/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.10/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2023-02-09-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-search-client-side/">vf-search-client-side</a> <span class="vf-badge vf-badge--secondary">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search-client-side/v/2.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/69a3aa411375b7cc4659be1094eec3119d657e13" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changed : Modified the logic to update search term in both the searchboxes (Menu and Current page)</li>
<li>https://github.com/visual-framework/vf-core/pull/1859</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c67a33a0ccb9e58dc2af274d0f60d82766a119d5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Dependency bump</li>
<li>Gulp task for updating prod to dev endpoints for ebi-header-footer component</li>
<li>Updated css paths in .njk templates with relative paths</li>
<li>https://github.com/visual-framework/vf-core/pull/1865</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-core/">vf-core</a> <span class="vf-badge vf-badge--secondary">2.2.38</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.38" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9c3847b89a2548a804e78d3772a9ef8f5ed7b5a9" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Dependency bump node upgrade</li>
<li>https://github.com/visual-framework/vf-core/pull/1847</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-extensions/">vf-extensions</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions/v/2.0.0-alpha.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2c4322eacbd3202478d8fc178ec61933d9e38bd4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug fix - Updated search logic to show correct page description in search results</li>
<li>https://github.com/visual-framework/vf-core/pull/1865</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-pagination/">vf-pagination</a> <span class="vf-badge vf-badge--secondary">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-pagination/v/1.1.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/330e6578b34eaabac1099a3fa64fee0efe5ad8f3" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>UI changes to fix accessibility issues</li>
<li>Changed : Modified the vf-pagination__link class to support vf-link styles</li>
<li>Changed : Modified the style for disabled links like 'Previous' (when on 1st page) so that it does not fail contrast check. Added example to showcase this behaviour.</li>
<li>Changed : Updated the current page number style to show bold text</li>
<li>https://github.com/visual-framework/vf-core/pull/1858</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-section-header/">vf-section-header</a> <span class="vf-badge vf-badge--secondary">1.5.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.5.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/43e1b3c31aebe8873eb9d7b7cf6c3bb04dac723e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>feat: Added hidden field (optional) to address accessibility issues for H2 tags</li>
<li>https://github.com/visual-framework/vf-core/pull/1851</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-bookmark/">vf-bookmark</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-bookmark/v/1.0.0-alpha.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/66d21ba95848efbe35f4f69735b4e53b192f0d42" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update bookmark link to a button element</li>
<li>Default icon change to heart</li>
<li>https://github.com/visual-framework/vf-core/pull/1852</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/2.0.0-alpha.6" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3b9bd57cfa6d92c11f8c0cd6d5d4b4ad2ae6dfae" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changes the link variant to be a button element</li>
<li>https://github.com/visual-framework/vf-core/pull/1849</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card-container/">vf-card-container</a> <span class="vf-badge vf-badge--secondary">3.2.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.2.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/43e1b3c31aebe8873eb9d7b7cf6c3bb04dac723e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added: Attribute ‘hidden’ to container_section__header in config and accordingly it adds ‘vf-u-sr-only’ css class to hide section header, this to fix component accessibility</li>
<li>Added: Added condition to components.njk to show example section for type=container</li>
<li>Changed: vf-u-background-color--grey--lightest to vf-u-background-color-ui--white to apply white background</li>
<li>https://github.com/visual-framework/vf-core/pull/1851</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/ebi-header-footer/">ebi-header-footer</a> <span class="vf-badge vf-badge--secondary">2.1.3</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.1.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/39dd9354d3f2a0b37cb6e698405458cc47cc2784" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Resolve accessbility issues for EBI blackbar header for v1.4 and also fixes overlapping x button for search box.</li>
<li>https://github.com/visual-framework/vf-core/pull/1847</li>
</ul>
Rollup release 2.5.9
2022-11-24T12:30:00Z
https://stable.visual-framework.dev/updates/2022-11-24-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2022-11-24-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.9 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.9/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.9/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.9/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.9/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2022-11-24-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-componenet-rollup/">vf-componenet-rollup</a> <span class="vf-badge vf-badge--secondary">1.4.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-componenet-rollup/v/1.4.6" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c4365e2c15b7c6c6a6459564d78da5d7a7868248" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added option to use GA4 analytics.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-social-links/">vf-social-links</a> <span class="vf-badge vf-badge--secondary">0.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-social-links/v/0.0.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c4365e2c15b7c6c6a6459564d78da5d7a7868248" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Replace hidden text with aria-labels to avoid contrast issue.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c4365e2c15b7c6c6a6459564d78da5d7a7868248" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix issue loading scripts and styles for latest site.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">2.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/2.1.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ef03be81698f0b2d3e3a2530d2455e59149485fb" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Dynamically updates the URL based on the active tab.</li>
<li>Adds focus indicator and enables keyboard navigation.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-analytics-google/">vf-analytics-google</a> <span class="vf-badge vf-badge--secondary">1.1.0-rc.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-analytics-google/v/1.1.0-rc.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/b9692917a23e446c8d222f017b75bb1d0cb2d0b9" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds gtag (GA4) support.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">1.9.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.9.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bd1d745b6bfd9487b834107da000ecf3ed471af3" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update focus indicators colors to increase contrast ratio and be easier to spot.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner-elixir/">vf-banner-elixir</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner-elixir/v/1.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e179ae884431bf380e757df3f37a812464598286" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>removes redundant link in the Elixir logo.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tree/">vf-tree</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tree/v/2.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e179ae884431bf380e757df3f37a812464598286" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds focus outline to the svg element.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-dropdown/">vf-dropdown</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.7</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-dropdown/v/1.0.0-alpha.7" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f66f1bcd925283b60ea3329d6ff8e7c9fcd973d9" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add keyboard navigation.</li>
<li>https://github.com/visual-framework/vf-core/issues/1754</li>
</ul>
Rollup release 2.5.8
2022-08-10T15:42:00Z
https://stable.visual-framework.dev/updates/2022-08-10-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2022-08-10-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.8 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.8/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.8/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.8/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.8/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2022-08-10-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-initialization/">vf-component-initialization</a> <span class="vf-badge vf-badge--secondary">1.1.9</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-initialization/v/1.1.9" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9606c1986bc0559e4a9767328d5fbb19b08a6ddf" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates to Fractal 1.5.13 (for our use this is mostly minor bug fixes)</li>
<li>https://github.com/visual-framework/vf-core/pull/1770</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-smooth-scroll/">vf-smooth-scroll</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-smooth-scroll/v/1.0.0-alpha.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/b8d3236ec544a694a65e298a25c835bccb4279c6" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updated documentation</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.3.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.3.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/1d010064239a4cb1bbaed75c7c65a10b29faaa66" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changing from h2 to h1</li>
<li>https://github.com/visual-framework/vf-core/issues/1762</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-dropdown/">vf-dropdown</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-dropdown/v/1.0.0-alpha.6" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/35b2a59d38ecddc65e0eee3b6a120a749741896f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix: Make the whole dropdown area clickable</li>
<li>https://github.com/visual-framework/vf-core/issues/1756</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-navigation/">vf-navigation</a> <span class="vf-badge vf-badge--secondary">5.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/5.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7c824fb46665b1d07ec2d517c5778ce0f4e73d6d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Removed: Attribute <code>data-vf-js-navigation-on-this-page-link</code> for vf-navigation--on-this-page</li>
<li>Changed: Improved accuracy of vf-navigation--on-this-page scrollspy, use existing attribute to get navigation links</li>
<li>Changed: Improve scrolling into an element when clicking a link of vf-navigation--on-this-page, take into account margin/padding</li>
<li>Fixed bug where the <code>vf-navigation</code> component was getting overlapped by other components.</li>
<li>https://github.com/visual-framework/vf-core/issues/1755</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-notifications/">embl-notifications</a> <span class="vf-badge vf-badge--secondary">1.2.2</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-notifications/v/1.2.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/d40130ff71f96b7e2ce2d9fefe7673010ec336fb" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Support added for GA region. This region is generic for banner notifications.</li>
</ul>
<hr />
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
Rollup release 2.5.7
2021-12-09T12:10:29Z
https://stable.visual-framework.dev/updates/2021-12-09-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-12-09-component-updates/#features" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-12-09-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.7 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.7/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.7/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.7/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.7/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
<h3>Features <a href="https://stable.visual-framework.dev/updates/2021-12-09-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-list/">vf-list</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-list/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e3c870bedfb3c18031d9e80e49764acdf4302927" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add support to inherit context templates from Nunjucks.</li>
<li>Expose example of large variant (<code>vf-list-l</code>).</li>
<li>Add tight variant (<code>vf-list--tight</code>).</li>
<li>Add support for definition lists.</li>
<li>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl</li>
<li>https://github.com/visual-framework/vf-core/issues/914</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-notifications/">embl-notifications</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-notifications/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/30251a11dd2f2e05e370ae248102003246435d2f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Support inserting after EBI black bar.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tags/">vf-tags</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tags/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a41f6b3ecf7b0efd14cc306c8ff7f91684c464c2" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Creates a prototype MVP vf-tags component that can be easily improved in the future.</li>
<li>https://github.com/visual-framework/vf-core/issues/875</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-summary/">vf-summary</a> <span class="vf-badge vf-badge--secondary">1.6.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.6.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a385691a85cf6f420941950344c79ecb5ddf273e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>vf-summary--event now uses a lowercase date format.</li>
<li>Removes ordinals from recommended date format (4th September 2021).</li>
<li>https://github.com/visual-framework/vf-core/issues/1673</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-12-09-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-componenet-rollup/">vf-componenet-rollup</a> <span class="vf-badge vf-badge--secondary">1.4.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-componenet-rollup/v/1.4.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a41f6b3ecf7b0efd14cc306c8ff7f91684c464c2" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add vf-tags Sass.</li>
<li>https://github.com/visual-framework/vf-core/issues/875</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/ebi-header-footer/">ebi-header-footer</a> <span class="vf-badge vf-badge--secondary">2.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.1.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/27260a7b77218093d0318bf5795956c9e844c068" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Resolve a vf-stack + vf-content-hub + legacy black bar edge case.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-bookmark/">vf-bookmark</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-bookmark/v/1.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5b7d491a9d8de4a10fea92bcf13e9047d00b0006" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fine tune icon vertical spacing.</li>
<li>https://github.com/visual-framework/vf-core/issues/1687</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-article-meta-information/">vf-article-meta-information</a> <span class="vf-badge vf-badge--secondary">1.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-article-meta-information/v/1.1.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a385691a85cf6f420941950344c79ecb5ddf273e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Minor update to example content.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-content/">vf-content</a> <span class="vf-badge vf-badge--secondary">1.6.7</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.6.7" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/b5ca120f209a2f606978c1163a4a660c4c6bc2e5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add support for definition lists.</li>
</ul>
<hr />
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
Rollup release 2.5.6
2021-11-30T16:10:29Z
https://stable.visual-framework.dev/updates/2021-11-30-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-30-component-updates/#overview" class="vf-navigation__link" aria-selected="true">Overview</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-30-component-updates/#features" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-30-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<p><span class="" id="overview"></span>Hot on the heels of the <a href="https://stable.visual-framework.dev/updates/2021-11-23-component-updates/">2.5.5 release</a>, this release resolves minor bugs, improves integration between contentHub and vf-stack and continues preparing <a href="https://www.11ty.dev/blog/eleventy-v1-beta/">for the Eleventy 1.0 release</a>.</p>
<p>Read on for more!</p>
<hr />
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.6 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.6/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.6/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.6/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.6/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Features <a href="https://stable.visual-framework.dev/updates/2021-11-30-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-extensions/">vf-extensions</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions/v/2.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3a40d0c59bbeed660f1e52797f76262b68df963f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Further revises integration with eleventy-cmd.js to allow more control from gulp.</li>
<li>https://github.com/visual-framework/vf-core/pull/1721</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-content-hub-loader/">embl-content-hub-loader</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-content-hub-loader/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59f1dfb8eb7bf69944f8f2961e55ab360a5164e7" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>contentHub html responses are nested deep in many layers of divs, so we ensure a default vf--stack applies to grid containers.</li>
<li>https://github.com/visual-framework/vf-core/pull/1725</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/ebi-header-footer/">ebi-header-footer</a> <span class="vf-badge vf-badge--secondary">2.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.1.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7531ed171b08c3cdb6a4ce48926b6e66885c8536" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>No space between EBI black bar and a hero.</li>
<li>https://github.com/visual-framework/vf-core/pull/1724</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.7.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.7.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9d5a2cc29cf8bceb7cd992ce5ba7e621b1f7afd8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Make vf-divider respect vf-stack spacing.</li>
<li>https://github.com/visual-framework/vf-core/pull/1723</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-11-30-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-navigation/">vf-navigation</a> <span class="vf-badge vf-badge--secondary">3.0.0-rc.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/3.0.0-rc.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/69d61cca814ec79fc1a41c4dbb981c4d40c60f7d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Give vf-navigation--on-this-page a bigger bottom margin on desktop as vf-u-fullbleed eats a bit of bottom margin by its nature.</li>
<li>https://github.com/visual-framework/vf-core/pull/1732</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-heading/">vf-heading</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-heading/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e27bdf3bf978d3ab17ddb44693cff5fcdeda09bd" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changes of name of variants to reflect connection to design tokens.</li>
<li>https://github.com/visual-framework/vf-core/issues/1661</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-text/">vf-text</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-text/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e27bdf3bf978d3ab17ddb44693cff5fcdeda09bd" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changes of name of variants to reflect connection to design tokens.</li>
<li>https://github.com/visual-framework/vf-core/issues/1661</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.3.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.3.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2a78bcbe0a9950452c04d8951e1fc952bcb9ba29" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Improve docs on vf-hero image sizing</li>
<li>https://github.com/visual-framework/vf-core/issues/1641</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-figure/">vf-figure</a> <span class="vf-badge vf-badge--secondary">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-figure/v/2.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/658071aa1e0ac4ff220efb5abce6ce86ce42c5a0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Support passed context.</li>
<li>https://github.com/visual-framework/vf-core/issues/1509</li>
</ul>
Component types
2021-11-26T19:33:50Z
https://stable.visual-framework.dev/guidance/component-types/
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="tokens"> Design tokens</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>All components in the Visual Framework are dependent on <a href="https://stable.visual-framework.dev/design-tokens/">its design tokens</a> that provide colour, typography, spacing and other stylistic decisions as structured data.</p>
</article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="elements"> Elements</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>Elements are the basic building blocks of the Visual Framework and includes buttons, badges, headings, text, links and so on. Every higher level component is made of these.</p>
</article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="blocks"> Blocks</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>Utilising elements along with their own styling, blocks begin to make ready-made parts of a page, such as navigation, summary, profiles, card or a search form.</p>
<p>With these you can begin to imagine a page, but they do not provide structure between blocks.</p>
</article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="containers"> Containers</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>Moving up from blocks, containers assemble collections of blocks in layout containers that can be stacked to build a page: a hero, banner, intro, video container and so on.</p>
</article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="utility"> Utility and layout</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>Giving structure and function to the fabric of the page, layout components determine reusable structure in grids, stacking layout and reusable clusters and flags.</p>
<p>These are supported by utility components (utility classes, smooth scroll, show more) that allow edge customisations and behaviour of the page.</p>
</article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="more"> Learn more</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<ul>
<li>
<p><a href="https://stable.visual-framework.dev/guidance/creating-components/">How to make a component</a></p>
</li>
<li>
<p><a href="https://stable.visual-framework.dev/guidance/components-and-patterns/">Components vs patterns</a></p>
</li></ul></article>
</section>
Rollup release 2.5.5
2021-11-23T12:10:29Z
https://stable.visual-framework.dev/updates/2021-11-23-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-23-component-updates/#overview" class="vf-navigation__link" aria-selected="true">Overview</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-23-component-updates/#features" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-23-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<p><span class="" id="overview"></span>Hot on the heels of the <a href="https://stable.visual-framework.dev/updates/2021-11-22-component-updates/">2.5.4 release</a>, this release focuses on technical tooling by updating dependencies and preparing <a href="https://www.11ty.dev/blog/eleventy-v1-beta/">for the Eleventy 1.0 release</a>.</p>
<p>To opt-in to using an Eleventy 1.0 beta, you'll need to update <code>vf-extensions</code> to at least version <code>2.0.0-alpha.1</code></p>
<p>Note that you'll find no new CSS styling or JavaScript features in this release.</p>
<p>Read on for more!</p>
<hr />
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.5 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.5/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.5/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.5/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.5/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Features <a href="https://stable.visual-framework.dev/updates/2021-11-23-component-updates/#features" id="features"></a></h3>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions/#readme">vf-extensions</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions/v/2.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/40d76295ac2f67db65ec736959966be92f1399e2" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Support Eleventy 1.0.0 change in build process functionality</li>
<li>https://github.com/visual-framework/vf-core/pull/1257</li>
<li>https://github.com/11ty/eleventy/releases/tag/v0.12.1</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-11-23-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-frctl-extensions/#readme">vf-frctl-extensions</a> <span class="vf-badge vf-badge--secondary">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-frctl-extensions/v/2.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6e68c32a2822dcf9ab49085561aab88dec02d190" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Invoke marked with <code>renderMarkdown.parse</code> for compatibility with version 4.</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-library/#readme">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2e1f9152936dd271309d9d8c179f22eb803ee10c" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update node-html-parser to 5.1.0</li>
<li>Use eleventy v1.0.0-beta.8</li>
<li>https://github.com/visual-framework/vf-core/pull/1257</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-core/#readme">vf-core</a> <span class="vf-badge vf-badge--secondary">2.2.34</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.34" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2e1f9152936dd271309d9d8c179f22eb803ee10c" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update marked to 4.0.4</li>
<li>Update browser-sync 2.27.7</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-compilation/#readme">vf-sass-compilation</a> <span class="vf-badge vf-badge--secondary">1.1.17</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-compilation/v/1.1.17" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2e1f9152936dd271309d9d8c179f22eb803ee10c" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update @babel/preset-env to 7.16.4</li>
<li>Update sass to 1.43.4</li>
<li>Update stylelint to 14.0.0</li>
<li>Update stylelint-order to 5.0.0</li>
<li>Update stylelint-scss to 4.0.0</li>
</ul>
Rollup release 2.5.4
2021-11-22T20:10:29Z
https://stable.visual-framework.dev/updates/2021-11-22-component-updates/
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-22-component-updates/#overview" class="vf-navigation__link" aria-selected="true">Overview</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-22-component-updates/#features" class="vf-navigation__link">Features</a>
</li> <li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/updates/2021-11-22-component-updates/#refinements" class="vf-navigation__link">Refinements</a>
</li> </ul>
</nav>
<p><span class="" id="overview"></span>Following the <a href="https://stable.visual-framework.dev/updates/2021-10-25-component-updates/">25 October 2021 release</a>, this release continues work on improving the quality of life for user interaction; highlights include:</p>
<ul>
<li>A new "on this page" component (<code>vf-navigation--on-this-page</code>)</li>
<li>Smooth scrolling for anchor links (<code>vf-smooth-scroll</code>)</li>
<li>A mega menu to speed deep page and lateral navigation (<code>vf-mega-menu</code>)</li>
</ul>
<p>You'll see all three of these used on the VF's component library.</p>
<p>Note: the vf-mega-menu is in particularly early stage of development (<code>alpha.1</code>) and is subject to much change — feedback welcome!</p>
<p>You'll also find a few bug fixes and optimisations. Read on for more!</p>
<hr />
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.4 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.4/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.4/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.4/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.4/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Features <a href="https://stable.visual-framework.dev/updates/2021-11-22-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-mega-menu/">vf-mega-menu</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-mega-menu/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2fdff722c95210f2aa6afb20d5dc49985b7b7af2" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Creates a mega menu.</li>
<li>https://github.com/visual-framework/vf-core/issues/1718</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-smooth-scroll/">vf-smooth-scroll</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-smooth-scroll/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/acb0d66db846fcb9a7c96304d1422b7a8612e96c" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Introduce CSS-based smooth scroll component.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-navigation/">vf-navigation</a> <span class="vf-badge vf-badge--secondary">3.0.0-rc.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/3.0.0-rc.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7f83795b0b2bb25386a11804909f8c0be70bb43b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Introduces <code>vf-navigation--on-this-page</code>.</li>
<li>Removes <code>vf-navigation--additional</code>.</li>
<li>https://github.com/visual-framework/vf-core/issues/1623</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-11-22-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/2.0.0-alpha.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6f0f44676bd5be11fb0e20f1482537d96bbb8513" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Readme formatting fixes.</li>
<li>Style import fixes for experimental angular support.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.7.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.7.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6f0f44676bd5be11fb0e20f1482537d96bbb8513" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates <code>vf-stack</code> custom properties to work nicely with <code>vf-stack</code> version 3.</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-design-tokens/#readme">vf-design-tokens</a> <span class="vf-badge vf-badge--secondary">3.6.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.6.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7f83795b0b2bb25386a11804909f8c0be70bb43b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix documentation for sassFunction interactive-color</li>
<li>https://github.com/visual-framework/vf-core/pull/1711</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-header/">vf-header</a> <span class="vf-badge vf-badge--secondary">3.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-header/v/3.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7f83795b0b2bb25386a11804909f8c0be70bb43b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Removes usage of deleted <code>vf-navigation--additional</code> variant.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-componenet-rollup/">vf-componenet-rollup</a> <span class="vf-badge vf-badge--secondary">1.4.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-componenet-rollup/v/1.4.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2fdff722c95210f2aa6afb20d5dc49985b7b7af2" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add vf-mega-menu Sass and JS.</li>
<li>https://github.com/visual-framework/vf-core/issues/1718</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-component-library/">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.1.16</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.1.16" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/21066c56e55dd813ac674a853e4ecb31c961cf84" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Utilise new <code>vf-navigation--on-this-page</code>.</li>
<li>Update project boilerplate links at https://stable.visual-framework.dev/building/</li>
</ul>
Rollup release 2.5.3
2021-10-25T17:10:29Z
https://stable.visual-framework.dev/updates/2021-10-25-component-updates/
<p>Following the <a href="https://stable.visual-framework.dev/updates/2021-10-14-component-updates/">14 October 2021 release</a>, this release continues optimisations to how <code>vf-stack</code> distributes vertical spacing.</p>
<p>With <code>vf-stack</code> now more broadly adopted, spacing now "just works" in the vast majority of cases. <code>vf-stack</code> now moves to version <code>3.0.0</code> and drops the <code>!important</code> rules allowing for utility-class based overrides where required.</p>
<p>Here's one example of how <code>vf-stack</code> now does better spacing when pairing two containers with <a href="https://stable.visual-framework.dev/components/vf-u-fullbleed"><code>vf-u-fullbleed</code></a> backgrounds; before and after:</p>
<div class="vf-grid vf-grid__col-2">
<figure class="vf-figure vf-figure--align vf-figure--align-centered">
<img class="vf-figure__image" src="https://user-images.githubusercontent.com/928100/138117806-4949ec1a-c5ab-4b97-b43a-a69d9eb348c9.png" alt="image of landing page" loading="lazy" />
<figcaption class="vf-figure__caption">Before</figcaption>
</figure>
<figure class="vf-figure vf-figure--align vf-figure--align-centered">
<img class="vf-figure__image" src="https://user-images.githubusercontent.com/928100/138117836-ab7a9909-d314-493b-b062-ee2c54d84173.png" alt="image of landing page" loading="lazy" />
<figcaption class="vf-figure__caption">After</figcaption>
</figure>
</div>
<p>We've also introduced a new <a href="https://stable.visual-framework.dev/components/vf-tabs/#vf-tabs__section--88888"><code>vf-tabs</code></a> feature for linking to a page and activating a specific tab.</p>
<p>Read below for details on the changes in each component.</p>
<p>Oh, and you'll also now see <a href="https://github.com/visual-framework/vf-core/pull/1689">an overhaul to the component previews</a>.</p>
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-25-component-updates/#features">
Features
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-25-component-updates/#refinements">
Refinements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.3 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.3/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.3/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.3/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.3/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Features <a href="https://stable.visual-framework.dev/updates/2021-10-25-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">2.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/2.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5bec7e3749c0002f6506255bb7781fe2b78c01d8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Support activation of specific vf-tabs on page load <code>#vf-tabs__section=tab_id</code></li>
<li>Exposes <code>vfTabsSwitch</code> function</li>
<li>https://github.com/visual-framework/vf-core/issues/1700</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-stack/">vf-stack</a> <span class="vf-badge vf-badge--secondary">3.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-stack/v/3.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>With <code>vf-stack</code> more consistently adopted we remove <code>!important</code> and <code>vf-u-fullbleed</code> override. Some spacing regressions are possible.</li>
<li>Sets a null vf-stack at the lowest CSS specificity.</li>
<li>https://github.com/visual-framework/vf-core/pull/1698</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-10-25-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/embl-grid/">embl-grid</a> <span class="vf-badge vf-badge--secondary">2.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-grid/v/2.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Drops custom margin-bottom, you should rely on vf-stack.</li>
<li>https://github.com/visual-framework/vf-core/pull/1698</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card-container/">vf-card-container</a> <span class="vf-badge vf-badge--secondary">3.2.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.2.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Uses vf-stack for spacing to apply to elements immediately before or after vf-card-container.</li>
<li>Removes spacing between fullbleed card containers and fullbleed items (footers, heroes)</li>
<li>https://github.com/visual-framework/vf-core/pull/1698</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-core/">vf-core</a> <span class="vf-badge vf-badge--secondary">2.2.33</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.33" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3fc168dbf2c5b2ad21d9e0d3a9e445a453f3c730" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update sass to 1.43.2</li>
<li>https://github.com/visual-framework/vf-core/pull/1677</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.6.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.6.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use vf-stack custom property for card text spacing.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-form__select/">vf-form__select</a> <span class="vf-badge vf-badge--secondary">3.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__select/v/3.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Allow margins to be handled by <code>set-type</code> mixin.</li>
<li>https://github.com/visual-framework/vf-core/pull/1698</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.3.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.3.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Drop use of vf-stack-margin--custom.</li>
<li>https://github.com/visual-framework/vf-core/pull/1698</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.7.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.7.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/42ca1f6f96cf53a19de7f35d817879f65a6ee595" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li><code>@mixin set-type</code> margin-top now inherits any applicable vf-stack margin.</li>
<li>https://github.com/visual-framework/vf-core/pull/1698</li>
</ul>
Rollup release 2.5.2
2021-10-14T22:10:29Z
https://stable.visual-framework.dev/updates/2021-10-14-component-updates/
<p>In addition to <a href="https://stable.visual-framework.dev/design-tokens/theming/#interactive">new design tokens for interactive foreground and background colours</a>, we've refreshed the <a href="https://stable.visual-framework.dev/guidance/creating-components/">guidance on the component creation process and technicalities</a>.</p>
<p>Read below for details on the changes in each component.</p>
<p>Our next release will <a href="https://github.com/visual-framework/vf-core/pull/1689">bring an overhaul to the component previews</a>.</p>
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-14-component-updates/#refinements">
Refinements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-14-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.2 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.2/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.2/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.2/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.2/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-10-14-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-design-tokens/">vf-design-tokens</a> <span class="vf-badge vf-badge--secondary">3.6.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.6.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63c3bec9fe233120497f6ba33a9dc292a53185c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add <code>interactive-color</code> tokens.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1688</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-dropdown/">vf-dropdown</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-dropdown/v/1.0.0-alpha.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63c3bec9fe233120497f6ba33a9dc292a53185c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use new interactive colour token.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1688</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.6.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.6.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63c3bec9fe233120497f6ba33a9dc292a53185c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add map to <code>interactive-color</code> sass map
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1688</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-table/">vf-table</a> <span class="vf-badge vf-badge--secondary">1.2.0-rc.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-table/v/1.2.0-rc.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63c3bec9fe233120497f6ba33a9dc292a53185c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use new interactive colour token.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1688</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">VERSIONHERE</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/VERSIONHERE" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63c3bec9fe233120497f6ba33a9dc292a53185c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use new interactive colour token.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1688</li>
</ul>
</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-10-14-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-location-nearest/">vf-location-nearest</a> <span class="vf-badge vf-badge--secondary">1.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-location-nearest/v/1.0.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0459997ca19e5d000edeb9a80b4041180e61a2fe" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Remove unneeded <code>console.log</code>.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">2.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/2.0.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0459997ca19e5d000edeb9a80b4041180e61a2fe" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Prevent hijacking of scroll when focusing tabs.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1696</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-section-header/">vf-section-header</a> <span class="vf-badge vf-badge--secondary">1.5.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.5.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63c3bec9fe233120497f6ba33a9dc292a53185c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug: following 1.5.2, ensures that links are always style correctly.</li>
</ul>
Rollup release 2.5.1
2021-10-01T10:10:29Z
https://stable.visual-framework.dev/updates/2021-10-01-component-updates/
<p>In addition to three new prototype components focused on interactivity. This release contains a number of integration-focused refinements that reduce accidental whitespace between components, particularly when placing full-bleed containers with background image (like vf-hero) before other containers.</p>
<p>Read below for details on the changes in each component.</p>
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#new">
New components
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#refinements">
Refinements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#deprecations">
Deprecations
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.1 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.1/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.1/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.1/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.1/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>New components <a href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#new" id="new"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-bookmark/">vf-bookmark</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-bookmark/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/d6e8380b1a77e54296b5529d47bc86773247e440" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Creates an initial version of vf-bookmark.</li>
<li>https://github.com/visual-framework/vf-core/discussions/1654</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-progress-indicator/">vf-progress-indicator</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-progress-indicator/v/1.0.0-alpha.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/aad7b7ac8c75a3ecf4adf1788d7da5051a83f8d7" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Basic implementation of vf-progress-indicator</li>
<li><a href="https://github.com/visual-framework/vf-core/discussions/1648">Tracking discussion</a></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-dropdown/">vf-dropdown</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-dropdown/v/1.0.0-alpha.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4db92db5a905a2833a7778d525ca4deb74d2e7bb" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Basic implementation of vf-dropdown component</li>
<li><a href="https://github.com/visual-framework/vf-core/discussions/1299">Tracking issue</a></li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/2.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a035dab03c373eb362475ca231ed10b75510f586" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds experimental angular support. See README.md for more.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card-container/">vf-card-container</a> <span class="vf-badge vf-badge--secondary">3.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6578df441fc1493805dd1cdce70f99ff39c73560" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Halves vertical spacing between <code>vf-section-header</code> and vf-cards.</li>
<li>Refines container vertical by using <code>--page-grid-gap)</code>.</li>
<li>Adds 4 column card support for when cards have no imagery.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.3.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.3.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6578df441fc1493805dd1cdce70f99ff39c73560" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Reduces vf-hero bottom margin.</li>
<li>Makes vf-hero bottom margin "smarter" by no applying when the following element uses <code>vf-u-fullwidth</code> or <code>vf-navigation</code>. In these cases vf-stack is sufficient.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-news-container/">vf-news-container</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-news-container/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6578df441fc1493805dd1cdce70f99ff39c73560" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Standardizes the featured news variant as 4 columns.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-search/">vf-search</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search/v/3.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6578df441fc1493805dd1cdce70f99ff39c73560" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Refine spacing when more than 1 inline <code>vf-form__item</code>.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-stack/">vf-stack</a> <span class="vf-badge vf-badge--secondary">2.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-stack/v/2.1.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6578df441fc1493805dd1cdce70f99ff39c73560" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>vf-stack no longer applies between a <code>vf-hero</code> and <code>vf-u-fullbleed</code>.</li>
<li>Gives more margin-top to <code>vf-u-fullbleed</code> after most items.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-summary/">vf-summary</a> <span class="vf-badge vf-badge--secondary">1.6.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.6.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6578df441fc1493805dd1cdce70f99ff39c73560" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Removes support for styling of <code>vf-summary</code> inside of <code>vf-box</code>. (this is no longer encouraged)</li>
<li>Adds support for conditional display of <code>vf-summary__text</code>.</li>
</ul>
<h3>Deprecations <a href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#deprecations" id="deprecations"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-box/">vf-box</a> <span class="vf-badge vf-badge--secondary">2.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-box/v/2.4.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ad90662b87148957d29dda623fc3f5335bb0d96f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Deprecates <code>vf-box</code>. Most use cases should now use the <code>vf-card</code> component. A new layout-specific <code>vf-box</code> may be made in the future.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-link-list/">vf-link-list</a> <span class="vf-badge vf-badge--secondary">1.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-link-list/v/1.5.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/94e50cdff3c65a884fdce82bc3f3c13b56ae512f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<p>This deprecates vf-link-list as many components are either widely unused or only seldom used — for the components that aren't yet used much we also have major revisions coming and we wish to discourage use of components that are about to be overhauled.</p>
<ul>
<li>Links List Default: use vf-list + vf-heading</li>
<li>Links List no heading: use vf-list</li>
<li>Links List Tight: use vf-list (we may add a vf-list--tight variant subject to demand)</li>
<li>Links List Very Easy: see above</li>
<li>Links List Easy: to be overhauled as vf-navigation--on-page</li>
<li>Links List Has Images: use vf-summary--has-image or vf-flag--middle</li>
</ul>
<p>Additionally there has been a confusion between when to use vf-list and vf-link-list that we're want to address.</p>
<p>https://github.com/visual-framework/vf-core/issues/1649</p>
<h4><a href="https://latest.visual-framework.dev/components/vf-header/">vf-header</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-header/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/653dd33a626f2132ee3145ed9037da45910984b5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>vf-header was an early concept on how we might accommodate multi-layers of branding ... but:
<ul>
<li>It was never successfully used in production</li>
<li>Is out of date technically and visually</li>
<li>Has questionable IA/UX merritt in the current context</li>
</ul>
</li>
<li>Therefore it is being deprecated.
<ul>
<li>No migration guidance is supplied as it is not used in production.</li>
<li>It is also being removed from the default rollup Sass/CSS.</li>
</ul>
</li>
<li>https://github.com/visual-framework/vf-core/pull/1656</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-activity-group/">vf-activity-group</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.12</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-activity-group/v/1.0.0-alpha.12" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6105538bac4fc14b919f042d3d9016cbf21bed84" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Deprecated as the component never saw wide adoption and neither the technical tooling nor use case was ever proven.</li>
<li>https://github.com/visual-framework/vf-core/pull/1650</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-activity-list/">vf-activity-list</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.11</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-activity-list/v/1.0.0-alpha.11" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6105538bac4fc14b919f042d3d9016cbf21bed84" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Deprecated as the component never saw wide adoption and neither the technical tooling nor use case was ever proven.</li>
<li>https://github.com/visual-framework/vf-core/pull/1650</li>
</ul>
<h3>Bug fixes and accessibility <a href="https://stable.visual-framework.dev/updates/2021-10-01-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.6.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.6.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4fbffd6e837b74f14b43378f00893e191837223b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Resolves an accessibility issue with contrast for the striped card subheading variant.</li>
<li>https://github.com/visual-framework/vf-core/issues/1657</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-section-header/">vf-section-header</a> <span class="vf-badge vf-badge--secondary">1.5.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.5.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7e6f2ace2d60abd26b9d7355631fb5ae03f8a12e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Accessibility: When section header is a link, it should still be wrapped an <code>h2</code></li>
<li>https://github.com/visual-framework/vf-core/issues/1683</li>
<li>Whitespace control</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">1.9.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.9.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ad90662b87148957d29dda623fc3f5335bb0d96f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li><code>--inline</code> variant Nunjucks template file cleanup.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-content-hub-loader/">embl-content-hub-loader</a> <span class="vf-badge vf-badge--secondary">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-content-hub-loader/v/1.1.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/65cbf595d19da8f6d41f62c11da550c41c36acdb" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Avoid a null variable issue when contentHub returns no results.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-notifications/">embl-notifications</a> <span class="vf-badge vf-badge--secondary">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-notifications/v/1.1.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/65cbf595d19da8f6d41f62c11da550c41c36acdb" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds <code>vf-u-margin__top--400</code> to handle cases of nested output where <code>vf-stack</code> may not reach.</li>
<li>Remove use of long deprecated <code>vf-banner--phase</code> variant and replace with <code>vf-banner--alert vf-banner--info</code>.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card-container/">vf-card-container</a> <span class="vf-badge vf-badge--secondary">3.1.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.1.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/b0b6af03959b3fd81bc05c92b8a5231e64a9c084" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix README formatting.</li>
</ul>
Landing page
2021-09-22T12:24:50Z
https://stable.visual-framework.dev/patterns/landing-page/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Landing page | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="Barcelona" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
</head>
<body class="vf-body | vf-stack vf-stack--400">
<header class="vf-header">
<header class="vf-global-header">
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
<img class="vf-logo__image" src="https://stable.visual-framework.dev/assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager" />
<span class="vf-logo__text">Visual Framework for Life Science websites</span>
</a>
<nav class="vf-navigation vf-navigation--global | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Services</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Research</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Training</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">About us</a>
</li> </ul>
</nav>
</header>
</header>
<nav class="vf-navigation vf-navigation--main | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link" aria-current="page">Quicklink 1</a>
</li>
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Quicklink 2</a>
</li>
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Quicklink 3</a>
</li>
</ul>
</nav>
<section class="vf-hero vf-hero--800 | vf-u-fullbleed" style="--vf-hero--bg-image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.png');">
<div class="vf-hero__content | vf-box | vf-stack vf-stack--400">
<h1 class="vf-hero__heading">Landing page</h1>
<p class="vf-hero__subheading">Many types of users visit landing pages which guide users along their journey, and promote other content and actions.</p>
<a class="vf-hero__link" href="https://stable.visual-framework.dev/components">Optional call to action link<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg>
</a></div>
</section>
<section class="vf-card-container vf-card-container__col-4 | vf-u-background-color--grey--lightest vf-u-fullbleed" style="--vf-card__image--aspect-ratio: 16 / 9;">
<div class="vf-card-container__inner">
<div class="vf-section-header"><h2 class="vf-section-header__heading"> Second-tier actions</h2></div>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">One card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">A card here <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Another card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Another card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
</div>
</section>
<section class="vf-news-container vf-news-container--featured | vf-stack">
<div class="vf-section-header"><h2 class="vf-section-header__heading"> Projects</h2></div>
<div class="vf-news-container__content | vf-grid vf-grid__col-4">
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">4 September 2019</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="BioSamples" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
news article summary
</a>
</h3>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">4 September 2019</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="BioSamples" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
news article summary
</a>
</h3>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">4 September 2019</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="BioSamples" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
news article summary
</a>
</h3>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">4 September 2019</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="BioSamples" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
news article summary
</a>
</h3>
</article>
</div>
<!--
<div class="vf-news-container__sidebar">
Optional vf-news-container__sidebar
</div>
-->
</section>
<hr class="vf-divider" />
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="additional"> Some additional things you might like</h2></div>
<div class="vf-grid vf-grid__col-3">
<article class="vf-card vf-card--brand vf-card--striped">
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="Image alt text" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading">A Striped Card Heading</h3><p class="vf-card__subheading">With sub–heading</p>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--striped">
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="Image alt text" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading">A Striped Card Heading</h3><p class="vf-card__subheading">With sub–heading</p>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--striped">
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="Image alt text" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading">A Striped Card Heading</h3><p class="vf-card__subheading">With sub–heading</p>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
</div>
<section class="vf-card-container vf-card-container__col-3 | vf-u-background-color-ui--white vf-u-fullbleed" style="--vf-card__image--aspect-ratio: 16 / 9;">
<div class="vf-card-container__inner">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link"><a href="javascript:Void(0);">Missions</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2><p class="vf-section-header__text">To promote molecular biology across Europe</p><p class="vf-section-header__text">To create a centre of excellence for Europe's leading young molecular biologists</p></div>
<article class="vf-card vf-card--brand vf-card--bordered">
<img src="https://stable.visual-framework.dev/assets/vf-card/assets/vf-card-example.png" alt="" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">One card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<img src="https://stable.visual-framework.dev/assets/vf-card/assets/vf-card-example.png" alt="" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">A card here <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<img src="https://stable.visual-framework.dev/assets/vf-card/assets/vf-card-example.png" alt="" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Another card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
</div>
</section>
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/landing-page.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
<footer class="vf-footer">
<div class="vf-footer__inner">
<p class="vf-footer__notice">A description of a site or organisation and what its goals are.</p>
<div class="vf-footer__links-group | vf-grid">
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">A link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Another link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Third link</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
</div>
<section class="vf-footer__legal | vf-grid vf-grid__col-1">
<ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
</ul>
<p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
<p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
<p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
<a class="vf-footer__link" href="javascript:Void(0);">Another entry</a>
</section>
</div>
</footer>
<!-- IE11 polyfill JS -->
<script nomodule="" crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-N5ZLH2KNJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N5ZLH2KNJP');
</script>
</body>
</html>
Deprecated
2021-09-22T12:24:50Z
https://stable.visual-framework.dev/patterns/boilerplate-generic/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Deprecated | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="Barcelona" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
</head>
<body class="vf-body vf-stack">
<header class="vf-header">
<header class="vf-global-header">
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
<img class="vf-logo__image" src="https://stable.visual-framework.dev/assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager" />
<span class="vf-logo__text">Visual Framework for Life Science websites</span>
</a>
<nav class="vf-navigation vf-navigation--global | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Services</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Research</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Training</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">About us</a>
</li> </ul>
</nav>
</header>
</header>
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
<ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/components" class="vf-breadcrumbs__link">Components and patterns</a>
</li>
<li class="vf-breadcrumbs__item" aria-current="location">
Deprecated
</li>
</ul>
<span class="vf-breadcrumbs__heading">Related:</span>
<ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/building" class="vf-breadcrumbs__link">Building a site</a>
</li>
</ul>
</nav>
<section class="vf-hero vf-hero--400 | vf-u-fullbleed" style="--vf-hero--bg-image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.png');">
<div class="vf-hero__content | vf-box | vf-stack vf-stack--400"><p class="vf-hero__kicker"><a href="javascript:Void(0);">VF Hamburg</a> | Structural Biology</p>
<h1 class="vf-hero__heading">Deprecated</h1>
<a class="vf-hero__link" href="https://stable.visual-framework.dev/components">See the landing page instead<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg>
</a></div>
</section>
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/boilerplate-generic.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
<footer class="vf-footer">
<div class="vf-footer__inner">
<p class="vf-footer__notice">A description of a site or organisation and what its goals are.</p>
<div class="vf-footer__links-group | vf-grid">
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">A link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Another link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Third link</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
</div>
<section class="vf-footer__legal | vf-grid vf-grid__col-1">
<ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
</ul>
<p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
<p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
<p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
<a class="vf-footer__link" href="javascript:Void(0);">Another entry</a>
</section>
</div>
</footer>
<!-- IE11 polyfill JS -->
<script nomodule="" crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-N5ZLH2KNJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N5ZLH2KNJP');
</script>
</body>
</html>
Rollup release 2.5.0
2021-07-29T15:20:29Z
https://stable.visual-framework.dev/updates/2021-07-29-component-updates/
<p>To arrive at 2.5.0 we hade five beta releases, and the stable release incorporates the many changes found in those:</p>
<ul>
<li>5 Jul 2021: <a href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/">Rollup release 2.5.0-beta.5</a>
<ul>
<li>More fully integrates typography design tokens as we create a more visually and technically consistent 2.5.0 rollup release.</li>
</ul>
</li>
<li>24 Jun 2021: <a href="https://stable.visual-framework.dev/updates/2021-06-24-component-updates/">Rollup release 2.5.0-beta.4</a>
<ul>
<li>Incorporates functional design tokens as we move forward towards a more visually and technically consistent 2.5.0 rollup release.</li>
</ul>
</li>
<li>21 Jun 2021: <a href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/">Rollup release 2.5.0-beta.3</a>
<ul>
<li>Improvements to documentation and accessibility as we move forward towards a more visually and technically consistent 2.5.0 rollup release.</li>
</ul>
</li>
<li>9 Jun 2021: <a href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/">Rollup release 2.5.0-beta.2</a>
<ul>
<li>16 component updates with bug fixes and minor improvements.</li>
</ul>
</li>
<li>31 May 2021: <a href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/">Rollup release 2.5.0-beta.1</a>
<ul>
<li>Introduced a number of small but syntax breaking changes for vf-button, vf-badge and a revised vf-tree. As well a visually refreshed vf-tabs.</li>
</ul>
</li>
</ul>
<p>Specific to this release are only a few minor bug fixes (you can read about those below).</p>
<p>This is the culmination of a many months effort across the core VF teams and contributions from across EMBL and collaborators.</p>
<p>We're of course not stopping here and our recent quarterly consultation has <a href="https://stable.visual-framework.dev/about/roadmap/">refreshed our roadmap</a>, which will bring improvements to component docs, a showcase of VF uses and improvements to navigation.</p>
<p>We're particularly excited about the navigation work and have already completed a first research and design sprint. We hope to share the outcomes and some examples soon after the summer holidays.</p>
<p>As always, you can <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">join the conversation on Slack</a>.</p>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.0 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.0/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.0/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.0/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.0/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h4><a href="https://latest.visual-framework.dev/components/embl-favicon/">embl-favicon</a> <span class="vf-badge vf-badge--secondary">1.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-favicon/v/1.0.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ff7b0c32258b2b412657109c3c78d8b0ff1a3469" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Point favicon urls to 2.5.0 stable release.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-favicon/">vf-favicon</a> <span class="vf-badge vf-badge--secondary">1.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-favicon/v/1.0.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ff7b0c32258b2b412657109c3c78d8b0ff1a3469" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Point favicon urls to 2.5.0 stable release.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-box/">vf-box</a> <span class="vf-badge vf-badge--secondary">2.3.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-box/v/2.3.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/977c2204cc76bb6913c4280ef618ecd2499cf733" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Don't set vf-box typography colours via revised set-type function.</li>
<li>https://github.com/visual-framework/vf-core/issues/1619</li>
</ul>
Rollup release 2.5.0-beta.5
2021-07-05T15:20:29Z
https://stable.visual-framework.dev/updates/2021-07-05-component-updates/
<p>The usage of <a href="https://stable.visual-framework.dev/design-tokens">design token information</a> has been improved with many components now fully using the token for typography colours. Additionally, we have improved the accessibility of the main text colour to be an off-black. Previously it was an <a href="https://github.com/visual-framework/vf-core/issues/1587#issuecomment-866668118">over-contrasted solid <code>#000</code> black</a>.</p>
<p>We've also made small fixes and documentation improvements to <code>vf-hero</code>, the ELIXIR banner and the <code>vf-profile</code>.</p>
<p>For our next beta we aim to continue documentation polish and some <a href="https://github.com/visual-framework/vf-core/discussions/1299">foundational work on navigation patterns</a> during a sprint the week of 19 July. With those done we hope to release rollup 2.5.0 by mid-August.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/#refinements">
Refinements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/#improvements">
Notable improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.0-beta.5 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.0-beta.5/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.5/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.0-beta.5/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.5/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-profile/">vf-profile</a> <span class="vf-badge vf-badge--secondary">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-profile/v/1.4.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ca59487b2f78fd230f8b8154c157f58462e7d160" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Links of <code>.vf-profile__link</code> use <code>inline-link</code> mixin.</li>
<li>Remove need for <code>.vf-u-last-item</code> on last phone number.</li>
<li>https://github.com/visual-framework/vf-core/pull/1612</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-library/#readme">vf-component-library</a> <span class="vf-badge vf-badge--secondary">1.1.11</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-library/v/1.1.11" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2804ab9d5f9f76665501d2a223ef2f6e249690b5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add ELIXIR banner to example EMBL-EBI page.</li>
<li>https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/</li>
<li>https://github.com/visual-framework/vf-core/pull/1615</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.3.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5abb0f74a4da6598819df8611009be7d9f04f431" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates the default hero spacing to be equivalent to 1200 (was: 800). This better matches the actual default usage in practice and is based off design feedback for consistency.</li>
<li>Hides 1600 variant that has gone unused.</li>
<li>Readme updated to note that most uses will want a background image at 3000 by 1000 pixels.</li>
<li>https://github.com/visual-framework/vf-core/pull/1614</li>
</ul>
<h3>Notable improvements <a href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/#improvements" id="improvements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-design-tokens/">vf-design-tokens</a> <span class="vf-badge vf-badge--secondary">3.6.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.6.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Accessibility: Set primary text to off-black.</li>
<li>Developer tools: add <code>sassFunction</code> and <code>sassMap</code> information to token meta information.</li>
<li>Reduce <code>text-body--1</code> to 28px (was 32px) in size based on design input and feedback.</li>
<li>https://github.com/visual-framework/vf-core/issues/1587</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.6.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.6.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use design tokens for text colours.</li>
<li>Requires at least <code>@visual-framework@vf-sass-config@2.6.1</code>.</li>
<li>https://github.com/visual-framework/vf-core/pull/1606</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-code-example/">vf-code-example</a> <span class="vf-badge vf-badge--secondary">1.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-code-example/v/1.3.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Darken comment colour.</li>
<li>Use neutral colours from tokens.</li>
<li>Requires at least <code>@visual-framework@vf-sass-config@2.6.1</code></li>
<li>https://github.com/visual-framework/vf-core/pull/1606</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-link-list/">vf-link-list</a> <span class="vf-badge vf-badge--secondary">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-link-list/v/1.4.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use design tokens for colors, by using mixins for <code>text-color</code> and <code>link-color</code>.</li>
<li>Requires at least <code>@visual-framework@vf-sass-config@2.6.1</code>.</li>
<li>https://github.com/visual-framework/vf-core/pull/1606</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.6.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.6.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Improve reliability of mixin for <code>link-color</code> and <code>brand-color</code> when using the default color.</li>
<li>Mixin for <code>inline-link</code> now uses <code>link-color</code> mixin.</li>
<li>Mixin for <code>set-type</code> now sets a colour depending on font sizes (opt-out by passing <code>$color: ignore</code>).</li>
<li>https://github.com/visual-framework/vf-core/pull/1606</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-07-05-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/2.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Ensure no colour is set with revised <code>set-type</code> mixin.</li>
<li>Requires at least <code>@visual-framework@vf-sass-config@2.6.1</code>.</li>
<li>https://github.com/visual-framework/vf-core/pull/1606</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-footer/">vf-footer</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-footer/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/615c394ce73e5c5d3a1504fd15c940603278ac07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Specify the footer link colours.</li>
<li>Requires at least <code>@visual-framework@vf-sass-config@2.6.1</code>.</li>
<li>https://github.com/visual-framework/vf-core/pull/1606</li>
</ul>
Rollup release 2.5.0-beta.4
2021-06-24T15:20:29Z
https://stable.visual-framework.dev/updates/2021-06-24-component-updates/
<p>The presentation of <a href="https://stable.visual-framework.dev/design-tokens">design token information</a> has been improved, grouping the range of tokens into sizing, typography and thematic colours. You'll be able to more easily access the values and Sass maps.</p>
<p>You'll also find improvements to <code>vf-breadcrumbs</code> and more flexibility with <code>vf-search-client-side</code>.</p>
<p>For our next beta, we aim to <a href="https://github.com/visual-framework/vf-core/issues/1587">improve the colour of typography</a> by moving to an off-black. We'll also begin to focus on <a href="https://github.com/visual-framework/vf-core/discussions/1560">improving navigation patterns</a>, including <a href="https://github.com/visual-framework/vf-core/discussions/1529">the footer</a>. With those done we hope to release rollup 2.5.0 in July.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-24-component-updates/#improvements">
Notable improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-24-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.0-beta.4 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.0-beta.4/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.4/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.0-beta.4/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.4/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Notable improvements <a href="https://stable.visual-framework.dev/updates/2021-06-24-component-updates/#improvements" id="improvements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-design-tokens/">vf-design-tokens</a> <span class="vf-badge vf-badge--secondary">3.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.5.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/639699b5834d274ca3086e21e06c7deb1c48bd80" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Generate json for theme colours.</li>
<li>Display theme colours in component library.</li>
<li>Deprecates old primary, secondary, tertiary themes in favour of vf-color__brand and interactive, text colours.</li>
<li>Remove extraneous <code>$</code> prefix in spacing sass variable token (this only affected a double <code>$$</code> in generated documentation).</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.6.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.6.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/639699b5834d274ca3086e21e06c7deb1c48bd80" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Changes mixin <code>set-type</code> to use the primary colour (off black) by default</li>
<li>Adds functions and imports for:
<ul>
<li><code>vf-color__text.custom-properties.scss</code></li>
<li><code>vf-color__buttons.custom-properties.scss</code></li>
<li><code>vf-color__brand.custom-properties.scss</code></li>
</ul>
</li>
<li>Prepare to deprecate <code>vf-themes.custom-properties.scss</code></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-search-client-side/">vf-search-client-side</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search-client-side/v/2.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/b78b8574a742c969c1690e1e4be3b1645d835a4e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add customisable URL prefix <code>search_client_destination_prefix</code>.</li>
<li>Cleans up typos.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1602</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-breadcrumbs-lookup/">embl-breadcrumbs-lookup</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-breadcrumbs-lookup/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/801a48274de5b760be643a94e4455ddef7d500d5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Improve breadcrumb behaviour to correctly show the active page.</li>
<li>More robust detection of current url by trying with and without a trailing <code>/</code></li>
<li>If the active facet (breadcrumb) is the current url, don't link it
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1604</li>
</ul>
</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-06-24-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-breadcrumbs/">vf-breadcrumbs</a> <span class="vf-badge vf-badge--secondary">2.0.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-breadcrumbs/v/2.0.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/801a48274de5b760be643a94e4455ddef7d500d5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug: Final breadcrumb should never have an arrow.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.9</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.9" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/79864faac3caf07d955c64ca65d15a86873e26a1" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug: correct a missing space in Nunjucks template.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1603</li>
</ul>
</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions/#readme">vf-extensions</a> <span class="vf-badge vf-badge--secondary">1.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions/v/1.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dcb2124114609404c1fd4a076198d01fada81e07" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug: in <code>gulp-build-search-index</code> ensure <code>body</code> is a string for <code>striptags</code>.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1601</li>
</ul>
</li>
</ul>
Type sizes
2021-06-22T12:24:50Z
https://stable.visual-framework.dev/design-tokens/typography/
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="brand"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/vf-font--sans.scss">Typography</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 24px; font-weight: 700; line-height: 1">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Button, regular</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">24px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">700</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-button--1)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 16px; font-weight: 700; line-height: 1">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Button, small</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">16px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">700</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-button--2)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 28px; font-weight: 500; line-height: 1.3125">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Body, extra large</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">28px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">500</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.3125</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-body--1)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 19px; font-weight: 400; line-height: 1.421">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Body, large</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">19px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">400</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.421</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-body--2)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 16px; font-weight: 400; line-height: 1.71">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Body, regular</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">16px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">400</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.71</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-body--3)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 14px; font-weight: 500; line-height: 1.57">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Body, small (alternate)</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">14px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">500</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.57</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-body--4)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 14px; font-weight: 400; line-height: 1.57">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Body, small</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">14px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">400</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.57</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-body--5)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 11px; font-weight: 600; line-height: 1.5">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Body, extra small</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">11px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">600</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.5</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-body--6)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 42px; font-weight: 700; line-height: 1.547">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Heading, extra large</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">42px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">700</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.547</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-heading--1)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 30px; font-weight: 500; line-height: 1.333">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Heading, large</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">30px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">500</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.333</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-heading--2)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 24px; font-weight: 500; line-height: 1.333">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Heading, large (alternative)</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">24px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">500</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.333</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-heading--3)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 21px; font-weight: 500; line-height: 1.29">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Heading, regular</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">21px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">500</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.29</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-heading--4)</code></p>
</section>
</article>
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: 19px; font-weight: 500; line-height: 1.5">The five boxing wizards jump quickly.</p>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Heading, small</h3><p class="vf-card__text"><span>Font Size: </span><code class="vf-code-example">19px</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code class="vf-code-example">500</code></p>
<p class="vf-card__text"><span>Line Height: </span><code class="vf-code-example">1.5</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(text-heading--5)</code></p>
</section>
</article>
</article>
Theme colours
2021-06-22T12:24:50Z
https://stable.visual-framework.dev/design-tokens/theming/
<h1 class="vf-intro__heading">Theme colours</h1>
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/theming/#brand" class="vf-navigation__link" aria-selected="true">Brand</a>
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/theming/#text" class="vf-navigation__link">Text</a>
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/theming/#interactive" class="vf-navigation__link">Interactive</a>
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/theming/#buttons" class="vf-navigation__link">Buttons</a>
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/theming/#ui" class="vf-navigation__link">UI and neutral colours</a>
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/theming/#decorative" class="vf-navigation__link">Decorative</a>
</li>
</ul>
</nav>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="brand"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-color__brand.map.scss">Brand</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="background-color: #18974c; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Brand Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#18974c</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__brand</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">brand-color(default)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__brand</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #0a5032; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Brand Colour Dark</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#0a5032</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__brand--dark</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">brand-color(dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__brand--dark</code></p>
</section>
</article>
</article>
</section>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="text"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-color__text.map.scss">Text</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="background-color: #1a1c1a; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Primary Text Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#1a1c1a</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__text--primary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">text-color(primary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">-vf-color__text--primary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #373a36; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Secondary Text Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#373a36</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__text--secondary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">text-color(secondary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">-vf-color__text--secondary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Link Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__link</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">text-color(default)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__link</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #193f90; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Link Hover Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#193f90</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__link--hover</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">text-color(hover)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__link--hover</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #193f90; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Link Focus Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#193f90</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__link--focus</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">text-color(focus)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__link--focus</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #563d82; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Link Visited Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#563d82</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__link--visited</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">text-color(visited)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__link--visited</code></p>
</section>
</article>
</article>
</section>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="interactive"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-color__interactive.map.scss">Interactive</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Interactive</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">interactive-color(default)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__interactive</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #d1e3f6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Interactive background</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#d1e3f6</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">interactive-color(background)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__interactive--background</code></p>
</section>
</article>
</article>
</section>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="buttons"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-color__buttons.map.scss">Buttons</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="background-color: #ffffff; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Primary Button Text Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#ffffff</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__text--primary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(text--primary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__text--primary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Primary Button Border Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__border--primary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(border--primary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__border--primary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Primary Button Background Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__background--primary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(background--primary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__background--primary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #193f90; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Primary Button Shadow Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#193f90</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__shadow--primary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(shadow--primary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__shadow--primary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Secondary Button Text Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__text--secondary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(text--secondary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__text--secondary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Secondary Button Border Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__border--secondary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(border--secondary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__border--secondary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #ffffff; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Secondary Button Background Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#ffffff</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__background--secondary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(background--secondary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__background--secondary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #193f90; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Secondary Button Shadow Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#193f90</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__shadow--secondary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(shadow--secondary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__shadow--secondary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #ffffff; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Tertiary Button Text Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#ffffff</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__text--tertiary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(text--tertiary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__text--tertiary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #373a36; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Tertiary Button Border Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#373a36</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__border--tertiary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(border--tertiary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__border--tertiary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #373a36; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Tertiary Button Background Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#373a36</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__background--tertiary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(background--tertiary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__background--tertiary</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #000000; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Tertiary Button Shadow Colour</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#000000</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-color__button__shadow--tertiary</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">button-color(shadow--tertiary)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color__button__shadow--tertiary</code></p>
</section>
</article>
</article>
</section>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="ui"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-ui-colors.map.scss">UI and neutral colours</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="background-color: #fffadc; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>UI Yellow</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#fffadc</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(yellow)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-ui-color--yellow</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #d32f2f; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>UI Red</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#d32f2f</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">(red)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-ui-color--red</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #ffffff; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 0</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#ffffff</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--0</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #f3f3f3; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 100</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#f3f3f3</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(100)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--100</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #e4e4e4; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 200</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#e4e4e4</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(200)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--200</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #d0d0ce; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 300</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#d0d0ce</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(300)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--300</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #a9abaa; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 400</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#a9abaa</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(400)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--400</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #8d8f8e; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 500</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#8d8f8e</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(500)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--500</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #707372; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 600</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#707372</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(600)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--600</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #54585a; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 700</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#54585a</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(700)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--700</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #373a36; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 800</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#373a36</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(800)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--800</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #000000; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Neutral 900</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#000000</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">neutral(900)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--neutral--900</code></p>
</section>
</article>
</article>
</section>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="decorative"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-colors.map.scss">Decorative brand colour palette</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="background-color: #18974c; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Green</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#18974c</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(green)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--green</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #0a5032; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Green, Darkest Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#0a5032</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(green--darkest)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--green--darkest</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #007b53; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Green, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#007b53</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(green--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--green--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #6cc24a; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Green, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#6cc24a</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(green--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--green--light</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #d0debb; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Green, Lightest Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#d0debb</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(green--lightest)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--green--lightest</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #d41645; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Red</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#d41645</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(red)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--red</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #a6093d; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Red, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#a6093d</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(red--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--red--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #e58f9e; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Red, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#e58f9e</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(red--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--red--light</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #3b6fb6; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Blue</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#3b6fb6</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(blue)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--blue</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #193f90; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Blue, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#193f90</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(blue--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--blue--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #8bb8e8; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Blue, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#8bb8e8</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(blue--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--blue--light</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #734595; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Purple</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#734595</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(purple)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--purple</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #563d82; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Purple, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#563d82</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(purple--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--purple--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #cba3d8; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Purple, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#cba3d8</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(purple--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--purple--light</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #f49e17; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Orange</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#f49e17</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(orange)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--orange</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #b65417; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Orange, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#b65417</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(orange--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--orange--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #efc06e; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Orange, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#efc06e</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(orange--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--orange--light</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #f4c61f; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Yellow</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#f4c61f</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(yellow)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--yellow</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #ffb81c; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Yellow, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#ffb81c</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(yellow--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--yellow--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #fdd757; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Yellow, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#fdd757</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(yellow--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--yellow--light</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #a1be1f; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Bright Green</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#a1be1f</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(bright-green)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--bright-green</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #7fb428; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Bright Green, Dark Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#7fb428</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(bright-green--dark)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--bright-green--dark</code></p>
</section>
</article>
<article class="vf-card">
<div style="background-color: #e2e868; height: 200px; width: 100%;"></div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>EMBL Bright Green, Light Tint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">#e2e868</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">color(bright-green--light)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-color--bright-green--light</code></p>
</section>
</article>
</article>
</section>
Rollup release 2.5.0-beta.3
2021-06-21T15:20:29Z
https://stable.visual-framework.dev/updates/2021-06-21-component-updates/
<p>You'll find improvements to <code>vf-content</code> typography spacing, <code>vf-figure</code> type and assorted improvements to guidance and documentation on when to use which components.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/#improvements">
Notable improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/#documentation">
Documentation and accessibility
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.0-beta.3 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.0-beta.3/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.3/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.0-beta.3/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.3/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<br />
<h3>Notable improvements <a href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/#improvements" id="improvements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-content/">vf-content</a> <span class="vf-badge vf-badge--secondary">1.6.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.6.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/cf627d23e5f53acf23a465d8ee4865a7324ae2a8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Use vf-spacing tokens for heading margins.</li>
<li>Reduce bottom margin on headings to be more consistent with overall typography, design kit.</li>
<li>https://github.com/visual-framework/vf-core/pull/1589</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-figure/">vf-figure</a> <span class="vf-badge vf-badge--secondary">1.5.7</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-figure/v/1.5.7" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/103a719ec144b4148d25d4eacfb5cc6d6f2fde8b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Darken and increase figure text size
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1582</li>
</ul>
</li>
<li>Figures take a responsive and centered layout, which is most typical.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1583</li>
</ul>
</li>
</ul>
<h3>Documentation and accessibility <a href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/#documentation" id="documentation"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.8</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.8" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6a6513b093d4e888e51c72832ac8306a96851283" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Documentation: clarity on using card vs summary components.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1592</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-summary/">vf-summary</a> <span class="vf-badge vf-badge--secondary">1.5.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.5.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6a6513b093d4e888e51c72832ac8306a96851283" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Documentation: clarity on using card vs summary components.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1592</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-search-client-side/">vf-search-client-side</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search-client-side/v/2.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bdbd0eecb53b971457bead7f2054d6097cecb00a" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Accessibility: add <code>search_client_id</code> to configure <code>label</code> <code>for</code> and <code>input</code> <code>name</code> attributes.</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-06-21-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/embl-breadcrumbs-lookup/">embl-breadcrumbs-lookup</a> <span class="vf-badge vf-badge--secondary">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-breadcrumbs-lookup/v/1.1.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8d0beabc2958c4c83411a42ffd955b9bcaf4f1b0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix: Breadcrumbs repeat if init method is repeatedly called on same page.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1593</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-code-example/">vf-code-example</a> <span class="vf-badge vf-badge--secondary">1.2.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-code-example/v/1.2.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/cf627d23e5f53acf23a465d8ee4865a7324ae2a8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add a bottom margin to <code>vf-code-example__pre</code>
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1589</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.5.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.5.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/103a719ec144b4148d25d4eacfb5cc6d6f2fde8b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Darken and increase figure text size
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1582</li>
</ul>
</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-core/#readme">vf-core</a> <span class="vf-badge vf-badge--secondary">2.2.28</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.28" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/879337aacdba5328aa41fb4059e91784b99f09e7" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Pin <code>marked</code> dependency to 2.0.7, as 2.1.0 breaks support in node 12.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1590</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/2.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/339256917e5c26546e8f10bff68a95a0d18e1049" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Bug: Add missing <code>@import 'vf-global-variables';</code> to generate standalone <code>vf-tabs.css</code>.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1581</li>
</ul>
</li>
</ul>
Rollup release 2.5.0-beta.2
2021-06-09T16:20:29Z
https://stable.visual-framework.dev/updates/2021-06-09-component-updates/
<p>In addition to a number of minor fixes, this rollup release introduces a first alpha version of the ELIXIR banner for the VF 2.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/#new">
New component
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/#improvements">
Notable improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.0-beta.2 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.0-beta.2/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.2/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.0-beta.2/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.2/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>New <a href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/#new" id="new"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner-elixir/">vf-banner-elixir</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner-elixir/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/295b9a57bcb766092866748b1d1ab95a07e840ba" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Initial version of the ELIXIR banner for services.</li>
<li>https://github.com/visual-framework/vf-core/issues/1572</li>
</ul>
<h3>Notable improvements <a href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/#improvements" id="improvements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-content/">vf-content</a> <span class="vf-badge vf-badge--secondary">1.5.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.5.6" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9786b2d11c983731fc55836b404e78b674ad1448" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds support for responsive <code>img</code> and <code>figure</code> elements</li>
<li>https://github.com/visual-framework/vf-core/issues/1412</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-details/">vf-details</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-details/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/38af6b034934efb5dcaea09d34342747b8253bfe" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixes the missing "about" in the readme.</li>
<li>Shows "pointer" on hover.</li>
<li>uses interactive blue colour.</li>
<li>Shows summary child elements as inline.</li>
<li>https://github.com/visual-framework/vf-core/issues/1417</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.7</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.7" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/1525ccb6b91b18a0d4fc3daab811829405aa97a9" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixes the vertical centering of the svg arrow on vf-card titles. Also aligns better with the Figma design kit.</li>
<li>https://github.com/visual-framework/vf-core/pull/1562</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-section-header/">vf-section-header</a> <span class="vf-badge vf-badge--secondary">1.5.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.5.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/1525ccb6b91b18a0d4fc3daab811829405aa97a9" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixes the vertical centering of the svg arrow on vf-section-header. Also aligns better with the Figma design kit.</li>
<li>https://github.com/visual-framework/vf-core/pull/1562</li>
</ul>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-06-09-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-intro/">vf-intro</a> <span class="vf-badge vf-badge--secondary">1.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.5.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9a07918f28349ce5754068d39850d7c75622d09d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Remove <code>vf-badge--phases</code> after upstream removal in vf-badge@2.0.0</li>
<li>https://github.com/visual-framework/vf-core/pull/1546</li>
<li>Improve placement of <code>.vf-intro__heading--has-tag .vf-badge</code> to facilitate assorted widths and multiline headings</li>
<li>https://github.com/visual-framework/vf-core/pull/1579</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-flag/">vf-flag</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-flag/v/1.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/74c2cb6b0c3546ab5a23fa526c164b2bff701b42" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Handle image widths: as vf-flag uses a table layout, this does not mix well with <code>vf-content img</code> and max-width 100%.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-back-to-top/">vf-back-to-top</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-back-to-top/v/1.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/61d3dbdca4dc60afc7f602a5a21e6f6f3167f632" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixed a null reference error.</li>
<li><a href="https://github.com/visual-framework/vf-core/issues/1567">Tracking issue</a></li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator/#readme">vf-component-generator</a> <span class="vf-badge vf-badge--secondary">1.1.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator/v/1.1.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5ea9b9cc49f4620479ebd7ae83031af003976022" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix a bug in <code>camelize</code> function that only replaced first <code>-</code>.</li>
<li>In <code>README.md</code> template, reference the component <code>vfName.scss</code> file and not <code>index.scss</code></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/ebi-header-footer/">ebi-header-footer</a> <span class="vf-badge vf-badge--secondary">2.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8453f1f132ce9a246eb0349aef01a823e8e503d7" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix readme for proper display in component library docs.</li>
<li>For ebi-header-footer--footer.njk add context <code>disable_ebi_1x_cookie_banner</code> to disable EBI 1.x cookie banner (defaults to true).</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-notifications/">embl-notifications</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-notifications/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9531fe762392a0b885906fa6a6500d759d6596b0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Capture all links without <code>vf-banner__link</code> class.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">1.9.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.9.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9531fe762392a0b885906fa6a6500d759d6596b0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Correct "tertary" typo in "vf-button--tertiary".</li>
<li>Correct an issue in naming of Yaml keys that resulted in null values.</li>
<li><code>vf-data-protection-banner__text</code> -> <code>banner__text</code></li>
<li><code>vf-data-protection-banner__link</code> -> <code>banner__link</code></li>
<li><code>vf-banner--inline_href</code> -> <code>banner__inline_href</code></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/ebi-vf1-integration/">ebi-vf1-integration</a> <span class="vf-badge vf-badge--secondary">1.0.7</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-vf1-integration/v/1.0.7" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dd6c5e64c78a6594b9b60c63a59ddb5d862d3ba4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Update max-width to match vf-body.</li>
<li>Fix a clash with vf-hero that uses text-decoration-thickness.</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-core/#readme">vf-core</a> <span class="vf-badge vf-badge--secondary">2.2.27</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.27" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f00ed69327bf97eb9d3974caf36c9d58a1f61e0a" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Require node 12 or greater. Node 10 is now out of support and many dependencies no longer work.</li>
</ul>
Rollup release 2.5.0-beta.1
2021-05-31T12:20:29Z
https://stable.visual-framework.dev/updates/2021-05-31-component-updates/
<p>In addition to a number of minor fixes, this rollup release introduces a number of small but syntax breaking changes for <code>vf-button</code>, <code>vf-badge</code> and a revised <code>vf-tree</code>.</p>
<p>You'll also find a visually refreshed <code>vf-tabs</code> along with many bug fixes and minor improvements to this component library interface.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/#features">
Major features
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/#improvements">
Notable improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.5.0-beta.1 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.5.0-beta.1/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.1/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.5.0-beta.1/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.5.0-beta.1/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>Features <a href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/#features" id="features"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-badge/">vf-badge</a> <span class="vf-badge vf-badge--secondary">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-badge/v/2.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a09ce2060533e2203135f03ed05d4609a07469c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Makes the badges match the naming convention of the <code>vf-button</code>.</li>
<li>Makes the badges match the styling of the <code>vf-button</code>.</li>
<li>Removes any old deprecated variants and tidies up the code.</li>
<li>Migration instructions:
<ul>
<li>If you were using the "Outline Primary" variant you should use the "Secondary" variant now. This replaces the classes of <code>vf-badge--primary</code> and <code>vf-badge--outline</code> with <code>vf-badge--secondary</code>.</li>
<li>If you were using the "Default" variant you should use the "Tertiary" variant now. This adds the class <code>vf-badge--tertiary</code>.</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/2.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2473b235ae098d50e97ba0cc54ca8617e6a1116d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Removes deprecated code.</li>
<li>Turns the primary, secondary, tertiary into actual things - rather than aliases.</li>
<li>Migration instructions:
<ul>
<li>If you were using the "Outline Primary" variant you should use the "Secondary" variant now. This replaces the classes of vf-button--primary and vf-button--outline with vf-badge--secondary.</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/2.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/d56ee3ae5624e08bdb3fba2c7b7a29c245245a25" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates the styling to match the design direction.</li>
<li>This is a no-code-change update. It has been marked as visually breaking due to the major design change.</li>
<li>https://github.com/visual-framework/vf-core/pull/1551</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tree/">vf-tree</a> <span class="vf-badge vf-badge--secondary">2.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tree/v/2.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9e9ffc175ed18e7b3b9ecdd68a5954e3abf0bf92" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>makes it cleaner.</li>
<li>changes how selected and expanded are styled.</li>
<li>makes the text link full width.</li>
<li>still allows for the button icon to show/hide.</li>
</ul>
<h3>Notable improvements <a href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/#improvements" id="improvements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-blockquote/">vf-blockquote</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-blockquote/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ab352e732a5203c6ee0875a41ae4209de50b2857" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds context <code>if</code> statement to make it useable in vf-11ty.</li>
<li>adds <code>cite</code> element.</li>
<li>adds <code>vf-stack</code>.</li>
<li>kept `` so it shouldn't break</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-pagination/">vf-pagination</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-pagination/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/09d7d9b9a0f82dca773f65ff1dbfa68a88b8fec3" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>reduces the amount of variants to 'start again'.</li>
<li>centres the default variant</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-summary/">vf-summary</a> <span class="vf-badge vf-badge--secondary">1.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.5.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5b4e8c6e994d86219af7c4d1a2935991cf452eec" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds individual context yml/njk code per file.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">1.4.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/1.4.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/fa2ddbd4028583af07e63fd2b9ad6444f1067914" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added <code>link</code> theme button variant. This variant is similar to link style.</li>
</ul>
<h3>Bug fixes and optimisations <a href="https://stable.visual-framework.dev/updates/2021-05-31-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-badge/">vf-badge</a> <span class="vf-badge vf-badge--secondary">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-badge/v/2.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a09ce2060533e2203135f03ed05d4609a07469c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Correct "secondry" typo.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-content-hub-loader/">embl-content-hub-loader</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-content-hub-loader/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/d48aaa09d738221d583c082a8c7a42fcd4ff503a" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds overrides for more permutations of where the vf-global header lives.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">1.8.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.8.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/d48aaa09d738221d583c082a8c7a42fcd4ff503a" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds overrides for more permutations of where the vf-global header lives</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-table/">vf-table</a> <span class="vf-badge vf-badge--secondary"> 1.2.0-rc.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-table/v/%201.2.0-rc.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0d13a3ca61224a7e2c251325a26978fcb318e516" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>restyles the arrows on sortable tables</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.6" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/cdde72676c01f6ab84ad647e2dff2e1f361eab9e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixes issue with modifiers
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1523</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-breadcrumbs-lookup/">embl-breadcrumbs-lookup</a> <span class="vf-badge vf-badge--secondary">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-breadcrumbs-lookup/v/1.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/64fdcc130ee319c42cb0130758b5214df53dd95f" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Remove diacritics for name processing into people page URLs.</li>
<li>Correct "breadcumbs" typos.</li>
<li>Finish conversion of emblGetTaxonomy into a standalone function and export it.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-analytics-google/">vf-analytics-google</a> <span class="vf-badge vf-badge--secondary">1.0.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-analytics-google/v/1.0.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dcd342f915aef184b382820ea484ab495a5e1737" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix an issue on ipmeta.io tracking in <code>riskCheck</code> function where <code>input</code> is undefined.</li>
</ul>
JavaScript: mitigating broken experiences
2021-05-19T19:33:50Z
https://stable.visual-framework.dev/guidance/javascript-required/
<p>Before using a JavaScript-powered solution, the product team should ask themselves:</p>
<ol>
<li>What are the benefits for the project and user of using a JavaScript solution?
<ul>
<li>Examples: Improved interactivity and state management or specific features.</li>
</ul>
</li>
<li>What are the downsides?
<ul>
<li>Examples: Increased page size, computer requirements, technical complexity, SEO complexity.</li>
</ul>
</li>
<li>What recourse do users have when JavaScript fails, is disabled or an older browser is used?
<ul>
<li>See also: <a href="https://stable.visual-framework.dev/guidance/browser-support/">Browser support guidance</a></li>
<li>The VF supports browsers released within the last five years and have JavaScript enabled.</li>
<li><a href="https://duckduckgo.com/?q=prerendering+javascript+frameworks">Pre-rendering your JavaScript application</a> may have many benefits.</li>
</ul>
</li>
</ol>
<p>You should only use JavaScript frameworks when a high level of interactivity is needed and provide robust text or fallback functionality and make use of <a href="https://stable.visual-framework.dev/patterns/error-pages/">the JavaScript error template</a>.</p>
<p>Further reading: <a href="https://www.gov.uk/service-manual/technology/using-progressive-enhancement#do-not-assume-users-turn-off-css-or-javascript">Gov.uk provides additional reasoning</a> on why you should not assume your JavaScript application works for all users.</p>
Announcing rollup release 2.4.15
2021-05-19T10:20:29Z
https://stable.visual-framework.dev/updates/2021-05-19-component-updates/
<p>A minor release that allows for links to be added to <code>vf-section-header</code> text content and removes and deprecates various <code>vf-badge</code> variants.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-19-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-19-component-updates/#optimisations">
Optimisations
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-19-component-updates/#react">
React support
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.15 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.15/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.15/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.15/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.15/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-05-19-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-section-header/">vf-section-header</a> <span class="vf-badge vf-badge--secondary">1.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.5.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8fa14b80d1dffc4cd8d81e00cf6143217c8e8842" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>makes it possible to use HTML in a section header text item</li>
</ul>
<h3>Deprecations <a href="https://stable.visual-framework.dev/updates/2021-05-19-component-updates/#deprecations" id="deprecations"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-badge/">vf-badge</a> <span class="vf-badge vf-badge--secondary">1.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-badge/v/1.3.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/58b324dc50560f7e6f314d02250b8e3141150e34" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>deprecates secondary and tertiary variants</li>
<li>makes the default the grey (tertiary) colour</li>
</ul>
Announcing rollup release 2.4.14
2021-05-05T14:49:29Z
https://stable.visual-framework.dev/updates/2021-05-05-component-updates/
<p>A minor release that introduces adds React support for vf-button, adds several fixes and optimisations and <a href="https://github.com/visual-framework/vf-core/issues/1175">continues work on the component library interface</a>. We've also improved worked to refine the <a href="https://stable.visual-framework.dev/components/#patterns">boilerplate example pattern pages</a>.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-05-component-updates/#bugs">
Bug fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-05-component-updates/#optimisations">
Optimisations
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-05-05-component-updates/#react">
React support
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.14 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.14/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.14/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.14/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.14/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>Bug fixes <a href="https://stable.visual-framework.dev/updates/2021-05-05-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.2.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.2.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/734c844dc61f88bb14a79691b41504dbefb5803e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixes width issue on mobile introduced when making the hero content a little wider.</li>
<li>Removes unused <code>vf-intro-group.png</code> sample hero image.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/ebi-header-footer/">ebi-header-footer</a> <span class="vf-badge vf-badge--secondary">2.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.0.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/434293e283dd705f20d89197d51f6395c2df42fc" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Directly load CSS for global header to prevent flashes of non-styled elements.</li>
</ul>
<h3>Optimisations <a href="https://stable.visual-framework.dev/updates/2021-05-05-component-updates/#optimisations" id="optimisations"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-profile/">vf-profile</a> <span class="vf-badge vf-badge--secondary">1.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-profile/v/1.3.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f5ac7c9b38e1f1991956bfef7c071a44bb2ead95" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>deprecates the Mortal Kombat variants.</li>
<li>deprecates the theming.</li>
<li>makes regular and small font sizes more consistent.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-tabs/">vf-tabs</a> <span class="vf-badge vf-badge--secondary">1.2.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/1.2.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/434293e283dd705f20d89197d51f6395c2df42fc" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Conditional support of tab_heading in vf-tabs.njk template.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-content/">vf-content</a> <span class="vf-badge vf-badge--secondary">1.5.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.5.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/434293e283dd705f20d89197d51f6395c2df42fc" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Remove author information from example, as we have a dedicated vf-article-meta-information component.</li>
<li>Fix blockquote bottom margin.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-logo/">embl-logo</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-logo/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/68163d4aace6dc925d544e9803562907241d0fd0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Hides unused <code>--extreme</code> variant.</li>
</ul>
<h3>React support <a href="https://stable.visual-framework.dev/updates/2021-05-05-component-updates/#react" id="react"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-button/">vf-button</a> <span class="vf-badge vf-badge--secondary">1.4.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/1.4.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3e085587067b7ca60ca11b4ffbfd18dd8d716897" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Added react implementation of button</li>
<li>https://github.com/visual-framework/vf-core/pull/1416</li>
<li>(Experimental) React documentation: https://visual-framework.github.io/vf-react/#/components-showcase</li>
</ul>
Article example pattern (with EMBL header, footer)
2021-04-29T12:24:50Z
https://stable.visual-framework.dev/patterns/article/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Article example pattern (with EMBL header, footer) | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<!-- Link to EMBL.org news rss -->
<link href="https://www.embl.org/news/feed/" type="application/rss+xml" rel="alternate" title="EMBL News" />
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="Barcelona" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
<!--
Want to build a site with the Visual Framework?
---
You can copy the CSS and JS you find here, but for the best experience see the building guide:
https://stable.visual-framework.dev/building/
-->
</head>
<body class="vf-body vf-stack">
<!-- embl global header -->
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=108434&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
<ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/components" class="vf-breadcrumbs__link">Components and patterns</a>
</li>
<li class="vf-breadcrumbs__item" aria-current="location">
Article example pattern (with EMBL header, footer)
</li>
</ul>
<span class="vf-breadcrumbs__heading">Related:</span>
<ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/building" class="vf-breadcrumbs__link">Building a site</a>
</li>
</ul>
</nav>
<section class="vf-intro" id="intro">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Article example pattern
<a href="javascript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a> </h1>
<h2 class="vf-intro__subheading">I'm a nice subheading</h2>
<p class="vf-lede">EMBL’s future directions will be driven by the goal of understanding life in the context of its environment.</p>
<p class="vf-intro__text">We now have the tools and technologies to explore these processes, allowing us to understand life in its natural context from the level of molecules to whole ecosystems.</p>
</div>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div>
<aside class="vf-article-meta-information">
<div class="vf-author | vf-article-meta-info__author">
<p class="vf-author__name">
<a class="vf-link" href="javascript:Void(0);">First-Name Surname</a>
</p>
<a class="vf-author--avatar__link | vf-link" href="javascript:Void(0);">
<!-- wrapping the avatar in a link is optional -->
<img class="vf-author--avatar" src="https://avatars3.githubusercontent.com/u/925197?s=88&v=4" alt="FirstName Surname" loading="lazy" />
</a>
</div>
<div class="vf-meta__details">
<p class="vf-meta__date">14 February 2019</p>
<p class="vf-meta__topics">Topics:
<a href="javascript:Void(0);" class="vf-link">cancer</a>
<a href="javascript:Void(0);" class="vf-link">history</a>
</p></div>
<div class="vf-meta__comments">
<p class"vf-meta__text"="">Comments — <a href="javascript:Void(0);" class="vf-link">61</a></p>
</div>
<div class="vf-links vf-links--tight vf-links__list--s">
<p class="vf-links__heading">On this page</p>
<ul class="vf-links__list vf-links__list--secondary | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">heading link 1</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">heading link 2</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">heading link 3</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">heading link 4</a>
</li>
</ul>
</div>
</aside>
</div>
<div class="vf-content">
<p><em>Lorem markdownum</em> ostendens valeant. Salmacis timendi: dabat sit factorum
poscit, vacuas vultus haud etiamnum vomit victorem. Et mortes odoro, adfixa iram
tradere dixit, anilia pondere quia genusque flectitque torvo.</p>
<p>Refer abit credar, est subiecit oblita. Agros te nomen et infelix incerto,
superare torsit.</p>
<h3>Aeolis bellum</h3>
<p>Olim vocabula, tangit, nec quid quam gravis. Novit unde signum!</p>
<blockquote>
<p>Parte ad deam culmine sensi, profuit annum. Sermone atque attonitus vidit
<em>centum ferventibus sitientes</em> alimenta sicut tutela. Militis horrescere en
<em>reverti</em>, mandentemque <em>petita omnes visaque</em> volant an Peloro, quo et <em>puer
non</em>, mox longe. Ius <em>suo passu roboris</em>, pater domos <em>patris</em> instar curru
est concubitus vitta latitantem ossa calido!</p>
</blockquote>
<p><a href="http://index-hylen.net/">Facto iussit</a> mora, terrigenis optaris forte
consuetaque illa? Et unam in favet, eversae fides somniferis; in Peleu. Curru
hunc imperiumque ipsum; tantum sic. Agendum et audax.</p>
</div>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div> <div class="vf-section-header"><h2 class="vf-section-header__heading"> You can include section headers too</h2></div> </div>
<div class="vf-content">
<p>Ossa <em>sanguine</em>. Non ne damnatque adfatur hospitibus rursus, vimina, hominis, et
exterrita caligine. <em>Est</em> vidit aliquis missos gaudia miserabilis <a href="http://inguina.net/">quid nescit
gratia</a> dixit nocuit cum vulnifico pulmone vixque
ambitiosus. Pater procul operique; parvo pennisque: solis fungi; nati nodosaque
et igitur, subiti cura. Possim flammas, terris ubi ima male sacra mater caput
dulci virginis moenia <strong>virescere</strong> ferit est <em>praeruptam aspicis</em> conditor.</p>
<p>Iustos nodosaque hanc Colchi, vult germanam eritque, res per prodigiosa <em>in
facit</em>. Et agreste Parnasos tegit terrae Ampycidesque ventis fuisset sanguine ex
<em>colla</em> digitis miserabilis suasque innumeris ululatuque plus.</p>
<ul>
<li>Culpatque fuit</li>
<li>Facite et aper oris quod ignavis</li>
<li>Et reclinis properantibus mente insculpunt quinos heros</li>
</ul>
<table>
<thead>
<tr>
<th scope="col">Event</th>
<th scope="col">Date</th>
<th scope="col">Type</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>dave</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
<td>roger</td>
<td>London, U.K.</td>
</tr>
<tr>
<td>dave</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
<td>roger</td>
<td>London, U.K.</td>
</tr>
<tr>
<td>dave</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td>roger</td>
<td>London, U.K.</td>
</tr>
</tbody>
</table>
<p>Iuvene ad virtute et mansit, consilioque potentem ignea. Gemmata quereretur
recubare arae omen Orithyia Saeculaque mores scelus; penna quod aut opaca
animaeque ventos hausitque recens matri? Est in ingentem utile auctor latratibus
sperata non sua, vultusque vestes, me sororis Iovis, <a href="http://www.tumultus.net/nervo.aspx">ore
tanta</a>. Corpora de volat mecumque hederae,
Iunonis coeptis, non animi et cornua invita cunasque caecisque.</p>
</div>
<figure class="vf-figure">
<img class="vf-figure__image" src="https://stable.visual-framework.dev/assets/vf-figure/assets/figure-example.png" alt="" loading="lazy" />
<figcaption class="vf-figure__caption">Version, 1982, Adenovirus with 217 dots.</figcaption>
</figure>
</section>
<hr class="vf-divider" />
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/article.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
<!-- embl global footer -->
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=108436&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
<!-- IE11 polyfill JS -->
<script nomodule="" crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-N5ZLH2KNJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N5ZLH2KNJP');
</script>
</body>
</html>
Announcing rollup release 2.4.13
2021-04-20T14:49:29Z
https://stable.visual-framework.dev/updates/2021-04-20-component-updates/
<p>A minor release that introduces a new component, adds several fixes and <a href="https://stable.visual-framework.dev/guidance/accessibility/">new accessibility guidance</a>.</p>
<p>Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-04-20-component-updates/#new">
New component
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-04-20-component-updates/#tables">
Table improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-04-20-component-updates/#refinements">
Refinements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.13 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.13/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.13/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.13/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.13/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>New component <a href="https://stable.visual-framework.dev/updates/2021-04-20-component-updates/#new" id="new"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-back-to-top/">vf-back-to-top</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-back-to-top/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9ae5261bdd7106160268a50fddbd575013c01d81" class="vf-badge vf-badge--secondary">git diff</a></h4>
<p>Contributor Nitin Jadhav <a href="https://github.com/visual-framework/vf-core/pull/1490">has made his first new component</a> 🥳</p>
<ul>
<li>Basic implementation of vf-back-to-top component</li>
<li><a href="https://github.com/visual-framework/vf-core/issues/1483">Tracking issue</a></li>
<li>Further UX and visual design work will follow</li>
</ul>
<h3>Tables <a href="https://stable.visual-framework.dev/updates/2021-04-20-component-updates/#tables" id="tables"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-table/">vf-table</a> <span class="vf-badge vf-badge--secondary">1.2.0-rc.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-table/v/1.2.0-rc.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/1635ff3b77569cffe6f0c2766b2d008e0c2aaa47" class="vf-badge vf-badge--secondary">git diff</a></h4>
<p>The vf-table component is <a href="https://github.com/visual-framework/vf-core/discussions/1474">beginning a journey of improved UX, visual design and technical appearance</a>.</p>
<ul>
<li>makes the <code>--striped</code> variant the default styling.</li>
<li>deprecates <code>--striped</code>, <code>--bordered</code>, <code>--tight</code>, <code>--loose</code> variants.</li>
<li>tidies up CSS ordering of rulesets to match more the component.</li>
<li>makes the <code>--sortable</code> icons on by default before a bigger refactor.</li>
</ul>
<h3>Refinements <a href="https://stable.visual-framework.dev/updates/2021-04-20-component-updates/#refinements" id="refinements"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.5" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c28239263fc988321e186446b66ac42c48ee9512" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>corrects colouring of visited link in heading on striped variant.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.2.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.2.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/939a35a9d82e74d0f3d17bab449bd0b018a5fe8c" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Allows html (for links) in vf-hero__subheading (and a few other fields) when using the Nunjucks template.</li>
<li>https://github.com/visual-framework/vf-core/pull/1485</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator/#readme">vf-component-generator</a> <span class="vf-badge vf-badge--secondary">1.1.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator/v/1.1.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0b76ac1fc5ee937f7accc7d11f4b3babc2ef490d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Add accessibility section to README.md template.</li>
</ul>
Accessibility guidelines
2021-04-09T19:33:50Z
https://stable.visual-framework.dev/guidance/accessibility/
<h2>Reality <a id="reality"></a></h2>
<p>People vary in their ability to see, hear, read text and use the mouse. For example, at least <a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps#understanding-accessibility">1 in 5 people in the UK have a long term illness, impairment or disability</a> that may make it harder for them to use a website. Many more have a temporary disability.</p>
<p>So when we think about making a quality website, we should focus beyond technical performance metrics, bugs and good looks. The standard of quality should also include usability and accessibility so that the site can be used by as many people as possible.</p>
<p>For Visual Framework sites we recommend the WCAG 2.1 AA accessibility level. This is both the legal level <a href="https://www.deque.com/blog/eu-web-accessibility-compliance-and-legislation/">required by the European Union</a> (and other national governments) and it is a level that should impose a reasonable amount of effort on develop and design. <a href="https://digitalaccessibilitycentre.org/index.php/blog/20-diary/187-the-icing-on-the-cake-the-difference-between-aa-and-aaa-compliance">As the Digital Accessibility Centre summarizes</a>: “AA is accepted as a very good commitment to accessibility”.</p>
<h3>Sidebar: what-a-cag? <a id="sidebar"></a></h3>
<p>Read at all on web accessibility and you'll see: "WCAG", "AA" and "AAA". <a href="https://www.w3.org/TR/WCAG20/">The Web Content Accessibility Guidelines (WCAG)</a> is set of widely recognised recommendations for making websites and apps accessible to people with disabilities. <a href="https://tetralogical.com/articles/wcag-primer/">The WCAG primer</a> explains these guidelines and how to use them.</p>
<h2>An accessible start <a id="start"></a></h2>
<p>This is not a topic we can fully cover in 1000 words, so how can you get started?</p>
<ol>
<li>Good: Use an automated testing tool</li>
<li>Better: Refer to checklists</li>
<li>Best: Real human testing</li>
</ol>
<h3>Automated tools</h3>
<ul>
<li><a href="https://wave.webaim.org/report#/http://stable.visual-framework.dev/">WAVE</a>, the Web Accessibility Evaluation Tool, is a free service and <a href="https://wave.webaim.org/extension/">browser extension</a> to find common errors.</li>
<li><a href="https://accessibilityinsights.io/en/">Accessibility Insights</a> is a desktop, mobile integration and browser extension from Microsoft.</li>
<li><a href="https://www.codecademy.com/articles/how-to-setup-screen-reader">Set up a screen reader</a> and use it to test your site.</li>
</ul>
<p>You can find many more tools at <a href="https://www.a11yproject.com/resources/#tools">The Accessibility Project</a>.</p>
<p>Automated online tools and browser extensions can help immensely, but they are not everything. We need also to spend time familiarising ourselves with the challenges and techniques, read on for more ideas and approaches.</p>
<h3>Checklist</h3>
<p>In addition to lots of good advice, The Accessibility Project <a href="https://www.a11yproject.com/checklist/">has a comprehensive checklist</a>. This checklist uses WCAG as a reference point and can help you check your WCAG compliance. Although the checklist cannot guarantee that your site is accessible, addressing the issues called out in this checklist will help improve the experience for everyone who uses your site.</p>
<h3>Real humans</h3>
<p>When working with your UX colleagues (or doing your own UX planning and testing) spend time trying to recruit testers and participants who have impairments.</p>
<h2>In conclusion ... <a id="conclusion"></a></h2>
<ul>
<li>Anticipate the needs of these users and test for them with tools</li>
<li>Include users in your testing</li>
<li>Let users get in touch: be sure to have a contact address for feedback on bugs and problems</li>
</ul>
<p>And remember it's about more than colour: Often discussed is the AA and AAA accessibility of colour contrast but accessibility is equally about type size, spacing and if text can be read aloud.</p>
<h2>Related <a id="related"></a></h2>
<ul>
<li>
<p><a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps">Gov.uk: Understanding accessibility requirements for public sector bodies</a></p>
</li>
<li>
<p><a href="https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/">Gov.uk: Dos and don'ts on designing for accessibility</a></p>
</li>
</ul>
Announcing rollup release 2.4.12
2021-04-08T12:49:29Z
https://stable.visual-framework.dev/updates/2021-04-08-component-updates/
<p>Hot off the heels of the <a href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/">2.4.11 release</a>, we're issuing a minor release that fixes a number of technical fixes and optimsations that will reduce the number of errors when building Sass and using the VF's JavaScript modules.</p>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.12 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.12/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.12/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.12/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.12/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>JS Module import <a href="https://stable.visual-framework.dev/updates/2021-04-08-component-updates/#jsmodule" id="jsmodule"></a></h3>
<p>Sometimes when a component has JavaScript, its module requires another components' JavaScript (example: embl-notifications JS requires vf-banner JS). To do this we use JS module imports. We've adapted that import approach slightly to use relative paths. The vf-core JavaScript build is "intelligent" and will attempt to resolve paths, but for non-clever importers the relative path will resolve many issues.</p>
<h4><a href="https://latest.visual-framework.dev/components/embl-breadcrumbs-lookup/">embl-breadcrumbs-lookup</a> <span class="vf-badge vf-badge--secondary">1.0.4</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-breadcrumbs-lookup/v/1.0.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e4e735c89a1a4c5962e204e39def1789619e1bf4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Improve JS module import support.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1476/</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-content-hub-loader/">embl-content-hub-loader</a> <span class="vf-badge vf-badge--secondary">1.0.9</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-content-hub-loader/v/1.0.9" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e4e735c89a1a4c5962e204e39def1789619e1bf4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Improve JS module import support.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1476/</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/embl-notifications/">embl-notifications</a> <span class="vf-badge vf-badge--secondary">1.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-notifications/v/1.0.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e4e735c89a1a4c5962e204e39def1789619e1bf4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Improve JS module import support.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1476/</li>
</ul>
</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator/#readme">vf-component-generator</a> <span class="vf-badge vf-badge--secondary">1.1.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator/v/1.1.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e4e735c89a1a4c5962e204e39def1789619e1bf4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>For JS module imports, use a relative path, as this improves support in some scenarios.
<ul>
<li>https://github.com/visual-framework/vf-core/pull/1476/</li>
</ul>
</li>
</ul>
<h3>Bugs and minor optimisations <a href="https://stable.visual-framework.dev/updates/2021-04-08-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-config/">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.5.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.5.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c8ccd2c1a072f222aa19a1b0b786daf170e007b8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds the missing <code>mixins/vf-utility-mixins.scss</code> to index.scss</li>
<li>Fixes a broken variable reference.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1469</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-navigation/">vf-navigation</a> <span class="vf-badge vf-badge--secondary">3.0.0-beta.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/3.0.0-beta.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0bfaa54eb4024ae2e987e51bf8483b6c705bb8da" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Re-release of 3.0.0-beta.0 to fix garbled version number.</li>
<li>Fixes a broken Sass file reference.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1469</li>
</ul>
</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-masthead/">vf-masthead</a> <span class="vf-badge vf-badge--secondary">3.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-masthead/v/3.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0bfaa54eb4024ae2e987e51bf8483b6c705bb8da" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>JS linting.</li>
</ul>
Announcing rollup release 2.4.11
2021-04-01T09:49:29Z
https://stable.visual-framework.dev/updates/2021-04-01-component-updates/
<p>Hot off the heels of the <a href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/">2.4.10 release</a> we have updated some components, and updated the some pages on the documentation site. There are also a couple of <code>alpha</code> and <code>beta</code> releases of components making use of our layout components rather than component specific CSS as well as deprecating variants that are no longer used or have been previously improved.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/#search">
Search
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/#deprecation">
Deprecation
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/#bugs">
Bugs
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.11 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.11/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.11/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.11/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.11/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>Search update <a href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/#search" id="search"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-search-client-side/">vf-search-client-side</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search-client-side/v/3.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9d741e8e9d36cbffbbd8e9168599876b5f1f8b3e" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates to replace v2.0.0 of vf-search--inline with <code>vf-form--search vf-form--search--responsive</code></li>
</ul>
<h3>Deprecation <a href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/#deprecation" id="deprecation"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-navigation/">vf-navigation</a> <span class="vf-badge vf-badge--secondary">3.0.0-beta.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/3.0.0-beta.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/596050e643bc453d1ffcf5e47f9ff58e69a0e9a4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>deprecated the <code>--additional</code> variant.</li>
<li>removes <code>--main</code> and <code>--global</code> Sass files, incorporating them into the base stylesheet.</li>
<li>tidies up quite a bit of CSS.</li>
<li>makes use of <code>vf-cluster</code> for layout in the markup.</li>
<li>adds some documentation.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-componenet-rollup/">vf-componenet-rollup</a> <span class="vf-badge vf-badge--secondary">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-componenet-rollup/v/1.4.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/596050e643bc453d1ffcf5e47f9ff58e69a0e9a4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>removes navigation variants as they're now part of base Sass file.</li>
</ul>
<h3>Bugs and minor optimisations <a href="https://stable.visual-framework.dev/updates/2021-04-01-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.2.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.2.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ada27b78684ed1145fd81b82107bcda5c8b11ee6" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Resolves a Nunjucks bug on <code>vf_hero_text</code> from a yaml file under certain contexts.</li>
<li>https://github.com/visual-framework/vf-core/pull/1462</li>
<li>Allows vf_hero_heading_href to be passed in yaml.</li>
<li>Gobbles much of the whitespace.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sass-starter/">vf-sass-starter</a> <span class="vf-badge vf-badge--secondary">0.1.19</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-starter/v/0.1.19" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/477df90cb04449b6649022c5cb1983562b2f4895" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>dependency bump.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-banner/">vf-banner</a> <span class="vf-badge vf-badge--secondary">1.7.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.7.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9f61cefe98eeb1bb9f079ed4b538484a2710d207" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds deprecation notices around the <code>--phase</code> variant.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-design-tokens/">vf-design-tokens</a> <span class="vf-badge vf-badge--secondary">3.4.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.4.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/114b4bfc175488b372b04e0c5b7a1136a0633fe4" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Adds a gulp command vf-design-tokens alias for developers who easily forget.</li>
</ul>
Announcing rollup release 2.4.10
2021-03-30T09:26:29Z
https://stable.visual-framework.dev/updates/2021-03-29-component-updates/
<p>Following the larger <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/">2.4.9 release</a> we had a few minor bugs and places for optimisation, as well as continuing to improve the usability and look of existing components.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/#search">
Search
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/#deprecation">
Deprecation
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/#bugs">
Bugs
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.10 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.10/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.10/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.10/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.10/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h3>Search form updates <a href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/#search" id="search"></a></h3>
<p>Following <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms">2.4.9's work on forms</a>, we carried through optimising the behaviour of vf-search to behave better on smaller width screens, like mobile phones.</p>
<h4><a href="https://latest.visual-framework.dev/components/vf-search/">vf-search</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search/v/3.0.0-alpha.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/fc7c42b8f20e83dba11fe8fa2ce4bc8b23e98d08" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>updates to code and documentation based on consultation and decisions made.</li>
<li>introduces the 'container' version</li>
<li>notes that the 'mini' version should not be implemented.</li>
</ul>
<h3>Deprecation <a href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/#deprecation" id="deprecation"></a></h3>
<p>The vf-masthead had been eclipsed by the functionality of vf-hero. We've finally deprecated it and hidden it. You should migrate to vf-hero and the vf-masthead will be removed from the CDN css in the coming weeks.</p>
<h4><a href="https://latest.visual-framework.dev/components/vf-masthead/">vf-masthead</a> <span class="vf-badge vf-badge--secondary">3.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-masthead/v/3.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/cb8ee3a5f2936f56f52a6ffbd9a08a53c8bd02c7" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Formally deprecates the vf-masthead.</li>
<li>Reinstates stub JS so existing vf-scripts.js files won't fail.</li>
<li>https://github.com/visual-framework/vf-core/issues/1453</li>
</ul>
<h3>Bugs and minor optimisations <a href="https://stable.visual-framework.dev/updates/2021-03-29-component-updates/#bugs" id="bugs"></a></h3>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-config/#readme">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.5.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.5.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/05ced3187663ff79eaa4e2b1a216a98c7f78a5b1" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fix key name in <code>vf-color--neutral</code> lookup.</li>
<li>https://github.com/visual-framework/vf-core/pull/1460</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-config/#readme">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.5.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.5.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/fc7c42b8f20e83dba11fe8fa2ce4bc8b23e98d08" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds neutral colours in the custom variables import file</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-content/">vf-content</a> <span class="vf-badge vf-badge--secondary">1.5.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.5.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/cb8ee3a5f2936f56f52a6ffbd9a08a53c8bd02c7" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Fixes a bug with a non-existent @visual-framework/form was required.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-body/">vf-body</a> <span class="vf-badge vf-badge--secondary">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-body/v/1.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e3bda5821977e3b386ca859005baf06bfaba0dd8" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>removes <code>box-sizing: border-box;</code></li>
<li>adds a little more to the documentation.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-form__input/">vf-form__input</a> <span class="vf-badge vf-badge--secondary">3.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__input/v/3.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/49f459acc4c85e5e1227b2bd80fb23531c46d7d9" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>changes out the CSS for <code>invalid</code> as an actual class <code>vf-form__input--invalid</code>.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-sidebar/">vf-sidebar</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sidebar/v/1.0.0-alpha.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/5c2fc0747cfea9f7d18893a0b06aeb2c3b7889de" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>updates examples to use image.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-stack/">vf-stack</a> <span class="vf-badge vf-badge--secondary">2.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-stack/v/2.1.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/64794d1292e683605e8d65046fe54082251c36f6" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds usage guideline for include the default <code>vf-stack</code> and the size variant.</li>
</ul>
Announcing rollup release 2.4.9
2021-03-24T19:26:29Z
https://stable.visual-framework.dev/updates/2021-03-24-component-updates/
<p>In the month of March we've been busy with usability optimisations — particularly on major visual and functional improvements to the form elements — and other new components, fixes and improvements. Read on for more.</p>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#uncategorisable">
Uncategorisable
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms">
Form updates
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#library">
Component library improvements
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#flag">
New flag layout component
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#enchantments">
Enhancements and fixes
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#chores">
Chores
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.9 to the CDN
</h3>
<div class="vf-box__text">
<p><a href="https://assets.emblstatic.net/vf/v2.4.9/css/styles.css"><code>https://assets.emblstatic.net/vf/v2.4.9/css/styles.css</code></a> <br />
<a href="https://assets.emblstatic.net/vf/v2.4.9/scripts/scripts.js"><code>https://assets.emblstatic.net/vf/v2.4.9/scripts/scripts.js</code></a></p>
<p>As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, <a href="https://stable.visual-framework.dev/building">you can find a guide here</a>.</p></div><p></p>
</article><br />
</section>
<h2>Uncategorisable updates <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms" id="uncategorisable"></a></h2>
<ul>
<li>Work continues on <a href="https://stable.visual-framework.dev/design-kit">a Figma-based design kit</a> and we <a href="https://github.com/visual-framework/vf-core/issues/1443">consult on a standard level of accessibility</a> (A vs AA vs AAA). More on both of these in the coming weeks.</li>
<li>On 12 April we'll hold our next quarterly Visual Framework consultation with our broad user base and determine priorities for the next three months. We'll do an update on the outcomes and <a href="https://stable.visual-framework.dev/about/roadmap/">update our roadmap</a>.</li>
</ul>
<h2>The one that updates the forms <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms" id="forms"></a></h2>
<p>The <a href="https://stable.visual-framework.dev/components/vf-form/"><code>vf-form</code> components</a> have received major version increments and new alpha releases.</p>
<p>Here's a visual before and after, and below you can read a detailed comparison.</p>
<div class="vf-grid">
<div>
<h4>Forms in 2.4.9</h4>
<p class="codepen" data-height="565" data-theme-id="light" data-default-tab="result" data-user="khawkins98" data-slug-hash="JjEdgbO" style="height: 565px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vf-form 2.4.9">
<span>See the Pen <a href="https://codepen.io/khawkins98/pen/JjEdgbO">
vf-form 2.4.9</a> by Ken Hawkins (<a href="https://codepen.io/khawkins98">@khawkins98</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
</div>
<div>
<h4>Forms in 2.4.8</h4>
<p class="codepen" data-height="565" data-theme-id="light" data-default-tab="result" data-user="khawkins98" data-slug-hash="MWJwNpj" style="height: 565px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vf-form 2.4.8">
<span>See the Pen <a href="https://codepen.io/khawkins98/pen/MWJwNpj">
vf-form 2.4.8</a> by Ken Hawkins (<a href="https://codepen.io/khawkins98">@khawkins98</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<p>Here's a detailed list of the changes visible above, and changes you're not seeing.</p>
<h4>Style</h4>
<ul>
<li>We have gone through all the form elements to make sure there is consistency in colour, typography and spacing.</li>
<li>We have increased the hover and focus styles to inform the site visitor that they are inside a form input.</li>
<li>We have removed placeholder text as a default. Placeholders are usually badly used in place of a label. As all the form inputs require a label using a placeholder brings ‘noise’ that is not needed.</li>
<li>This is for every form input except for search. As the Search pattern is relatively well known and the button used ofter refers to the function we allow an HTML placeholder to be used to help define where in the site you are searching.</li>
<li>Changes the red to match the system. The agreed EMBL colour system includes tints and shades of red but before this release the form error states had a different tone of red. This update now matches the larger colour system.</li>
</ul>
<h4>Code</h4>
<ul>
<li>Split out the form elements so they all have their own folders rather than a sub-directory of vf-form__core</li>
<li>Removed vf-form__core as it is redundant.</li>
<li>Created vf-form as the standalone code for a form.</li>
<li>Added the vf-stack layout for the vf-form and vf-form__fieldset so labels, helper text, error messages, and inputs are nicely laid out vertically.</li>
<li>Added the vf-cluster for when you need to have a set of radio buttons or checkboxes inline.</li>
<li>Added more ‘nunjucks’ so you can create forms without needed to write out all of the HTML.</li>
<li>Updated the CSS for the necessary style changes.</li>
</ul>
<h4>Documentation</h4>
<ul>
<li>Added usage guidelines to each form element</li>
<li>Created code and visual examples of possible permutations of form elements.</li>
<li>Added ‘do’ and ‘do not’ use guidelines where appropriate.</li>
<li>Split the vf-form out so each form element has it’s own page.</li>
</ul>
<h2>Improvements to the component library <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms" id="library"></a></h2>
<ul>
<li>adds 'status banners' for components in the documentation page.</li>
<li>updates Design Tokens homepage.</li>
<li>adds neutral colour tokens</li>
<li>Updates to use 11ty 0.12.1</li>
<li>https://github.com/visual-framework/vf-core/pull/1435</li>
<li>Adds the form options as their own set of components in the list.</li>
<li>https://github.com/visual-framework/vf-core/pull/1390/files</li>
</ul>
<h2>New flag layout component <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms" id="flag"></a></h2>
<h4><a href="https://latest.visual-framework.dev/components/vf-flag/">vf-flag</a> <span class="vf-badge vf-badge--secondary">1.0.0-alpha.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-flag/v/1.0.0-alpha.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7f8c68bba5a08f0d5d3d494d5537d728812402d5" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>introduces the flag layout component.</li>
<li>adds all variants that match positions and spacing.g</li>
<li>makes use of nunjucks blocks from the start.</li>
</ul>
<h2>Enhancements and fixes <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms" id="enhancements"></a></h2>
<h4><a href="https://latest.visual-framework.dev/components/vf-hero/">vf-hero</a> <span class="vf-badge vf-badge--secondary">3.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.2.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f1f806b5562c9704787f98fbf157b48bbf7b17c0" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds thinner <code>vf-hero--400</code> variant.</li>
<li>fixes <code>vf-hero__content vf-box</code> sizing padding calculation for <code>vf-hero--800</code> variant.</li>
<li>makes the maximum width of the <code>vf-hero__content</code> wider, but make smaller widths <code>max-content</code>.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-design-tokens/">vf-design-tokens</a> <span class="vf-badge vf-badge--secondary">3.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.4.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f767f3a9e86741d58a9b1eb2f13be803596ff1ef" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>introduces neutral colours stack Design Tokens.</li>
<li>adds deprecation notices to relevant Design Tokens, to be remove in next major version release.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-stack/">vf-stack</a> <span class="vf-badge vf-badge--secondary">2.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-stack/v/2.1.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e315a49906bfc742d804158071e7b2894a8fcbda" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds more options: <code>200</code>,<code>500</code>,<code>1200</code>, and <code>1600</code> vertical spaces.</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-search/">vf-search</a> <span class="vf-badge vf-badge--secondary">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search/v/2.0.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/818e4681c0cb341566737c612cc940914109a529" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds a div around the form content.</li>
<li>makes changes to the CSS for <code>--inline</code> variant so it's responsive to the parent width.</li>
</ul>
<h2>Chores <a href="https://stable.visual-framework.dev/updates/2021-03-24-component-updates/#forms" id="chores"></a></h2>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-config/#readme">vf-sass-config</a> <span class="vf-badge vf-badge--secondary">2.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.5.0" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f767f3a9e86741d58a9b1eb2f13be803596ff1ef" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds neutral colour tokens function <code>neutral(Nn)</code></li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bb1e5bafbf22ecd39214c98a83bc95805928497b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Corrects fix in 2.5.2 by using <code>align-content: start;</code>.</li>
<li>https://github.com/visual-framework/vf-core/issues/1395#issuecomment-801232527</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card/">vf-card</a> <span class="vf-badge vf-badge--secondary">2.5.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.4" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/63535a057c213e0685428c2472c18e1a02597fad" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>adds <code>word-break: break-word;</code> to text so the text won't exceed the box model.</li>
</ul>
<h4><a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-frctl-extensions/#readme">vf-frctl-extensions</a> <span class="vf-badge vf-badge--secondary">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-frctl-extensions/v/1.0.1" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0925481ea013188db901c1626c1fccfeac30240d" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates highlightjs syntax of codeblock tag</li>
<li>https://github.com/visual-framework/vf-core/pull/1435</li>
<li>https://github.com/highlightjs/highlight.js/issues/2277</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-search-client-side/">vf-search-client-side</a> <span class="vf-badge vf-badge--secondary">1.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search-client-side/v/1.0.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/685b98003d83abebfdb33a1590d05ed721ce1cda" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates to match v2.0.0 of vf-search--inline</li>
</ul>
<h4><a href="https://latest.visual-framework.dev/components/vf-card-container/">vf-card-container</a> <span class="vf-badge vf-badge--secondary">3.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.1.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bb1e5bafbf22ecd39214c98a83bc95805928497b" class="vf-badge vf-badge--secondary">git diff</a></h4>
<ul>
<li>Updates example to use content of different lengths.</li>
</ul>
Announcing rollup release 2.4.8
2021-03-05T16:26:29Z
https://stable.visual-framework.dev/updates/2021-03-05-component-updates/
This week's release of components is minor and continue to focus on optimisation.
Our next releases will likely contain [important changes on vf-form elements](https://github.com/visual-framework/vf-core/pull/1408) that will greatly improve the look and usability. We also [expect vf-masthead to be formally deprecated](https://github.com/visual-framework/vf-core/pull/1406).
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.8 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.8/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.8/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.8/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.8/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
### Continuing work on React support
We've given further consideration on how to best support React. We'll use a dual approach, providing full true React components for complex VF components. For less interactive components we'll continue to consume the precompiled Nunjucks templates.
#### [vf-extensions-react](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions-react/#readme) <span class="vf-badge vf-badge--secondary">0.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions-react/v/0.0.3" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/57b76f040149e75e68a9926f1e68edfc646c45a7" class="vf-badge vf-badge--secondary">git diff</a>
* Update readme with refined approach to VF-React support.
* https://github.com/visual-framework/vf-core/issues/1401
* Fix npm version badge.
---
### Minor visual fix
<img class="vf-figure__image" alt="misaligned text" src="https://user-images.githubusercontent.com/928100/109184416-45cca400-778f-11eb-9f49-895676232e72.png" />
#### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge vf-badge--secondary">2.5.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.2" class="vf-badge vf-badge--secondary">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6b597ab28fddf3d7dfa9369ecd2316004e14c038" class="vf-badge vf-badge--secondary">git diff</a>
* adds `align-items: start;` to the card so all child align when in a card container.
* https://github.com/visual-framework/vf-core/issues/1395
---
### Minor CSS error linting and configuration
We're working to revitalize our CSS linter and as part of that we needed to update the stylelinter configuration to remove false positives. We also needed to fix a number of small CSS inconsistencies that had been introduced. A number of components were updated in [pull request #1405](https://github.com/visual-framework/vf-core/pull/1405).
- [embl-grid](https://latest.visual-framework.dev/components/embl-grid/)
- [vf-card](https://latest.visual-framework.dev/components/vf-card/)
- [vf-embed](https://latest.visual-framework.dev/components/vf-embed/)
- [vf-form](https://latest.visual-framework.dev/components/vf-form/vf-form__checkbox/)
- [vf-form](https://latest.visual-framework.dev/components/vf-form/vf-form__radio/)
- [vf-intro](https://latest.visual-framework.dev/components/vf-intro/)
- [vf-masthead](https://latest.visual-framework.dev/components/vf-masthead/)
- [vf-navigation](https://latest.visual-framework.dev/components/vf-navigation/)
- [vf-news](https://latest.visual-framework.dev/components/vf-news-container/)
- [vf-pagination](https://latest.visual-framework.dev/components/vf-pagination/)
- [vf-search](https://latest.visual-framework.dev/components/vf-search-client-side/)
Component updates and refinements in 2.4.7
2021-02-25T16:26:29Z
https://stable.visual-framework.dev/updates/2021-02-25-component-updates/
This our first release in nearly a month due to some issues with an internal technical tool.
### Work on [roadmap goals](https://github.com/visual-framework/vf-core/milestones)
- A design kit is being actively developed by a new team member, so [we've added a new "design kit" section](/design-kit).
- The Visual Framework's [design principles have been added](/design-principles).
- Unique to the web are certain types of content that support user interaction, we've begun documenting how to use "read more", icons, white space and more. We're grouping this common advice in [a web content guide](/guidance/content-guidelines).
- We continue to work on page-level examples and boilerplates [in the patterns section](/patterns).
### High level changes
- Updated colour function name: the Sass colour function no longer requires the `set-` prefix and can be used as `background-color: color(color-grey-darkest);` [Git diff](https://github.com/visual-framework/vf-core/commit/7fe2f4f2293813026ebc15f85b216ce1eaf186e3)
- Major improvements to vf-hero and vf-card (scroll down for more)
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.7 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.7/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.7/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.7/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.7/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
### Card improvements
`vf-card` is one of the more popular components. It is now more flexible (both for image sizes and text content) and better indicates linked content.
#### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.5.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/788f5d07be71970aa4e280947d2996271007f9eb" class="vf-badge">git diff</a>
* fixes issue with HTML Entities and the README when running fractal.
#### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.5.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e3a42bf26cf910eeec42e75aefe31479e98329f7" class="vf-badge">git diff</a>
* fixes issue with `vf-card__image` height in Safari.
* removes `grid-template-rows` as it's difficult to define now cards do not have to have images.
* adds a `--vf-card__image--aspect-ratio` CSS custom property to help with the initial image height.
#### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.4.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.4.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3bbf1cba9e34a2a4d91c7acc18d087c253427704" class="vf-badge">git diff</a>
* fixes issue with `vf-card__image` height in Safari
* updates documentation to replace 'title' with 'heading' so it matches CSS classname.
#### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7f700c67653fc3a1a8a8c52e06c2f2981a64b074" class="vf-badge">git diff</a>
* creates option to for a subheading
* creates option for a card with no image
* adds a svg icon similar to `vf-section-header` when the heading has a link
* adds documentation
* adds more examples for the variants available depending on the content
* hides all variants that should not be used.
#### [vf-card-container](https://latest.visual-framework.dev/components/vf-card-container/) <span class="vf-badge">3.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card-container/v/3.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4d6028782396958d5d32273a41ee412f3d0241ad" class="vf-badge">git diff</a>
* adds ability to define the `aspect-ratio` of the `vf-card` child components
* moves the `default` context data in the `.yml` file to a `variant` to allow easier use of `include`.
* fixes issue in README that made fractal fail to load the container example.
### Hero improvements
Also popular is `vf-hero` which has been refined and documentation simplified to provide clearer choices.
#### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">3.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4f7dc4b5842dc601822846b995aca813d348d131" class="vf-badge">git diff</a>
* adds link styles to the `vf-hero__heading`
* updated the documentation to include the `vf-hero__heading_link` details.
#### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">3.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/3.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8c0c02ddded9ed8b45c1b652b6df72c106e2b1a0" class="vf-badge">git diff</a>
* removes all design variants.
* replaces `vf-hero__heading__additional` with `vf-hero__kicker`.
* makes the call to action link a separate entity as there would be a conflict with `vf-hero__text`.
* adds a little more documentation.
### Small refinements, fixes and documentation
#### [vf-logo](https://latest.visual-framework.dev/components/vf-logo/) <span class="vf-badge">1.5.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-logo/v/1.5.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a8162ee10e2e1dc47e04b3e0ef8d41b64e59d3b4" class="vf-badge">git diff</a>
* Makes logo larger only when using extreme variant.
<!-- Tools don't have pages in the component library -->
#### [vf-sass-config](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-config/#readme) <span class="vf-badge">2.4.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.4.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9a4dfc2f47a8f0db4084b9870a1fe9d808be4668" class="vf-badge">git diff</a>
* Fixes issue now that link color disabled no longer exists.
#### [vf-content](https://latest.visual-framework.dev/components/vf-content/) <span class="vf-badge">1.4.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.4.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/788f5d07be71970aa4e280947d2996271007f9eb" class="vf-badge">git diff</a>
* Removes the 'dark mode' CSS for links - as it's not implemented.
#### [vf-design-tokens](https://latest.visual-framework.dev/components/vf-design-tokens/) <span class="vf-badge">3.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.3.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/788f5d07be71970aa4e280947d2996271007f9eb" class="vf-badge">git diff</a>
* removes unused link colours
#### [vf-link](https://latest.visual-framework.dev/components/vf-link/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-link/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/788f5d07be71970aa4e280947d2996271007f9eb" class="vf-badge">git diff</a>
* removes secondary link colours, as this is more often defined by the parent component.
* removes the 'dark mode' styles as these are not being used.
#### [vf-summary](https://latest.visual-framework.dev/components/vf-summary/) <span class="vf-badge">1.4.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.4.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/788f5d07be71970aa4e280947d2996271007f9eb" class="vf-badge">git diff</a>
* Removes the import for `vf-links.variables.scss` as it is not needed.
#### [vf-form__fieldset](https://latest.visual-framework.dev/components/vf-form__fieldset/) <span class="vf-badge">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__fieldset/v/1.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bf5574334cd5c6368670ef2f5058e28b03ce325b" class="vf-badge">git diff</a>
* style fieldset label as a heading 5
#### [vf-form__item](https://latest.visual-framework.dev/components/vf-form__item/) <span class="vf-badge">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__item/v/2.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bf5574334cd5c6368670ef2f5058e28b03ce325b" class="vf-badge">git diff</a>
* Add support for vf-form__select as inline element.
#### [vf-form__radio](https://latest.visual-framework.dev/components/vf-form__radio/) <span class="vf-badge">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__radio/v/2.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bf5574334cd5c6368670ef2f5058e28b03ce325b" class="vf-badge">git diff</a>
* improve horizontal layout of radio with flexbox
#### [vf-pagination](https://latest.visual-framework.dev/components/vf-pagination/) <span class="vf-badge">1.0.0-rc.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-pagination/v/1.0.0-rc.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bf5574334cd5c6368670ef2f5058e28b03ce325b" class="vf-badge">git diff</a>
* right align pagination options
#### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.4.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.4.6" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/65d7b5783bf59e246529a6d27e5c52721b4e5364" class="vf-badge">git diff</a>
* Add support for anchor `id` attribute.
#### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.4.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.4.6" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dcc2c68f47e79b8222216f73b63efb99ceb49b71" class="vf-badge">git diff</a>
* Move the example content into a default variant to stop it printing out when using `render`
#### [vf-blockquote](https://latest.visual-framework.dev/components/vf-blockquote/) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-blockquote/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3ab118768682b3daec6163d948deef9398cd38de" class="vf-badge">git diff</a>
* removes `--pullquote` variant as it was never properly finalised and implemented.
#### [vf-content](https://latest.visual-framework.dev/components/vf-content/) <span class="vf-badge">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-content/v/1.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/1453d8bb510877c8c1b588589171f77748ab1ce6" class="vf-badge">git diff</a>
* adds top margin override for first item inside of `vf-content`
#### [vf-section-header](https://latest.visual-framework.dev/components/vf-section-header/) <span class="vf-badge">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7b97a4c989f9f30a9843447cb55696e56d6acd39" class="vf-badge">git diff</a>
* changes value of SVG to use `em`s so it scales with the typeface size.
* makes the hover effect consistent with new `vf-card`s
* makes the positioning match the baseline of the text
#### [vf-button](https://latest.visual-framework.dev/components/vf-button/) <span class="vf-badge">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/1.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c07a66205cdfa2fa2f4d2f39f1a0004d3149732b" class="vf-badge">git diff</a>
* Removes variants that are not to be used from the examples available.
* Adds usage documentation.
#### [vf-breadcrumbs](https://latest.visual-framework.dev/components/vf-breadcrumbs/) <span class="vf-badge">2.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-breadcrumbs/v/2.0.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/da4f5609c2d3bfff99aa7a88890a5ae658351ea5" class="vf-badge">git diff</a>
* Adds a little more documentation.
#### [ebi-vf1-integration](https://latest.visual-framework.dev/components/ebi-vf1-integration/) <span class="vf-badge">1.0.5</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-vf1-integration/v/1.0.5" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/09b1c4659eaf07933c12edbb236090323d928bc6" class="vf-badge">git diff</a>
* Handle text color on vf-button--outline.
* https://github.com/visual-framework/vf-core/pull/1336
Content guidelines
2021-02-24T19:33:50Z
https://stable.visual-framework.dev/guidance/content-guidelines/
<h3>Read more and click here <a id="read-more"></a></h3>
<p>It's common to see phrases like "read more" and "click here" at the end of a section or container. These typically provide sub-optimal user experiences and lower conversion rates. It's better to add links within the content itself.</p>
<p><a href="https://www.gov.uk/guidance/content-design/links">GOV.UK advises</a>:</p>
<blockquote>
<p>When writing a link, make it descriptive and front-load it with relevant terms instead of using something generic like ‘click here’ or ‘more’. Generic links do not make sense out of context or tell users where a link will take them. They also do not work for people using screen readers, who often scan through lists of links to navigate a page. It’s important the links are descriptive so they make sense in isolation.</p>
</blockquote>
<p><br />Nielsen Norman Group <a href="https://www.nngroup.com/articles/learn-more-links/">has further guidance on how linking to content</a>.</p>
<p>The issue of "read more" links <a href="https://github.com/visual-framework/vf-core/issues/1287">has come up several times within VF discussions</a> and we've found that reducing redundant links is both better for user experience and saves on page size.</p>
<h3>Decorative icons vs illustrations <a id="icons"></a></h3>
<p>Icons are very popular within the Visual Framework v1 as they provided a convenient and easy way to decorate content. However they come at a cost in performance and, more importantly, clarity.</p>
<p>When an icon is not paired with text it must be able to convey meaning, and "universal" icons are rare. So icons are not a replacement for text links and often result in the use of more space.</p>
<p>Icons should be viewed as illustrations and not shorthand for text and labels, so we typically recommend going without icons when possible.</p>
<p>Nielsen Norman Group has <a href="https://www.nngroup.com/articles/icon-usability/">further guidance on the usability and best practices when using icons</a>.</p>
<p>The Visual Framework is planning <a href="https://github.com/visual-framework/vf-core/discussions/1388">a more robust approach for decorative iconography later in 2021</a>.</p>
<h3>Opening content in new tabs <a id="tabs"></a></h3>
<p>The web allows for links to target a new tab or window when opening. The <a href="https://www.nngroup.com/articles/new-browser-windows-and-tabs/">recommended default (and what most users want)</a> is to <em>not</em> open in a new browser tab.</p>
<p>Before setting links to open in new tabs, you should consider (and, if possible, observe) if a user's task benefits by opening in a new window.</p>
<p>Example: you might open a link in a new windows if a user is filling in a long form and clicks on a "help" link. The user probably does not want to be taken away from their partly completed form.</p>
<p>If you do open links in new tabs, you should try to label it as such: <a href="https://stable.visual-framework.dev/guidance/content-guidelines/#">I'm an example (opens in a new tab)</a></p>
<h3>White space <a id="white-space"></a></h3>
<p>The Visual Framework is not just about providing "generic" good defaults, we consider what would be good defaults for users navigating the usually complex topics on life science websites. A major priority is to make site as easy-to-use as possible and that often means reducing their <a href="https://www.invisionapp.com/design-defined/cognitive-load/">cognitive load</a>.</p>
<p>White space is critical to helping users navigate complex information. The extra spacing <a href="https://www.caktusgroup.com/blog/2017/10/30/white-space-explained">provides room for orientation and eases the ability to read</a>.</p>
Error pages
2021-02-09T12:24:50Z
https://stable.visual-framework.dev/patterns/error-pages/
<section class="vf-intro" id="an-id-for-anchor">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading ">Error pages</h1>
<p class="vf-lede">Use these boilerplate patterns for JavaScript, 404, 403, 500 and other common pages.</p>
<p class="vf-intro__text">Use the relevant section from below for you error page.</p>
</div>
</section>
<div class="embl-grid">
<div>
</div>
<div>
<div class="vf-links vf-links__list--easy">
<h3 class="vf-links__heading">On this page</h3>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/error-pages/#javascript">
JavaScript failure
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/error-pages/#404">
404
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/error-pages/#503">
503
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/error-pages/#500">
500
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
<hr class="vf-divider" />
<section class="vf-intro" id="javascript">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading ">Error: JavaScript failure</h1>
<p class="vf-lede">JavaScript is required for this webpage or site.</p>
<p class="vf-intro__text">It seems you either have JavaScript turned off, there was a network failure, or you have a legacy browser.</p><p class="vf-intro__text">A refresh of the page will hopefully fix the issue, or you might check if <a href="https://enable-javascript.com/">JavaScript is enabled on your browser</a>. You can also <a href="https://stable.visual-framework.dev/patterns/error-pages/#">contact web support for this site</a>.</p>
</div>
</section>
<hr class="vf-divider" />
<section class="vf-intro" id="404">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading ">Error: 404</h1>
<p class="vf-lede">We’re sorry - we can’t find the page or file you requested.</p>
<p class="vf-intro__text">It may have been removed, had its name changed, or be temporarily unavailable.</p><p class="vf-intro__text">You might try <a href="https://www.embl.org/search">searching for it</a>.</p>
</div>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div></div>
<div>
<form action="https://stable.visual-framework.dev/patterns/error-pages/#" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
<div class="vf-sidebar__inner">
<div class="vf-form__item">
<label class="vf-form__label vf-u-sr-only | vf-search__label" for="searchitem">Search</label>
<input type="search" placeholder="Search {the name of the site}" id="searchitem" class="vf-form__input" /> </div>
<button type="submit" class="vf-search__button | vf-button vf-button--primary">
<span class="vf-button__text">Search</span>
<svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140"><g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)"><path d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z" fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>
</button>
</div>
</form>
</div>
</section>
<section class="embl-grid">
<div></div>
<div class="vf-content">
<h3>Need assistance?</h3>
<a class="vf-button vf-button--primary" href="https://www-db.embl.de/EMBLPersonGroup-PersonPicture/MailForm/?recipient=websupport">Contact web support</a>
</div>
</section>
<hr class="vf-divider" />
<section class="vf-intro" id="403">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading ">Error: 403</h1>
<p class="vf-lede">You do not have permission to access the page requested.</p>
<p class="vf-intro__text">You may need to login, or ask the page owner for access details.</p>
</div>
</section>
<section class="embl-grid">
<div></div>
<div class="vf-content">
<h3>Need assistance?</h3>
<a class="vf-button vf-button--primary" href="https://www-db.embl.de/EMBLPersonGroup-PersonPicture/MailForm/?recipient=websupport">Contact web support</a>
</div>
</section>
<hr class="vf-divider" />
<section class="vf-intro" id="500">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading ">Error: 500</h1>
<p class="vf-lede">There was a technical error.</p>
<p class="vf-intro__text">Something has gone wrong with our web server when attempting to make this page.</p><p class="vf-intro__text">This problem means that the service you are trying to access is currently unavailable. Please try again later.</p>
</div>
</section>
<section class="embl-grid">
<div></div>
<div class="vf-content">
<h3>Need assistance?</h3>
<a class="vf-button vf-button--primary" href="https://www-db.embl.de/EMBLPersonGroup-PersonPicture/MailForm/?recipient=websupport">Contact web support</a>
</div>
</section>
<hr class="vf-divider" />
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/error-pages.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
Component updates and refinements in 2.4.6
2021-01-27T11:26:29Z
https://stable.visual-framework.dev/updates/2021-01-27-component-updates/
In this set of updates you'll find that the `vf-body` is slightly smaller to tie it with our spacing scale, and a bug fix for `vf-hero` integration with `vf-eleventy`.
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.6 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.6/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.6/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.6/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.6/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## 📄 Page format improvement
### [vf-body](https://latest.visual-framework.dev/components/vf-body/) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-body/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e601faef4c0b434e67dcdbe37ea459260a2724d3" class="vf-badge">git diff</a>
* Makes the max-width a factor of 16px.
* adds box-sizing so that the padding doesn't effect the max-width.
* includes a fix for when a `vf-body` is (for some reason) nested inside another `vf-body`
### [vf-design-tokens](https://latest.visual-framework.dev/components/vf-design-tokens/) <span class="vf-badge">3.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.2.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e601faef4c0b434e67dcdbe37ea459260a2724d3" class="vf-badge">git diff</a>
* reduces the maximum layout width token
### [vf-sass-config](https://latest.visual-framework.dev/components/vf-sass-config/) <span class="vf-badge">2.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e601faef4c0b434e67dcdbe37ea459260a2724d3" class="vf-badge">git diff</a>
* updates the `$global-page-max-width` variable so that it's consistent with the page width across components - set to `80rem`
* Use VF 1.4 JS to load the HTML for the global header.
* Add documentation and example on disabling the 1.4 data protection banner, as you should use the 2.0 data protection banner from the contentHub.
## 🐞 Bug fixes
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.6</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.6" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e601faef4c0b434e67dcdbe37ea459260a2724d3" class="vf-badge">git diff</a>
* fixed an issue where `vf_hero_href` had no context option for use in `vf-11ty`.
Component updates and refinements in 2.4.5
2021-01-15T13:30:50Z
https://stable.visual-framework.dev/updates/2021-01-15-component-updates/
In this set of updates you'll find that vf-form has improved UX, vf-grid works better in Internet Explorer 11 and much more. Read on.
<br />
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.5 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.5/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.5/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.5/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.5/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## Legacy browser support
### [vf-grid](https://latest.visual-framework.dev/components/vf-grid/) <span class="vf-badge">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-grid/v/1.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a656c25307a78aabd06e678798730a37915f42fe" class="vf-badge">git diff</a>
* fixes flexbox fallback grid when there are items on two or more rows.
* fixes widths on flexbox fallback grid.
## Form improvements
In [PR 1228](https://github.com/visual-framework/vf-core/pull/1228/) a number of enhancements were made the vf-form user experience and visuals.
While many vf-form child components update to a full 2.0.0 release, updating should be fairly straightforward — mostly involving updates to spacing using vf-stack.
### [vf-form__form__checkbox](https://latest.visual-framework.dev/components/vf-form__form__checkbox/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__form__checkbox/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Changes hover/focus interaction.
* Adds inline example.
### [vf-form__core](https://latest.visual-framework.dev/components/vf-form__core/) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__core/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Updates example to use stack.
* Includes example of inline radios.
### [vf-form__helper](https://latest.visual-framework.dev/components/vf-form__helper/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__helper/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Makes the font size larger.
* Changes the red to use the red from the EMBL palette.
### [vf-form__input](https://latest.visual-framework.dev/components/vf-form__input/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__input/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Changes styling of the inputs.
* Changes order of form helpers, error messages, etc.
* Updates example .njk to use stack.
### [vf-form__item](https://latest.visual-framework.dev/components/vf-form__item/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__item/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Changes styling of the inputs.
* Updates CSS to use vf-stack.
### [vf-form__label](https://latest.visual-framework.dev/components/vf-form__label/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__label/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Changes required SVG fill color to red.
* Makes the required SVG half the relative size of the text.
### [vf-form__radio](https://latest.visual-framework.dev/components/vf-form__radio/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__radio/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Changes hover/focus interaction.
* Adds inline example.
### [vf-form__select](https://latest.visual-framework.dev/components/vf-form__select/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__select/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Adds vf-stack in example code.
* Changes some of the styling to match inputs.
### [vf-form__textarea](https://latest.visual-framework.dev/components/vf-form__textarea/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-form__textarea/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/59dc0dbf8147adc0d630670e68adc9a577134f86" class="vf-badge">git diff</a>
* Adds vf-stack in example code.
* Changes some of the styling to match inputs.
## Bug fixes and improvements
### [vf-video-teaser](https://latest.visual-framework.dev/components/vf-video-teaser/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-video-teaser/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/254071224dce4c1c903efb0ab651947a78243526" class="vf-badge">git diff</a>
* Uses `vf-stack` to space component.
* Adds `if` statement for the heading.
* Makes it possible to have more than one teaser.
* Makes the link the whole 'item' like `vf-card`.
### [vf-section-header](https://latest.visual-framework.dev/components/vf-section-header/) <span class="vf-badge">1.3.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.3.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/91b40e8d2fb2df8cd10b09ef250120e4f1f7ce57" class="vf-badge">git diff</a>
* Removes an extra `}` in the Nunjucks template that was corrupting the html.
* Better handle whitespace.
* https://github.com/visual-framework/vf-core/pull/1317
### [ebi-header-footer](https://latest.visual-framework.dev/components/ebi-header-footer/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/6e32826d24bc9fa10368f6d70dd46ad7208abcd4" class="vf-badge">git diff</a>
* Ensure black bar does not have a margin at the top due to vf-stack.
### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.4.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.4.5" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c684e4c125906685ca2e1471170458fe87b57c73" class="vf-badge">git diff</a>
* Move the example content into a default variant to stop it printing out when using `render`.
### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.4.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.4.4" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ecac2ec1d0d3c7684b049113649c54db3caa458e" class="vf-badge">git diff</a>
* Fixes a missing vf_intro_subheading vf-intro.njk's context.
* Fixes README.md invalid example syntax.
* https://github.com/visual-framework/vf-core/pull/1326
### [ebi-header-footer](https://latest.visual-framework.dev/components/ebi-header-footer/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/ebi-header-footer/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/27052e301552b3d175615851e708c827d9364391" class="vf-badge">git diff</a>
* Adds distinct footer, header templates as the header currently has more legacy dependencies.
* Uses the new 2.0 look and feel footer.
* Uses contentHub to load templates.
* https://github.com/visual-framework/vf-core/pull/1316
Component updates and refinements in 2.4.4
2021-01-04T16:30:50Z
https://stable.visual-framework.dev/updates/2021-01-04-component-updates/
<br />
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.4 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.4/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.4/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.4/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.4/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## Bug fixes
### [embl-content-hub-loader](https://latest.visual-framework.dev/components/embl-content-hub-loader/) <span class="vf-badge">1.0.8</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-content-hub-loader/v/1.0.8" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/56716a36b4cac48d3898936eff4393e10509a5b7" class="vf-badge">git diff</a>
* Fix a bug when vfBanner or vfTabs are not present
* https://github.com/visual-framework/vf-core/issues/809
## Optimisations
### [vf-tabs](https://latest.visual-framework.dev/components/vf-tabs/) <span class="vf-badge">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/1.2.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/65fad3f6546529ab4bcd9feb5d455b8463b555a0" class="vf-badge">git diff</a>
* Restructures that link between tabs from a sequential relationship to an explicit relationship based off the tab href and panel id.
* https://github.com/visual-framework/vf-core/issues/1136
* This is a non-breaking change that may be further improved with an optional data-vf-js-tab-id
<!-- Tools don't have pages in the component library -->
### [vf-sass-compilation](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-sass-compilation/#readme) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-compilation/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c800ee20dbc7f9d5e2545c0aeee3ac8be16d68b2" class="vf-badge">git diff</a>
* Removes unused `gulp-notify` and `gulp-sourcemaps` dependencies.
* https://github.com/visual-framework/vf-core/pull/1311
* Remove gulp-cssnano and use builtin dart sass minification.
* https://github.com/visual-framework/vf-core/pull/1305
<!-- Tools don't have pages in the component library -->
### [vf-core](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-core/#readme) <span class="vf-badge">2.2.15</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.15" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7645ffb49d50ca44a202b451aa2dbbb64c474ea5" class="vf-badge">git diff</a>
* Remove gulp-cssnano and use builtin dart sass minification.
* https://github.com/visual-framework/vf-core/pull/1305
* Write generated CSS sourcemap to output directory.
<!-- Tools don't have pages in the component library -->
### [vf-extensions](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions/#readme) <span class="vf-badge">1.0.0-rc.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions/v/1.0.0-rc.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/77a58364370e3a33a887c1d3110166744481ab28" class="vf-badge">git diff</a>
* Improve Eleventy-Fractal integration to avoid unnecessary Eleventy rebuilds on Sass and JS updates.
* https://github.com/visual-framework/vf-core/pull/1309
## Fix missing Sass imports
### [vf-activity-group](https://latest.visual-framework.dev/components/vf-activity-group/) <span class="vf-badge">1.0.0-alpha.9</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-activity-group/v/1.0.0-alpha.9" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
### [vf-font-plex-mono](https://latest.visual-framework.dev/components/vf-font-plex-mono/) <span class="vf-badge">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-font-plex-mono/v/1.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
### [vf-font-plex-sans](https://latest.visual-framework.dev/components/vf-font-plex-sans/) <span class="vf-badge">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-font-plex-sans/v/1.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
### [vf-link-list](https://latest.visual-framework.dev/components/vf-link-list/) <span class="vf-badge">1.3.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-link-list/v/1.3.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
### [vf-page-header](https://latest.visual-framework.dev/components/vf-page-header/) <span class="vf-badge">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-page-header/v/1.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
### [vf-section-header](https://latest.visual-framework.dev/components/vf-section-header/) <span class="vf-badge">1.3.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-section-header/v/1.3.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f60ea064df2a1dd6134c93087aabb703fc70523a" class="vf-badge">git diff</a>
* Resolve issue of missing import in index.scss
* https://github.com/visual-framework/vf-core/pull/1306
Component updates and refinements in 2.4.3
2020-12-21T11:30:50Z
https://stable.visual-framework.dev/updates/2020-12-21-component-updates/
<br />
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.3 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.3/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.3/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.3/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.3/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## New features
### [vf-figure](https://latest.visual-framework.dev/components/vf-figure/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-figure/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bda929293b0ded234e66cbe67975ca119f16c1a6" class="vf-badge">git diff</a>
* Removed `width: 100%` from the `.vf-figure__image` class.
* Added `display: block` to the `.vf-figure__image` class.
* Removed CSS for the width when the `vf-figure` is using floats.
### [vf-global-header](https://latest.visual-framework.dev/components/vf-global-header/) <span class="vf-badge">3.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-global-header/v/3.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ddbf0fa3f0189f225fe20dc6d631f6f6885fa752" class="vf-badge">git diff</a>
* updates to expect `vf-stack` on the body.
* removes the backwards compatibility as we're at v3.x.
* tidies up and removes some unrequited CSS.
### [vf-navigation](https://latest.visual-framework.dev/components/vf-navigation/) <span class="vf-badge">2.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/2.2.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ddbf0fa3f0189f225fe20dc6d631f6f6885fa752" class="vf-badge">git diff</a>
* removes bottom margin for `--main`.
* replaces padding with margin for `--main`.
* duplicates the top margin for `--main` because sometimes it's out of the `vf-stack` flow.
### [vf-news-container](https://latest.visual-framework.dev/components/vf-news-container/) <span class="vf-badge">1.0.0-rc.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-news-container/v/1.0.0-rc.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/02822d389b69957bb6e4c1c7a38b28717de966a5" class="vf-badge">git diff</a>
* Adds vf-news-container--featured
* https://github.com/visual-framework/vf-core/issues/1036
## Minor component updates
### [vf-summary](https://latest.visual-framework.dev/components/vf-summary/) <span class="vf-badge">1.4.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.4.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/02822d389b69957bb6e4c1c7a38b28717de966a5" class="vf-badge">git diff</a>
* Fix image URL in vf-summary--news-has-image.
### [vf-component-generator](https://latest.visual-framework.dev/components/vf-component-generator/) <span class="vf-badge">1.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator/v/1.1.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/2b963823777fff92ac89ef29a4fc857aab95f32a" class="vf-badge">git diff</a>
* Add changelog style guidance.
* https://github.com/visual-framework/vf-core/issues/1286
Further React template support, refinements in 2.4.2
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/updates/2020-12-11-component-updates/
<br />
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.2 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.2/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.2/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.2/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.2/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## Improved React support
We've already learned a few things from the [initial React proof-of-concept release](/updates/2020-12-09-component-updates/). These updates improve Nunjucks support in React and optimise the build process and documentation.
<!-- Tools don't have pages in the component library -->
### [vf-extensions-react](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions-react/#readme) <span class="vf-badge">0.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions-react/v/0.0.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f9e59a3c8e499bab780abdc33bf881153b656a3e" class="vf-badge">git diff</a>
* Use react-dom-fragment to return HTML fragments.
* https://github.com/visual-framework/vf-core/pull/1291
* Removes no longer needed raw-loader
* Add vf-extensions-react.js for common Nunjucks environment
* VF Nunjucks extensions support
<!-- Tools don't have pages in the component library -->
### [vf-component-generator](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator/#readme) <span class="vf-badge">1.1.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator/v/1.1.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f9e59a3c8e499bab780abdc33bf881153b656a3e" class="vf-badge">git diff</a>
* Use react-dom-fragment to return HTML fragments.
* https://github.com/visual-framework/vf-core/pull/1291
### [vf-button](https://latest.visual-framework.dev/components/vf-button/) <span class="vf-badge">1.3.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/1.3.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f9e59a3c8e499bab780abdc33bf881153b656a3e" class="vf-badge">git diff</a>
* React: Use react-dom-fragment to return HTML fragments.
* https://github.com/visual-framework/vf-core/pull/1291
### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.3.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.3.3" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f9e59a3c8e499bab780abdc33bf881153b656a3e" class="vf-badge">git diff</a>
* React: Use react-dom-fragment to return HTML fragments.
* https://github.com/visual-framework/vf-core/pull/1291
Components: versioning interoperability
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/versioning-and-component-interoperability/
<p>While it may seem odd at first, not all components are on the same major version. You'll find that you might use <code>vf-button@1.2.3</code> with <code>vf-card@2.2.2</code>.</p>
<ul>
<li><code>vf-core@2.1.2</code> might use <code>vf-button@1.0.1</code> and <code>vf-component-x@8.2.1</code></li>
<li><code>vf-button@1.0.1</code> might require <code>vf-link@3.0.1</code> or newer</li>
</ul>
<p>We recommend using the latest version of each component, <a href="https://stable.visual-framework.dev/troubleshooting/">you can update your components with <code>yarn upgrade-interactive --latest</code></a>.</p>
<p>Here's what the usage of <a href="https://docs.npmjs.com/about-semantic-versioning">semantic versioning</a> means for the Visual Framework:</p>
<ul>
<li>All components are compatible with with <code>vf-core</code>, some components may require a minimum version of <code>vf-core</code></li>
<li>If <code>vf-core</code> has a breaking change it will be updated a full version (<code>v2.0</code> → <code>v3.0</code>), and components may also need to be updated</li>
<li><a href="https://yarnpkg.com/lang/en/">Yarn</a> is used for package management</li>
<li>Minimum versions of dependencies are specified in project's <code>package.json</code></li>
<li>Components also use semantic versioning</li>
<li>Components may also require minimum versions of other components</li>
</ul>
<p>Think of it like your computer's operating system, just because you update Windows 10 doesn't always mean your Firefox version needs to change.</p>
<h2>Where to get the latest version</h2>
<p>Versions of <code>vf-core</code> and components are published to npm; <a href="https://stable.visual-framework.dev/building/">see the Visual Framework building guide</a>.</p>
<h2>What does this mean for component support?</h2>
<p>Components should specify if they only support specific versions of <code>vf-core</code> or require other specific versions of patterns.</p>
<p>Other notes and tips on components:</p>
<ul>
<li>should use a <a href="https://semver.org/">semantic versioning</a> style of releases</li>
<li>must work with <code>vf-core v2.x</code>, but a component may specify a minimum required minor version of vf-core</li>
<li>may indicate any required versions of peer-components in your component's README.md.
<ul>
<li><code>vf-component-x</code>@<code>2.1.2</code> requires <code>vf-component-y</code>@<code>^8.1.0</code></li>
</ul>
</li>
<li>can live as part of the <code>vf-core</code> <a href="https://www.toptal.com/front-end/guide-to-monorepos/">monorepo</a>
<ul>
<li>Interested in adding a component? <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Get in touch</a> or <a href="https://github.com/visual-framework/vf-core/issues/new/choose">make an issue</a></li>
</ul>
</li>
<li>read more about <a href="https://github.com/visual-framework/vf-core/issues/119">component versioning in this issue</a></li>
</ul>
<h2>Release notes</h2>
<p>Release notes are published to <a href="https://stable.visual-framework.dev/updates">the Updates blog</a> and include notes from the associated <code>CHANGELOG.md</code> files in the release.</p>
<h2>Where's version 1 of <code>vf-core</code>?</h2>
<p>Where's version 1.x, you ask? That's the <a href="https://github.com/ebiwd/EBI-Framework">EMBL-EBI specific Visual Framework</a> from where this concept <a href="https://blogs.embl.org/communications/2018/09/12/faster-scientific-websites-through-reusability/">originated, and evolved</a>.</p>
<h2>Test releases</h2>
<p>Testing releases will be identified in their tag, a la: <code>v2.0-alpha.1</code>, where <code>-alpha.1</code> is the tag. <code>-alpha</code>, <code>-beta</code> and <code>-rc</code> are tag suffixes.</p>
<hr />
<h2>See also</h2>
<ul>
<li><a href="https://stable.visual-framework.dev/components/" class="vf-link">Component list</a></li>
<li><a href="https://stable.visual-framework.dev/guidance/components-and-patterns/" class="vf-link">About components and patterns</a></li>
<li><a href="https://stable.visual-framework.dev/guidance/creating-components/" class="vf-link">Creating new components</a></li>
<li><a href="https://stable.visual-framework.dev/guidance/browser-support/" class="vf-link">Legacy browser support</a></li>
</ul>
User base of the Visual Framework code
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/user-base/
<p>The Visual Framework core ('vf-core') is not intended for direct consumption into
websites, rather it's a component library that should be installed as an npm and
Sass dependency to build design systems.</p>
<h2>Common needs</h2>
<p>For all supported audiences, we work to address shared needs:</p>
<ol>
<li>Reusable, structured CSS and JS</li>
<li>CSS and JS that runs with and alongside other major tools (Foundation, Bootstrap and from the JS side Angular, React)</li>
<li>A component library</li>
<li>Sane defaults for new websites</li>
<li>Make a "look and feel" more consistent</li>
<li>Provide versioned upgrades</li>
<li>Easily add your own patterns, tweak existing patterns</li>
<li>No fixed look (doesn't have to look like any specific organisation, such as EMBL)</li>
</ol>
<h2>Audience types</h2>
<p>Our target audience sits in three layers:</p>
<ol>
<li>Maintainers of design systems for life science websites
<ul>
<li>needs:
<ul>
<li>create a design system that utilises the <code>vf-core</code></li>
<li>add a vf-core component to an existing vf-core compatible system</li>
</ul>
</li>
<li>primary interface:
<ul>
<li>npm</li>
<li>online docs</li>
</ul>
</li>
</ul>
</li>
<li>Lower-level developers
<ul>
<li>needs: build a design system for orgs that work with life science info</li>
<li>primary interface:
<ul>
<li>docs</li>
<li>code</li>
<li>command line utils</li>
</ul>
</li>
</ul>
</li>
<li>Those curious/learning/evaluating the Visual Framework
<ul>
<li>needs: understand what vf-core is</li>
<li><a href="https://github.com/visual-framework/vf-core">component library and documentation</a></li>
<li>examples of organisations using <code>vf-core</code></li>
</ul>
</li>
</ol>
<p>What's not above: people building a site using generic VF-core CSS, JS and HTML
components. That's currently not a use-case we encourage or see the need for beyond
as a demonstrative design system.</p>
Using British and American english in code and documentation
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/language-british-american-english/
<p>The <code>vf-core</code> project is being led by <a href="https://www.embl.org/">EMBL</a> where British English is used, we're also aware that most code is American English (<code>colour</code> vs <code>color</code>); so:</p>
<ul>
<li>📚🇬🇧 Documentation is written in British English 💂 <code>Rarely use centred text, always use colours</code></li>
<li>⌨️🇺🇸 Code is written in American english 🧢 <code>$vf-main-color: green;</code></li>
</ul>
JavaScript and Visual Framework components
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/javascript/
<p>The Visual Framework isn't intended as a general-purpose JavaScript solution, however we know it is helpful that a minimal amount of basic functionality is supported.</p>
<p>All components are provided as functional solutions, so where JavaScript is required (such as <a href="https://github.com/visual-framework/vf-core/tree/develop/components/vf-tabs">tabs</a>) there is a fully functional set of JavaScript bundled and available in:</p>
<ul>
<li><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-tabs/vf-tabs.js"><code>vf-tabs.js</code></a> and</li>
<li><a href="https://github.com/visual-framework/vf-core/blob/gh-pages/scripts/scripts.js"><code>scripts.js</code></a></li>
</ul>
<h2>An opt-in philosophy</h2>
<p>But we know many users would prefer to use their own JavaScript tooling for all -- or some -- components on a case-by-case basis.</p>
<p>Why? As <a href="https://github.com/adobe/spectrum-css#where-is-the-javascript">Adobe's Spectrum CSS puts it</a>:</p>
<blockquote>
<p>We have found that JavaScript is where a framework or library quickly becomes opinionated and stops being easy to use with or across other frameworks. To avoid this problem, Spectrum CSS avoids implementation details that require JavaScript.</p>
</blockquote>
<p>Likewise we don't require the use of the Visual Framework JavaScript, instead the behviour can be optionally invoke per-component with JavaScript data selectors.</p>
<p>So to activate the Visual Framework JavaScript for <code>vf-tabs</code> we add <code>data-vf-js-tabs</code> and <code>data-vf-js-tabs-content</code>, like so:</p>
<pre>
<pre><code class="language-html"><div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--10">Second tab set</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="#vf-tabs__section--11">Tab</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content>
<section class="vf-tabs__section" id="vf-tabs__section--10">
<h2>Section 10</h2>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--11">
<h2>Section 11</h2>
</section>
</div>
</code></pre>
</pre>
<br />
<p>Leaving these data selectors off will cause <code>vf-tabs.js</code> to simply ignore the tabs.</p>
<h3>Naming</h3>
<p>The name of your selector should follow your component's name, plus an additional <code>-js-</code> prefix.</p>
<p>So:</p>
<ul>
<li><code>vf-tabs</code> = <code>data-vf-js-tabs</code></li>
<li><code>vf-messages</code> = <code>data-vf-js-messages</code></li>
<li><code>mycompany-modal</code> = <code>data-mycompany-js-modal</code></li>
</ul>
Image handling best practice
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/image-handling/
<ul>
<li>Resize your images manually, or have your CMS or image proxy do the cropping.</li>
<li>The Visual Framework CSS will try to handle incorrectly sized or wrong aspect ratio image as a 'fallback'.</li>
<li>Consider adding width and height to <a href="https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/">help the layout engine in browsers</a>.</li>
<li>Be sure to use appropriate <code>alt</code> text for accessibility.
<ul>
<li>Also consult <a href="https://stable.visual-framework.dev/guidance/accessibility/">the accessibility guidelines</a></li>
</ul>
</li>
<li>Use the correct image compression format (JPEG for photographs, PNG for vector or logo-style reduced colour count images).
<ul>
<li>If you have artwork, you may want to use and SVG instead.</li>
</ul>
</li>
<li>Optimise for file size.</li>
<li>If your image has a caption, you probably want to use the <a href="https://stable.visual-framework.dev/components/vf-figure/"><code>vf-figure</code></a>.</li>
</ul>
Discussions, exchanges and help
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/discussing-the-vf/
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="slack"><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Slack</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2><p class="vf-section-header__text">For early discussions, help and hellos.</p></div>
<br />
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="consultation"><a href="mailto:ken.hawkins@embl.de">Consultation meetings</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2><p class="vf-section-header__text">We hold regular consultation meetings with developers, designers and UXers.</p><p class="vf-section-header__text">Interested? email ken.hawkins@embl.de</p></div>
<br />
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="github-discussions"><a href="https://github.com/visual-framework/vf-core/discussions">GitHub Discussions</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2><p class="vf-section-header__text">For ideas that need to be tracked and may not yet have a clear course of action.</p></div>
<br />
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="github-issues"><a href="https://github.com/visual-framework/vf-core/issues">GitHub Issues</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2><p class="vf-section-header__text">For ideas that can be auctioned into code, components and patterns.</p></div>
<h3>See also</h3>
<ul>
<li><a href="https://stable.visual-framework.dev/developing/getting-started/code-of-conduct/">Code of conduct</a></li>
<li><a href="https://stable.visual-framework.dev/about/consultation/">Consultation process</a></li>
</ul>
Sass and CSS guidelines
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/css-and-sass/
<h2>CSS Naming conventions</h2>
<p>Components in the Visual Framework follow the BEM naming convention.</p>
<pre><code class="language-scss">.component {
}
.component__item {
}
.component--alternative {
}
</code></pre>
<h2>Namespace</h2>
<p>We namespace all universal components with a prefix of <code>vf-</code>. This ensures that the component will not break an existing codebase.</p>
<pre><code class="language-css">.vf-component {
}
</code></pre>
<p>This allows the Visual Framework to also include team specific components that are owned by those teams.</p>
<pre><code class="language-css">.embl-grid {
}
</code></pre>
<h2>Design patterns and components</h2>
<p>The Visual Framework makes use of Atomic Design-style concepts to define components. Instead of using Atoms, Molecules, Organisms the Visual Framework uses the terms Elements, Blocks, and Containers.</p>
<p>In code we do not include further prefixes for the Visual Frameworks version of Atomic Design. Instead we rely on other components to help determine what is an Element, a Block, or a Container.</p>
<h3>Elements</h3>
<p>An Element: headings, lists, buttons, dividers, links, etc. are named after what they are semantically.</p>
<pre><code class="language-css">.vf-text {
}
.vf-text-heading--3 {
}
</code></pre>
<h3>Blocks</h3>
<p>A Block: headers, lists, etc. are a single purpose design component that is also named after what it does or where it would go as part of a document structure. It makes use of Elements in the HTML where needed.</p>
<pre><code class="language-css">.vf-breadcrumbs {
}
.vf-page-header {
}
</code></pre>
<p>In the HTML the Visual Framework makes use of <code>|</code> to separate Element classes from Block classes</p>
<pre><code class="language-html"><header class="vf-page-header">
<h1 class="vf-page-header__heading | vf-heading vf-heading--3">Communications</h1>
<span class="vf-page-header__sub-heading | vf-heading vf-heading--4">Blog</span>
</header>
</code></pre>
<h3>Mixes</h3>
<p>When creating components you may find that a block you are wanting to use needs specific styling within it's parent. To do this we make use of BEM's mixes. Where not only do you include the relevant classnames for the block but add an additional class that includes the parent classname.</p>
<p>For example, the page header has two text nodes:</p>
<pre><code class="language-html"><header class="vf-page-header">
<h1 class="vf-page-header__heading | vf-text vf-text--heading-3">Communications</h1>
<span class="vf-page-header__sub-heading | vf-text vf-text--heading-4">Blog</span>
</header>
</code></pre>
<p>The span needs to be a grey colour instead of the default black so we add a mix class to it. Instead of including the elements and relying on the parent class (<code>.vf-page-header</code>) to alter the styling, writing our HTML like this:</p>
<pre><code class="language-html"><header class="vf-page-header">
<h1 class="vf-text vf-text-heading--3">Communications</h1>
<span class="vf-text vf-text-heading--4">Blog</span>
</header>
</code></pre>
<p>We add component specific mix classes to the <code>h1</code> and <code>span</code> to be able to style them:</p>
<pre><code class="language-html"><header class="vf-page-header">
<h1 class="vf-page-header__heading | vf-text vf-text-heading--3">Communications</h1>
<span class="vf-page-header__sub-heading | vf-text vf-text-heading--4">Blog</span>
</header>
</code></pre>
<h4>Mixins for child elements</h4>
<p>It is good practice when creating a component to include a mix for any child element used. All mix classes should be written in the parents <code>.scss</code> file. So for the <code>vf-page-header</code> example we would write the required CSS in that component's <code>.scss</code> file rather than in the <code>vf-text.scss</code> file.</p>
<h3>Containers</h3>
<p>A Container is a horizontal slice of a page that contains Blocks and Elements. A Container is named after its purpose rather than an abstract concept.</p>
<pre><code class="language-html"><div class="vf-intro">
<h1 class="vf-intro__heading">Cancer</h1>
<p class="vf-lede">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.</p>
<p class="vf-intro__text">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.</p>
<p class="vf-intro__text">There are more than 100 types of cancer and symptoms vary depending on the type. <a href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
</div>
</code></pre>
<h2>Writing Sass</h2>
<p>A core principle of the Visual Framework is simple integration into workflows. Accordingly, we use Sass in this project but keep it close to CSS structure so that it's easily understandable.</p>
<h3>Nesting</h3>
<p>Sass allows <a href="http://www.sitepoint.com/sass-reference/selector-nesting/">Nesting</a> of CSS. This is a very nice feature but can be over used and abused. To stop this getting out of hand you should only nest media queries, pseudo classes and where referencing the parent makes sense (things like .vf-no-js and modernizr classes).</p>
<p>For example, in Sass:</p>
<pre><code class="language-css">a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
@media (min-width: 800px) {
font-weight: 700;
}
.vf-no-js & {
color: blue;
}
}
</code></pre>
<p>And the compiled CSS:</p>
<pre><code class="language-css">a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (min-width: 800px) {
a {
font-weight: 700;
}
}
.vf-no-js a {
color: blue;
}
</code></pre>
<h3>Variables (Sass)</h3>
<p><a href="http://www.sitepoint.com/sass-reference/variables/">Variables</a> in Sass allow you to reuse things like font stacks, colors and margins etc. Within the UI Pattern Library there is a file within the <code>global</code> folder called <code>_variables.scss</code> where these are defined.</p>
<p>If you find yourself repeating a declaration in your CSS a few times it may be worth adding a new variable for this. Try to be as abstract as you can when naming it. For example rather than write <code>$tab-navigation-padding: 10px;</code> and <code>$tab-card-padding: 10px;</code> consider writing <code>$tab-padding</code> or <code>$padding-small;</code> so that it can be used elsewhere without confusion.</p>
<h3>Custom properties (CSS "variables")</h3>
<p>The VF also makes use of CSS custom properties for two types of use cases:</p>
<ol>
<li>Consuming design tokens:
<ul>
<li><code>background-color: var(--vf-color--grey--darkest);</code></li>
</ul>
</li>
<li>Component-level theme inheritance:
<ul>
<li><code>--vf-container__background-color: var(--vf-container--search__background-color);</code></li>
</ul>
</li>
<li>Exposing customisation to users, such as a background image:
<ul>
<li><code>background-image: var(--vf-hero--bg-image, url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/roundels.png'));</code></li>
</ul>
</li>
</ol>
<h3>Mixins</h3>
<p>By default there are only a limited amount of mixins in the UI Pattern Library. They are more to make writing code easier than doing anything fancy. If you take a look at the <code>_mixin.scss</code> file that's in the <code>global</code> folder in the <code>scss</code> folder there is a mixin that will make writing media queries, responsive typography and placeholders easier when using a component. As this UI Pattern Library can make it's way into various aspects of the company mixins should be kept to a minimum so that it is easy to understand what they do.</p>
<h3>Working on a project</h3>
<p>When you're working on a project you may need to make notes for things to get back to, or things that aren't done and could change. You should use Sass comments for this.</p>
<p>If you have written some code that needs something fixed or added to then add a comment prefixed with <code>@todo</code>. Something like this:</p>
<pre><code>// @todo fix height issue
</code></pre>
<p>If you have written some code that may change as it maybe something that gets pushed back into the patter library or something that may change by design use <code>@maychange</code>. It would look something like this:</p>
<pre><code>// @maychange this shade of blue may change in next design overhaul
</code></pre>
<p>Your code editor can help you find these when mopping up before a project goes live.</p>
Component creation
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/creating-components/
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="preproposal"> Pre-proposal</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<p>Before writing code or designing the first step is to consider:</p>
<ol>
<li>What behaviour needs to be facilitated?</li>
<li>Is there an existing component that does this?</li>
<li>Are there other components that can be adapted?</li>
</ol>
<p>Begin by <a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">chatting on Slack</a> or <a href="https://github.com/visual-framework/vf-core/discussions">creating a discussion in GitHub</a>.</p>
</div>
</article>
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="proposing"> Proposing</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<p>Once you're confident you need a new component, you can make an official component proposal. You'll want to answer questions like:</p>
<ul>
<li>What does this component look like?</li>
<li>What does this component do?</li>
<li>Would a rebrand change the structure or layout of this component?</li>
<li>Can other websites use this component? Or is it only useful in your organisation or website?</li>
<li>Do you have any designs or concepts?</li>
<li>Have you done any user testing already?</li>
<li>How often do you expect to make use of this component?</li>
<li>Can you list out major elements in this component?</li>
<li>Will all elements of this component be used every time?</li>
<li>Does this component contain other components?</li>
<li>Do you already have a component?</li>
</ul>
<p>Those questions should be answered in an "issue" on GitHub; there's a nice template:</p>
<p><a href="https://github.com/visual-framework/vf-core/issues/new?assignees=&labels=&template=new-component-request.md" class="vf-button vf-button--secondary vf-button--sm">Propose a component</a></p>
</div>
</article>
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="evaluation"> Evaluation</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<p>With a proposal made, the idea is evaluated for implementation as a core VF component available for all projects.</p>
<p>At a high level the component creation and revision process <a href="https://coggle.it/diagram/V0hkiP976OIbGpy8/t/vanilla-pattern">follows this flow diagram</a>. If the component has technical complications, an unclear use case or other issues, it will be discussed in our <a href="https://stable.visual-framework.dev/about/consultation/">Consultation Process</a>.</p>
<p>Even if a component won't be centrally supported, it <a href="https://stable.visual-framework.dev/about/consultation/#whatif">can still be implemented at your project level</a>.</p>
</div>
</article>
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="design"> Design</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<p>With an agreed concept, reference designs should be made in Figma (to be used with the <a href="https://stable.visual-framework.dev/design-kit/">Figma design resources</a>).</p>
<p>The design and technical implementation are an asynchronous process and both code and visuals will often need to be adapted as the other evolves. But, in an ideal world, each component implementation begins with a fully designed reference.</p>
</div>
</article>
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="technical"> Technical implementation</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<p>With an agreed concept and a reference design (hopefully) done, the work to begin coding can begin.</p>
<p>As first steps the developer should:</p>
<ul>
<li>Consult the <a href="https://stable.visual-framework.dev/guidance/components-and-patterns">guidelines</a> for the naming of things and coding standards.</li>
<li>Ensure the <a href="https://stable.visual-framework.dev/developing/getting-started/setting-up/">local development environment is configured</a></li>
</ul>
<h4>Creating new component files</h4>
<p>The VF codebase includes a folder and file creation tool to quickly create all the required files to make a component — it gives you the option to create an element, block, or container.</p>
<h5>Install Yeoman</h5>
<ul>
<li>Check if it is installed <code>yo --version</code></li>
<li>If you need to install <code>yarn global add yo@latest</code></li>
<li>If you get stuck, <a href="http://yeoman.io/codelab/setup.html">see the official install guide</a></li>
</ul>
<h5>Set up your project</h5>
<p>If you're creating a component for all VF users:</p>
<ul>
<li>Clone the <a href="https://github.com/visual-framework/vf-core/"><code>vf-core</code> project</a></li>
</ul>
<p>If you're adding a custom component to any other project</p>
<ul>
<li>Install the <a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator"><code>vf-component-generator</code> package</a></li>
<li><code>yarn add @visual-framework/vf-component-generator --dev</code></li>
</ul>
<h5>Generate the new component files</h5>
<ul>
<li><code>yarn install</code></li>
<li><code>gulp vf-component</code></li>
<li>Run <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator"><code>vf-component-generator</code></a> and answer the questions when prompted</li>
<li><strong>Type of component:</strong> <a href="https://stable.visual-framework.dev/guidance/components-and-patterns">See component guidance</a></li>
<li><strong>Name of component:</strong> <a href="https://stable.visual-framework.dev/guidance/components-and-patterns">See component naming guidance</a></li>
<li><strong>npm package:</strong> If you're making something interesting (probably not an 'element'), then saying 'yes' will allow the component to be shared as an optional part of the framework on npm.</li>
<li>Your customised template component will be in the <code>/components</code> directory and <a href="https://stable.visual-framework.dev/guidance/components-and-patterns/">contain a number of pre-generated files</a>.</li>
</ul>
<h5>Use the new CSS and JS</h5>
<p>If your component uses Sass/CSS, add it to <code>./components/vf-component-rollup/index.scss</code></p>
<pre><code>@import "@visual-framework/<%= componentName %>/<%= componentName %>.scss";
</code></pre>
<p>If your component uses JS, import this component in <code>./components/vf-component-rollup/scripts.js</code> or your other JS process:</p>
<pre><code class="language-js">import { vfComponentName } from '<%= componentName %>/<%= componentName %>';
vfComponentName(); // if needed, invoke it
</code></pre>
</div>
</article>
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="tips"> Technical tips and considerations</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<details class="vf-details">
<summary class="vf-details--summary">Visual design and design tokens</summary>
<p>The visual design of the Visual Framework is done in <a href="https://stable.visual-framework.dev/design-kit/">with the Figma design resources</a> and visuals can be created or revised as part of the parent issue for a ticket.</p>
<p>The design decisions of spacing, colours, branding, typography and the like are stored in the Visual Framework's <a href="https://stable.visual-framework.dev/design-tokens/">Design tokens</a> and accessible to your code through the mixins in the <a href="https://stable.visual-framework.dev/components/vf-sass-config/">Sass config and templates component</a>; some common examples: <code>color: set-color(vf-ui-color--black);</code> and <code>@include set-type(text-body--3);</code></p>
</details>
<details class="vf-details">
<summary class="vf-details--summary">Layout and spacing</summary>
<p>Components can typically implement their layout and spacing by leveraging other components; here are the most common:</p>
<ul>
<li>Column layouts: <a href="https://stable.visual-framework.dev/components/vf-grid"><code>vf-grid</code></a> and <a href="https://stable.visual-framework.dev/components/embl-grid"><code>embl-grid</code></a></li>
<li>Vertical spacing between components: <a href="https://stable.visual-framework.dev/components/vf-stack"><code>vf-stack</code></a></li>
<li>Horizontal and vertical alignment: <a href="https://stable.visual-framework.dev/components/vf-cluster"><code>vf-cluster</code></a></li>
<li>Adding a visual element next to a column: <a href="https://stable.visual-framework.dev/components/vf-flag"><code>vf-flag</code></a></li>
<li>Big-little sidebar like layouts: <a href="https://stable.visual-framework.dev/components/vf-sidebar"><code>vf-sidebar</code></a></li>
</ul>
<p>You can reference these components' classes from your HTML markup and avoid duplicating layout CSS.</p>
</details>
<details class="vf-details">
<summary class="vf-details--summary">Using VF Sass tooling</summary>
<p>Follow the VF's <a href="https://stable.visual-framework.dev/guidance/css-and-sass/">CSS and Sass style guidance</a>.</p>
</details>
<details class="vf-details">
<summary class="vf-details--summary">Using JavaScript</summary>
<p>Typically we avoid using JavaScript with the Visual Framework, but sometimes it's requires and we have <a href="https://stable.visual-framework.dev/guidance/javascript/">guidance on creating JavaScript</a>.</p>
</details>
<details class="vf-details">
<summary class="vf-details--summary">Maintaining a `CHANGELOG.md`</summary>
<ul>
<li>Add a line of what is new in your component.</li>
<li>Use sentence styling.</li>
<li>Keep your notes, short and punchy.</li>
<li>End your sentences with periods.
<ul>
<li>https://github.com/visual-framework/vf-core/issues/1286</li>
</ul>
</li>
<li>Link to any related issues or discussions, such as the above.</li>
</ul>
</details>
<details class="vf-details">
<summary class="vf-details--summary">Developing your component</summary>
<ul>
<li>Edit your template files in the <code>/components/your-component-name</code> folder
<ul>
<li>For further guidance on component configuration, <a href="https://github.com/visual-framework/vf-core/tree/develop/tools/component-generator/templates">consult the comments in the component template files</a>.</li>
</ul>
</li>
<li>Run <code>gulp vf-dev</code> to compile and preview the component</li>
</ul>
</details>
<details class="vf-details">
<summary class="vf-details--summary">Sharing a component</summary>
<ul>
<li>Publish it to npm; and/or</li>
<li>If you think your component is useful to the global <code>vf-core</code> community, <a href="https://stable.visual-framework.dev/developing/getting-started/pull-requests/">make a Pull Request</a> or <a href="https://github.com/visual-framework/vf-core/issues/new/choose">open an issue</a> to discuss.</li>
</ul>
</details>
</div>
</article>
<article class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="iterate"> Iterate</h2><p class="vf-section-header__subheading"></p></div>
<div class="vf-content">
<p>The work is never done. Components will change and be improved based on learnings.</p>
<ul>
<li><a href="https://stable.visual-framework.dev/about/consultation/">Consultation process</a></li>
<li><a href="https://stable.visual-framework.dev/developing/components/deprecating-components/">Deprecating code</a></li>
</ul>
</div>
</article>
Components are part of patterns
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/components-and-patterns/
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="components"> Type 1: Components</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>Components are intended for re-use and should be named for what they are; that is:</p>
<ul>
<li>vf-box (not "vf-introduction")</li>
<li>vf-button (not "vf-call-to-action")</li>
<li>vf-grid (not "vf-wide-layout")</li>
<li>vf-header (not "vf-big-headline")</li>
<li>vf-form</li>
</ul>
<p>This ensures that that a box will always be rectangular-ish pattern on pages,
whereas an "introduction" may be a box today, but become simply large text after a redesign.</p>
<p>When naming components, use something simple and obvious.</p>
<h3>Component types</h3>
<p>We use a variation of the atomic design methodology. We use: elements, blocks, and containers.</p>
<ul>
<li><code>element</code>: a heading or button</li>
<li><code>block</code>: a teaser, summary or search form</li>
<li><code>container</code>: would be a group of summaries</li>
</ul>
<p><a href="https://stable.visual-framework.dev/guidance/components-and-patterns/">More about VF component types</a></p>
<h3>Components have</h3>
<ul>
<li>Lots of code
<ul>
<li><code>CHANGELOG.md</code>: Notable changes</li>
<li><code>index.scss</code>: Used to generate a standalone version of the component's CSS</li>
<li><code>package.json</code>: Version information and any required npm dependencies
<ul>
<li>you should avoid npm-requiring other VF components</li>
</ul>
</li>
<li><code>README.md</code>: Information on the role and how to use a component</li>
<li><code>vf-sample.config.yml</code>: Configuration information about the compony, release status, type of component, variants</li>
<li><code>vf-sample.njk</code>: A Nunjuck-based template</li>
<li><code>vf-sample.scss</code>: Styling</li>
<li><code>vf-sample.js</code>: JavaScript</li>
<li><code>vf-sample.react.js</code>: <a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions-react#box-component">React wrapper</a></li>
<li><code>Dynamic files made at build time</code>
<ul>
<li><code>_package.variables.scss_</code>: Variables extracted from package.json that can be used in the Sass, such as a version number</li>
<li><code>_vf-sample.precompiled.js_</code>: A compiled version of the Nunjucks template</li>
<li><code>_vf-sample.css_</code>: Standalone CSS made from the index.scss</li>
</ul>
</li>
</ul>
</li>
<li>An HTML code template (Nunjucks)</li>
<li>Documentation on how to use</li>
</ul>
</article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="patterns"> Type 2: Patterns</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>If your pattern is primarily intended to be used for particular websites or a brand,
give it a name that is attached to the role it performs; that is:</p>
<ul>
<li>vf-group-masthead</li>
<li>vf-registration-form</li>
<li>vf-start-page</li>
</ul>
<p>Naming for the role the pattern does allows us to change the future visual structure,
so a "display headline" today may have a black background, but tomorrow might have no background
and be large and italic text.</p>
<h3>Patterns have</h3>
<ul>
<li>
<p>An HTML code template (Nunjucks)</p>
</li>
<li>
<p>Documentation on how to use</p>
</li></ul></article>
</section>
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="more"> Learn more</h2><p class="vf-section-header__text"></p></div>
<article class="vf-content">
<p>For further guidance on the distinctions, see: <a href="https://medium.com/eightshapes-llc/patterns-components-2ce778cbe4e8">Patterns ≠ Components</a> and UK.gov's information on <a href="https://design-system.service.gov.uk/patterns">patterns</a> vs <a href="https://design-system.service.gov.uk/components">components</a>.</p>
<p>And see these VF guidance entries:</p>
<ul>
<li>
<p><a href="https://stable.visual-framework.dev/guidance/creating-components/">How to make a component</a></p>
</li>
<li>
<p><a href="https://stable.visual-framework.dev/guidance/component-types/">Components types</a></p>
</li></ul></article>
</section>
Browser support
2020-12-11T19:33:50Z
https://stable.visual-framework.dev/guidance/browser-support/
<p>For browser support, aim for content and functionality to be unobstructed on browsers released within the last five years and have JavaScript enabled; this is represents virtually all users of the EMBL sites (in excess of 99.9%).</p>
<p>As intended by the CSS specification, not all browsers, devices, or users render content to look exactly the same. Our aim is to create an accessible and visually consistent design across a broad range of clients, not pixel-perfect designs. Further, we build atop the basic functionality, adding progressive-enhancement features to newer classes of browsers and devices.</p>
<h2>Proactive and reactive support</h2>
<p>We classify browsers into two categories:</p>
<ol>
<li><strong>Proactive support</strong> for modern and mainstream browsers released within the last 3 years and with more than 5% user base of the VF (Chrome, FF, Safari, Chromium Edge, etc.)
<ul>
<li>For these we actively test and where possible strive to write visual regression testing as possible (*note we do not yet have a tool in place, but are experimenting).</li>
</ul>
</li>
<li><strong>Reactive limited support</strong> for legacy and minor browsers older than 3 years or with less than 5% user base (IE 11, pre-Chromium Edge)
<ul>
<li>For these we do not actively monitor but will address support requests as best we can.</li>
<li>We also acknowledge that life science services can have specific use cases by institutions. Those use cases can be addressed on a case-by-case basis and the VF will avoid doing anything that actively breaks older browsers.</li>
</ul>
</li>
</ol>
<h3>Note on Internet Explorer</h3>
<p>This browser represents less than 5% of users, but represent more than 95% of our legacy support. For users without special arangements with Microsoft, IE <a href="https://www.swyx.io/ie11-eol/">has been unsupported since 2020</a>.</p>
<h2>Known legacy browser shortcomings</h2>
<p>A guiding principle is "The content should be accessible, but that doesn't mean it should look the same." So we know of areas where older browsers are functional but don't look as nice.</p>
<h3>1. Layout</h3>
<p>Older browsers don't support the <a href="https://caniuse.com/#feat=css-grid">CSS Grid layout</a> and we provide limited fallback support as flexblock</p>
<p>Non-supporting versions for our user base:</p>
<p>Browser | Last unsupported version | Percent
-- | -- | -- | --
Internet Explorer | 11 | 2.79%
Safari | 10 | 0.20%
Edge | 15 | 0.08%
Firefox | 51 | 0.80%
Chrome | 56 | 0.00%
Opera | 43 | 0.01%
Android Webview | 79 | 0.62%</p>
<h3>2. Colours and imagery</h3>
<p><a href="https://caniuse.com/#feat=css-variables">CSS Custom properties and variables</a> are used heavily by the Visual Framework for colours and some imagery, older browsers will see fewer colours.</p>
<p>Non-supporting versions for our user base:</p>
<p>Browser | Last unsupported version | Percent
-- | -- | -- | --
Internet Explorer | 11 | 2.79%
Safari | 9.2 | 0.10%
Edge | 15 | 0.08%
Firefox | 30 | 0.01%
Chrome | 48 | 0.00%
Opera | 35 | 0.01%
Android Webview | 79 | 0.62%</p>
<h2>How to support legacy browsers</h2>
<p>When developing new components we have tips and methods for suppoting legacy browsers, see <a href="https://github.com/visual-framework/vf-core/issues/734">related discussion in GitHub issue #734</a></p>
<h2>Typical usage for the Visual Framework</h2>
<h3>Public scientific websites</h3>
<p>Here is example usage from a long-standing public-facing scientific institute's website.</p>
<table>
<thead>
<tr>
<th>Browser</th>
<th>Note</th>
<th>Traffic %</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td>63 and older account for less than 1%</td>
<td>65.73%</td>
</tr>
<tr>
<td>Safari</td>
<td>11 and older account for less than 1%</td>
<td>11.70</td>
</tr>
<tr>
<td>Firefox</td>
<td>77 and older account for less than 1%</td>
<td>11.27</td>
</tr>
<tr>
<td>Edge (chromium)</td>
<td></td>
<td>3.72</td>
</tr>
<tr>
<td>Edge classic</td>
<td></td>
<td>2.11</td>
</tr>
<tr>
<td>Android Webview</td>
<td>83 and older account for less than 0.2%</td>
<td>1.37</td>
</tr>
<tr>
<td>IE</td>
<td>8, 9, 10 account for less than 0.1%</td>
<td>1.59</td>
</tr>
<tr>
<td>Opera (desktop)</td>
<td>69 and older account for less than 0.2%</td>
<td>0.74</td>
</tr>
<tr>
<td>Samsung</td>
<td>11 and older account for less than 0.1%</td>
<td>0.73</td>
</tr>
<tr>
<td>Safari (in-app)</td>
<td></td>
<td>0.33</td>
</tr>
</tbody>
</table>
<h3>Representative major scientific service</h3>
<table>
<thead>
<tr>
<th>Browser</th>
<th>Note</th>
<th>Traffic %</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chrome</td>
<td></td>
<td>55.96%</td>
</tr>
<tr>
<td>Safari</td>
<td></td>
<td>15.21</td>
</tr>
<tr>
<td>Firefox</td>
<td></td>
<td>10.66</td>
</tr>
<tr>
<td>Edge (chromium and classic)</td>
<td></td>
<td>5.36</td>
</tr>
<tr>
<td>IE</td>
<td></td>
<td>4.25</td>
</tr>
<tr>
<td>Safari (in-app)</td>
<td></td>
<td>2.50</td>
</tr>
<tr>
<td>Android Webview</td>
<td></td>
<td>2.40</td>
</tr>
<tr>
<td>Samsung</td>
<td></td>
<td>1.63</td>
</tr>
<tr>
<td>UC Browser</td>
<td></td>
<td>0.84</td>
</tr>
<tr>
<td>Opera (desktop)</td>
<td></td>
<td>0.83</td>
</tr>
</tbody>
</table>
Summary of recent component updates, release of 2.4.1 CSS, JS rollup
2020-12-09T18:33:50Z
https://stable.visual-framework.dev/updates/2020-12-09-component-updates/
<br />
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.1 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.1/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.1/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.1/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.1/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## Initial React support
While full React and Angular support remain goals with an unspecified date on the [VF roadmap](/about/roadmap), we're [trialing](https://github.com/visual-framework/vf-core/pull/1278) an initial approach to support React by wrapping the precompiled Angular templates.
You can see it in use in the example [vf-react project](https://github.com/visual-framework/vf-react).
We've added support for vf-button and vf-card for testing and [feedback](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ).
<!-- Tools don't have pages in the component library -->
### [vf-extensions-react](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-extensions-react/#readme) <span class="vf-badge">0.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-extensions-react/v/0.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3f2d43cae3c22d9700f6cc576ee2f0f5a411b6f9" class="vf-badge">git diff</a>
* Initial release
### [vf-button](https://latest.visual-framework.dev/components/vf-button/) <span class="vf-badge">1.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-button/v/1.3.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3f2d43cae3c22d9700f6cc576ee2f0f5a411b6f9" class="vf-badge">git diff</a>
* adds react support
* https://github.com/visual-framework/vf-core/pull/1278
### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.3.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.3.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3f2d43cae3c22d9700f6cc576ee2f0f5a411b6f9" class="vf-badge">git diff</a>
* adds prototype react template
* https://github.com/visual-framework/vf-core/pull/1278
<!-- Tools don't have pages in the component library -->
### [vf-component-generator](https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-generator/#readme) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-generator/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/3f2d43cae3c22d9700f6cc576ee2f0f5a411b6f9" class="vf-badge">git diff</a>
* adds _component.react.js template
* https://github.com/visual-framework/vf-core/pull/1278
* updates _component.js to prepoulate vfComponentName() camel case syntax
## Minor refinements and enhancements
### [vf-search](https://latest.visual-framework.dev/components/vf-search/) <span class="vf-badge">1.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search/v/1.2.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/be2806aa9c356383f12d52a450aaa8351ebd650c" class="vf-badge">git diff</a>
* don't allow inline search box to get too large
* add field for search description
### [vf-banner](https://latest.visual-framework.dev/components/vf-banner/) <span class="vf-badge">1.7.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.7.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f7cdfa2262499e5ac0988272a852c6a42af92077" class="vf-badge">git diff</a>
* Banner dismiss button now defaults to `vf-button--primary` (if a specific button variant has been requested by `vfJsBannerButtonTheme`, it will still be used)
## vf-hero fixes and tweaks
Following the [2.0.0 release of vf-hero](/updates/2020-11-27-component-updates/), we have made several follow on fixes and refinements.
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.5</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.5" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/fbd2540f2878fcc8de70a7508217f96ab0d748cc" class="vf-badge">git diff</a>
* adds a `flex` property to the SVG so that it's always visible and doesn't get cut off.
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.4" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dcaa96310407ee2e9641862bf777f2ce3e2c20e7" class="vf-badge">git diff</a>
* fixes missing context rule for `hero__text` and `hero__heading--additional`.
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.3" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/545bbc9037655edcd5e21a6eb3705134a9e8a9c7" class="vf-badge">git diff</a>
* adds the context options so the component can be used in 11ty with content separation.
* changes `max-content` to `fit-content` so the `__content` element adapts to smaller viewports.
* removes left padding from `--block` variant as it 'looked weird'.
Recent releases, 2.4.0 CSS, JS rollup release
2020-11-27T18:33:50Z
https://stable.visual-framework.dev/updates/2020-11-27-component-updates/
<br />This release of the prebuilt CSS and JS includes two major new versions of the `vf-hero` and `vf-card` components along with other optimisations and bug fixes. Read on for details.
<section class="vf-u-fullbleed vf-u-background-color-ui--grey--light"><br />
<article class="vf-box vf-box-theme--primary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.4.0 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.4.0/css/styles.css`](https://assets.emblstatic.net/vf/v2.4.0/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.4.0/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.4.0/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</article><br />
</section>
## Major refinements and breaking changes
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/88512583efb2b577a1f15a9426d667b9ecdf560a" class="vf-badge">git diff</a>
<figure class="vf-figure">
<img class="vf-figure__image" src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-before-after.jpg" alt="vf-hero before and after" loading="lazy" />
<figcaption class="vf-figure__caption">After on the left. The vf-hero has been tightened up. The syntax and behaviour have also been matured.</figcaption>
</figure>
* introduces new naming convention for design variants
* `--inverted`: that inverts the foreground and background colours
* `--flush`: pulls the `vf-hero__content` to the bottom of the `vf-hero`
* `--offset`: pulls the `vf-hero__content` below the `vf-hero` container
* `--centered`: centres the `vf-hero__content` component
* `--block`: makes the `vf-hero__content` bleed all the way ot the left of the page
* `--striped`: inverts the `vf-hero__text` to that of what's set in `vf-hero__content`
* `--800`, `--1200`, and `--1600` spacing variants
* replaces `vf-hero-theme--` with `vf-hero--` for the `primary`, `secondary`, and `tertiary` variants
* removes the 'Mortal Kombat' naming convention
* reduces visible options of the new `vf-hero`
* older versions degrade gracefully to the default variant
* deprecates the `--intense` variant
<a href="https://github.com/visual-framework/vf-core/pull/1219" class="vf-button vf-button--primary vf-button--sm">Discussion and PR</a> <a href="https://stable.visual-framework.dev/components/vf-hero" class="vf-button vf-button--tertiary vf-button--sm">See the component</a>
### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.3.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/65e9dcd51f800dbb5d82ca971289ca3e95ccadf6" class="vf-badge">git diff</a>
<figure class="vf-figure">
<img class="vf-figure__image" src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-card-before-after.jpg" alt="vf-card before and after" loading="lazy" />
<figcaption class="vf-figure__caption">After on the left. Similar to the vf-hero update, vf-card has been visually tightened up but without a breaking change. .</figcaption>
</figure>
* adds new `--bordered` and `--striped` design variants
* added `vf-stack` to the `vf-card__content` element to determine spacing
* allows for the lack of `vf-stack` for older components
* started the deprecation of the 'Mortal Kombat' variants, initially by hiding them in vf-core
* introduced `newTheme` so the 'Mortal Kombat' variants can live side-by-side with news versions for now
* the `newTheme` moves us back to the 'primary' being the embl green, the secondary the embl blue, etc
* we now remove the `-theme` part of the css class moving forward as it's cleaner, easier to read, and states the same thing without it
* created theme variants of the new design variants (these are hidden, and should not be used)
<a href="https://github.com/visual-framework/vf-core/pull/1255" class="vf-button vf-button--primary vf-button--sm">Discussion and PR</a> <a href="https://stable.visual-framework.dev/components/vf-card" class="vf-button vf-button--tertiary vf-button--sm">See the component</a>
### vf-frctl-theme <span class="vf-badge">deprecated</span> <a href="https://github.com/visual-framework/vf-core/commit/a6e14b2643c6434e75dc339d1f99fec3c7ea90ff" class="vf-badge">git diff</a>
<figure class="vf-figure">
<img class="vf-figure__image" src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-back-to-fractal-theme.jpg" alt="back to fractal's default theme" loading="lazy" />
<figcaption class="vf-figure__caption">We're now using the default Fractal theme for development.</figcaption>
</figure>
When developing directly in `./tools/vf-core` running `gulp vf-dev` will start the [Fractal](https://fractal.build/) component library interface. Previously this was also the public-facing website for the Visual Framework, however we now use this 11ty-based website.
So the `vf-frctl-theme` had become an ongoing technical debt without much upside. It has now been deprecated and running `gulp vf-dev` will use Fractal's default Mandlebrot theme.
<a href="https://github.com/visual-framework/vf-core/pull/1262" class="vf-button vf-button--primary vf-button--sm">Discussion and PR</a>
## Minor features
### [vf-sass-config](https://latest.visual-framework.dev/components/vf-sass-config/) <span class="vf-badge">2.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.3.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4fade0dd5fe521cc6d6be99b49ec3158aae83bee" class="vf-badge">git diff</a>
* introduces a `space` Sass function to save the keystrokes
* instead of typing `map-get($vf-spacing-map, vf-spacing--400)` you can write `spacing(400)` for the same result
* https://github.com/visual-framework/vf-core/pull/1258
* I've added this terse naming of the function for `set-color` and `set-ui-color` to be something like `color(green)` instead of `set-color(vf-color--green)`. The old way still works
* fixes import order of `vf-global-custom-properties.scss`
* https://github.com/visual-framework/vf-core/pull/1263
### [vf-show-more](https://latest.visual-framework.dev/components/vf-show-more/) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-show-more/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e2f2e5e7bb4dc396d19f7f1e1694f792280f1337" class="vf-badge">git diff</a>
* drops dynamic css stylesheet in favour of a specific `.vf-show-more__item-overflow` class
* support more than one vf-show-more on a page
* https://github.com/visual-framework/vf-core/issues/1243
### [vf-design-tokens](https://latest.visual-framework.dev/components/vf-design-tokens/) <span class="vf-badge">3.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-design-tokens/v/3.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/88512583efb2b577a1f15a9426d667b9ecdf560a" class="vf-badge">git diff</a>
* adds `--1600` (`4rem`) spacing token
### [vf-summary](https://latest.visual-framework.dev/components/vf-summary/) <span class="vf-badge">1.4.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-summary/v/1.4.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/34c61bd716f5d9817199885f4beec9799dd5c6f0" class="vf-badge">git diff</a>
* makes the title of summary a little larger
* reduces margin a little on news
* removes the padding from events
### [vf-box](https://latest.visual-framework.dev/components/vf-box/) <span class="vf-badge">2.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-box/v/2.3.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f6f5c05d249d8ff226955ca610cfd770188e32d5" class="vf-badge">git diff</a>
* updates font size for title/heading
* makes sure the text is black inside the `--easy` variant
## Bug fixes
### [vf-u-fullbleed](https://latest.visual-framework.dev/components/vf-u-fullbleed/) <span class="vf-badge">1.2.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-u-fullbleed/v/1.2.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/88512583efb2b577a1f15a9426d667b9ecdf560a" class="vf-badge">git diff</a>
* adds fallbacks for CSS that relied on CSS custom properties
### [embl-breadcrumbs-lookup](https://latest.visual-framework.dev/components/embl-breadcrumbs-lookup/) <span class="vf-badge">1.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-breadcrumbs-lookup/v/1.0.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c7aabc7e1327081ada2bf4165d519c199fddec18" class="vf-badge">git diff</a>
* adds aria role detection of current page
### [vf-breadcrumbs](https://latest.visual-framework.dev/components/vf-breadcrumbs/) <span class="vf-badge">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-breadcrumbs/v/2.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c7aabc7e1327081ada2bf4165d519c199fddec18" class="vf-badge">git diff</a>
* removes `>` from related crumbs
### [vf-sass-config](https://latest.visual-framework.dev/components/vf-sass-config/) <span class="vf-badge">2.3.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.3.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/9ed8f53f331a3cc577fa1df905191ca226ab5b52" class="vf-badge">git diff</a>
* fixes bug in --page-grid-gap printing Sass function in CSS
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/dce6a149d97918538dc9a233bc9acf657bb86302" class="vf-badge">git diff</a>
* adds the option to add an url to `vf-hero__heading` with nunjucks/yaml
* gives the element a classname
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">2.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/2.0.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c0a6a36028320148cb9d4e475158dd955ef921e0" class="vf-badge">git diff</a>
* adds a width of `max-content` to the `__content` part of the component so short titles don't look silly
### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.3.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.3.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/88d26e9cc28b191acb1315e63485a0ed9d7c63f0" class="vf-badge">git diff</a>
* issue with margin-bottom still in place when using `vf-stack` with `vf-card__content`
2.3.3 Component updates
2020-11-24T08:33:50Z
https://stable.visual-framework.dev/updates/2020-11-24-component-updates/
<br />This minor update brings bug fixes, and a few minor features. It also incorporates improvements from the 2.3.3 release candidates, all of which reflect minor improvements.
- [2.3.3-rc.3 Component updates](/updates/2020-11-16-component-updates)
- [2.3.3-rc.1 Component updates](/updates/2020-11-09-component-updates)
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.3 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.3/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.3/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.3/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.3/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</div>
## Minor features
### [vf-analytics-google](https://latest.visual-framework.dev/components/vf-analytics-google/) <span class="vf-badge">1.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-analytics-google/v/1.0.3" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/af8a35dd794aa9eea72c47ca3b783628611db299" class="vf-badge">git diff</a>
* Add the vfGaTrackInteraction function to the exported members of vf-analytics-google.
* https://github.com/visual-framework/vf-core/issues/1248
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">1.8.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/1.8.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/33dd9b0c8f9ddf643804b0f5d3d960c6c640d06a" class="vf-badge">git diff</a>
* removes the JavaScript for the `--intense` version due to an issue in Safari 14 and iOS
* https://github.com/visual-framework/vf-core/pull/1241
## Bug fixes
### [vf-core](https://latest.visual-framework.dev/components/vf-core/) <span class="vf-badge">2.2.12</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-core/v/2.2.12" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bbf00234d6d776233fa70bd28692abbbb0ac7446" class="vf-badge">git diff</a>
* bug: issue where the compiled css location would be incorrectly output in some scenarios
* https://github.com/visual-framework/vf-core/pull/1245
2.3.3-rc.3 Component updates
2020-11-16T15:33:50Z
https://stable.visual-framework.dev/updates/2020-11-16-component-updates/
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.3-rc.3 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.3-rc.3/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.3-rc.3/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.3-rc.3/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.3-rc.3/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</div>
<br />This minor update brings bug fixes, JS linting, dependency updates and a few minor features.
## Minor features
### [vf-analytics-google](https://latest.visual-framework.dev/components/vf-analytics-google/) <span class="vf-badge">1.0.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-analytics-google/v/1.0.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/45be4619e4ce49f0ed3106b6c2c04603d265ca10" class="vf-badge">git diff</a>
* Improves link name detection
* `data-vf-analytics-label` supersedes any derived value calculation
* image alt text support
* Bug: Issue when tracking image interactions
* https://github.com/visual-framework/vf-core/issues/887
## Bug fixes
### [vf-intro](https://latest.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.4.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-intro/v/1.4.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/c27fa46e01d9826dd9cf9e93d14597bf0dbfb5de" class="vf-badge">git diff</a>
* bug: don't apply styling to `a` elements that have a `.vf-*` class
### [vf-banner](https://latest.visual-framework.dev/components/vf-banner/) <span class="vf-badge">1.6.3</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.6.3" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e759f09ad2c649adc4b16e9efb0380da028ff7c7" class="vf-badge">git diff</a>
* Bug: For fixed banners, avoid interpreting numbers as strings and blowing out the page padding
### [vf-show-more](https://latest.visual-framework.dev/components/vf-show-more/) <span class="vf-badge">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-show-more/v/1.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e759f09ad2c649adc4b16e9efb0380da028ff7c7" class="vf-badge">git diff</a>
* Bug: Warning message for "pagerSize" was showing in all scenarios
## JS linting
### [embl-breadcrumbs-lookup](https://latest.visual-framework.dev/components/embl-breadcrumbs-lookup/) <span class="vf-badge">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-breadcrumbs-lookup/v/1.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [embl-conditional-edit](https://latest.visual-framework.dev/components/embl-conditional-edit/) <span class="vf-badge">1.0.3</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-conditional-edit/v/1.0.3" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [embl-content-hub-loader](https://latest.visual-framework.dev/components/embl-content-hub-loader/) <span class="vf-badge">1.0.7</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-content-hub-loader/v/1.0.7" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [embl-notifications](https://latest.visual-framework.dev/components/embl-notifications/) <span class="vf-badge">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-notifications/v/1.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-analytics-google](https://latest.visual-framework.dev/components/vf-analytics-google/) <span class="vf-badge">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-analytics-google/v/1.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-banner](https://latest.visual-framework.dev/components/vf-banner/) <span class="vf-badge">1.6.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.6.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-location-nearest](https://latest.visual-framework.dev/components/vf-location-nearest/) <span class="vf-badge">1.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-location-nearest/v/1.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-search-client-side](https://latest.visual-framework.dev/components/vf-search-client-side/) <span class="vf-badge">1.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-search-client-side/v/1.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-show-more](https://latest.visual-framework.dev/components/vf-show-more/) <span class="vf-badge">1.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-show-more/v/1.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-tabs](https://latest.visual-framework.dev/components/vf-tabs/) <span class="vf-badge">1.1.2</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tabs/v/1.1.2" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
### [vf-tree](https://latest.visual-framework.dev/components/vf-tree/) <span class="vf-badge">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-tree/v/1.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/753f8ff2a1f04bfed18d61e056d4e11e1dd507af" class="vf-badge">git diff</a>
What's next for the Visual Framework, and why it is
2020-11-10T11:10:50Z
https://stable.visual-framework.dev/updates/2020-11-10-consulting-and-roadmap/
The Visual Framework development is led by [EMBL](https://www.embl.org/) (the European Molecular Biology Laboratory) and the project's components are already in use across projects with many needs that serve internal or external audiences, and intend to do a mix of various activities, ranging from inspirational to functional tasks.
To achieve such a broad range of functionality, there are often different priorities from tabs, to video embeds, to analytics tracking. And sometimes these needs conflict, where a button works well on an inspirational homepage it may not work as well for a task-oriented portal to download viral sequences.
So it's important to communicate to our users and stakeholders:
### What are major projects we intend to work on?
<a href="https://stable.visual-framework.dev/about/roadmap" class="vf-button vf-button--primary vf-button--sm">View the Visual Framework a roadmap</a>
This is a snapshot of work planned in the Visual Framework <a href="https://github.com/visual-framework/vf-core/milestones">project milestones</a>. These are in addition to <a href="https://github.com/visual-framework/vf-core/issues">ongoing</a> feature development and support.
### How do you make decisions about what's correct and best?
<a href="https://stable.visual-framework.dev/about/consultation" class="vf-button vf-button--primary vf-button--sm">View the Visual Framework consultation process</a>
This process will help the overall quality of the VF and ensure users don’t need to fork code, can deliver quality sites and are able to deliver the correct corporate identity
2.3.3-rc.1 Component updates
2020-11-09T12:33:50Z
https://stable.visual-framework.dev/updates/2020-11-09-component-updates/
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.3-rc.1 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.3-rc.1/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.3-rc.1/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.3-rc.1/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.3-rc.1/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</div>
This minor update brings bug fixes and dependency updates.
## Bug fixes
### [vf-inlay](https://latest.visual-framework.dev/components/vf-inlay/) <span class="vf-badge">2.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-inlay/v/2.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/f9f91eaaa64c20f8dfa4e2b6ffc2b5dab5c99c40" class="vf-badge">git diff</a>
* Bug: fixes typos in Sass introduced in 2.0.0
* https://github.com/visual-framework/vf-core/pull/1221
### [vf-component-initialization](https://latest.visual-framework.dev/components/vf-component-initialization/) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-component-initialization/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ec611413e0b632633e19e12bb70ef8c6b13a593f" class="vf-badge">git diff</a>
* Updates to Fractal 1.5.0 (for our use this is mostly minor bug fixes)
* https://github.com/visual-framework/vf-core/pull/1183
2.3.2 Component updates
2020-11-06T16:00:50Z
https://stable.visual-framework.dev/updates/2020-11-06-component-updates/
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.2 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.2/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.2/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.2/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.2/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</div>
This minor update releases more minor component updates that focus on improving visual consistency, eliminating bugs, optimisations and adding minor features.
## New features
### [vf-google-analytics](https://latest.visual-framework.dev/components/vf-google-analytics/) <span class="vf-badge">1.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-google-analytics/v/1.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/28b02cf799a1a9b563eeccaf7178927241a37ae7" class="vf-badge">git diff</a>
* Stable release
* Use the more robust "beacon" logging, when available
* https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits
* Feature: track outbound/external links
* https://github.com/visual-framework/vf-core/issues/1210
### [vf-link-list](https://latest.visual-framework.dev/components/vf-link-list/) <span class="vf-badge">1.3.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-link-list/v/1.3.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/72e1bc5ef2c6a264bea9ac3e5caf8960ee2c0570" class="vf-badge">git diff</a>
* makes the `vf-links__heading` optional.
### [vf-breadcrumbs](https://latest.visual-framework.dev/components/vf-breadcrumbs/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-breadcrumbs/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/214848e63cb449d0341bffa7eea8d07bee882dda" class="vf-badge">git diff</a>
* adds `aria-current="location"` to be used for the last item in `vf-breadcrumbs`
* replaces CSS to style `aria-current="location"` and not `:last-of-type`.
* adds text-shadow to `aria-current="location"` to show text a little bolder.
### [vf-sass-config](https://latest.visual-framework.dev/components/vf-sass-config/) <span class="vf-badge">2.2.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.2.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/4e7cada4ca7b91c88dcc30ab2d03810b2f5e3198" class="vf-badge">git diff</a>
* updates `--page-grid-gap` for larger viewports to `2rem` instead of `1.5rem`.
* updates the `embl-grid` small column size from `238px` to `16rem`.
### [vf-navigation](https://latest.visual-framework.dev/components/vf-navigation/) <span class="vf-badge">2.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/2.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/ac75e1b0ebd426a021f98baa48b11d627360fcfc" class="vf-badge">git diff</a>
* fixes a bug with the `--additional` variant.
* introduces `njk`/`yml` variable look up to determine classnames to use:
* adds `vf-cluster` only to `--main` variant.
* replaces `--additional` CSS for full bleed background with `vf-u-fullbleed` class.
## Deprecation
### [vf-inlay](https://latest.visual-framework.dev/components/vf-inlay/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-inlay/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8d47b787638c3a1798c77118d1e7601955aa5ff5" class="vf-badge">git diff</a>
* Deprecated for `vf-grid` or `embl-grid` layouts and classnames.
* https://github.com/visual-framework/vf-core/pull/1204
## Bug fixes
### [vf-card](https://latest.visual-framework.dev/components/vf-card/) <span class="vf-badge">2.2.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-card/v/2.2.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/456dc6b7b13e0a89d02c7373a37b1a05a757b0dd" class="vf-badge">git diff</a>
* fixes a hover issue if the card has a link and is the `--easy` variant.
### [vf-cluster](https://latest.visual-framework.dev/components/vf-cluster/) <span class="vf-badge">1.0.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-cluster/v/1.0.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/bfad2833663103de15d4414702250faab4bc819c" class="vf-badge">git diff</a>
* fixes a bug where we overspecified the spacing custom property which affected left alignment of `--600` and `--800` variants.
### [vf-sass-config](https://latest.visual-framework.dev/components/vf-sass-config/) <span class="vf-badge">2.2.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-config/v/2.2.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/0d3be66c76fa3738389614bfb8c02ab5b5054e8c" class="vf-badge">git diff</a>
* fixes bug where `--page-grid-gap` wasn't getting it's correct spacing unit because the Sass `map-get` was not interpolated.
### [vf-hero](https://latest.visual-framework.dev/components/vf-hero/) <span class="vf-badge">1.7.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-hero/v/1.7.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8d47b787638c3a1798c77118d1e7601955aa5ff5" class="vf-badge">git diff</a>
* removes CSS for 'inlayed' design as no longer in use
* https://github.com/visual-framework/vf-core/pull/1204
### [vf-banner](https://latest.visual-framework.dev/components/vf-banner/) <span class="vf-badge">1.6.1</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-banner/v/1.6.1" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8d47b787638c3a1798c77118d1e7601955aa5ff5" class="vf-badge">git diff</a>
* removes CSS for 'inlayed' design as no longer in use
* https://github.com/visual-framework/vf-core/pull/1204
### [vf-header](https://latest.visual-framework.dev/components/vf-header/) <span class="vf-badge">1.0.4</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-header/v/1.0.4" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/8d47b787638c3a1798c77118d1e7601955aa5ff5" class="vf-badge">git diff</a>
* removes CSS for 'inlayed' design as no longer in use
* https://github.com/visual-framework/vf-core/pull/1204
### [vf-sass-starter](https://latest.visual-framework.dev/components/vf-sass-starter/) <span class="vf-badge">0.1.12</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-sass-starter/v/0.1.12" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/08a1eb84898ff9375239b3893cf50a8e3ca92d40" class="vf-badge">git diff</a>
* dependency bump
### [embl-logo](https://latest.visual-framework.dev/components/embl-logo/) <span class="vf-badge">1.1.0</span> <a href="https://www.npmjs.com/package/@visual-framework/embl-logo/v/1.1.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e737529a04c99846f5b15544152567aaecbd6064" class="vf-badge">git diff</a>
* removes some unneeded CSS.
* makes the maximum height 3rem (48px).
* makes the logo responsive.
* deprecates `--extreme`.
### [vf-logo](https://latest.visual-framework.dev/components/vf-logo/) <span class="vf-badge">1.5.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-logo/v/1.5.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/e737529a04c99846f5b15544152567aaecbd6064" class="vf-badge">git diff</a>
* removes some unneeded CSS.
* deprecates `--extreme` variation.
* makes the maximum height of the logo 3rem (48px).
2.3.1 RC.1 Component updates
2020-10-29T18:00:50Z
https://stable.visual-framework.dev/updates/2020-10-29-component-updates/
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.1-rc.1 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.1-rc.1/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.1-rc.1/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.1-rc.1/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.1-rc.1/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</div>
## New features
### [vf-navigation](https://stable.visual-framework.dev/components/vf-navigation/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-navigation/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/a7b32d1741cbc522ddfd97a9d21615bd9069c5c9" class="vf-badge">git diff</a>
* increases font size for `--main`.
* removes all variants of `--main`.
* adds `vf-cluster` to the component for responsive layout
* adds `aria-current="page"` rule and CSS to denote the current page.
* adds `:hover` to links.
### [vf-masthead](https://stable.visual-framework.dev/components/vf-masthead/) <span class="vf-badge">2.0.0</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-masthead/v/2.0.0" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/7da5e8e9679bd0e4a4656616a6c5eb1349e36202" class="vf-badge">git diff</a>
* updates how `njk` and `yml` variables are named and work.
* tidied up how JavaScript decides on text colour from image.
* renamed `h2` classnames so they're not so specific to its content.
* removes redundant form search CSS
* updated documentation
## Bug fixes
### [vf-analytics-google](https://stable.visual-framework.dev/components/vf-analytics-google/) <span class="vf-badge">1.0.0-rc.7</span> <a href="https://www.npmjs.com/package/@visual-framework/vf-analytics-google/v/1.0.0-rc.7" class="vf-badge">npm</a> <a href="https://github.com/visual-framework/vf-core/commit/390cf9d053b8446874ce74d9232835eec721ae57" class="vf-badge">git diff</a>
* Add label to the list of ancestors to look for
* https://github.com/visual-framework/vf-core/issues/1198
2.3.1 Component updates
2020-10-27T11:20:50Z
https://stable.visual-framework.dev/updates/2020-10-27-component-updates/
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.1 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.1/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.1/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.1/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.1/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).</div>
</div>
## New features
### [vf-intro](https://stable.visual-framework.dev/components/vf-intro/) <span class="vf-badge">1.4.1</span> <a href="https://github.com/visual-framework/vf-core/commit/70fef1893115bf5144398a920ef8c87444d05600" class="vf-badge">git diff</a>
- adds the option to have a nicer styled 'sub-heading'
- introduces the use of `vf-stack` to layout out the vertical stacking of the content
- use `--vf-stack-margin--custom` to align things as required
- removes use of `embl-grid` and lets `vf-intro` roll it's own
### [embl-logo](https://stable.visual-framework.dev/components/embl-logo/) <span class="vf-badge">1.0.5</span> <a href="https://github.com/visual-framework/vf-core/commit/19c8e14599fa93ec52c4b5c85c1320248357b7a5" class="vf-badge">git diff</a>
- makes a reduction in size for the logos `--extreme` version from 96px to 48px
### [vf-design-tokens](https://stable.visual-framework.dev/components/vf-design-tokens/) <span class="vf-badge">3.0.0</span> <a href="https://github.com/visual-framework/vf-core/commit/ea7ebdcdb3aa3bb1ba649e1e1b11a96f36a3e3b4" class="vf-badge">git diff</a>
* We're moving the documentation to the `vf-component-library`
* https://stable.visual-framework.dev/design-tokens/
* removes all `.njk` documentation files
* hides from Fractal
* removes any other files no longer needed
* update documentation pages for all design tokens used to make use of updated CSS
### [vf-component-library](https://stable.visual-framework.dev/components/vf-component-library/) <span class="vf-badge">1.0.12</span> <a href="https://github.com/visual-framework/vf-core/commit/ea7ebdcdb3aa3bb1ba649e1e1b11a96f36a3e3b4" class="vf-badge">git diff</a>
* design token documenation now lives in the component libary
## Bug fixes
### [vf-code-example](https://stable.visual-framework.dev/components/vf-code-example/) <span class="vf-badge">1.2.0</span> <a href="https://github.com/visual-framework/vf-core/commit/a8ffe6e29e8baa8010560a0da6112c448c51f16b" class="vf-badge">git diff</a>
* correct display of `vf-content pre` and `vf-code-example__pre` to:
* not line break every element
* correct padding (sass property map name)
### [vf-core](https://stable.visual-framework.dev/components/vf-core/) <span class="vf-badge">2.2.9</span> <a href="https://github.com/visual-framework/vf-core/commit/574dae9cf1696a8e90141a932419219a12b8f50a" class="vf-badge">git diff</a>
* fix: avoid build failure on missing .eslintrc.js config in child projects
* https://github.com/visual-framework/vf-core/pull/1178
## Minor updates
### [vf-breadcrumbs](https://stable.visual-framework.dev/components/vf-breadcrumbs/) <span class="vf-badge">1.0.5</span> <a href="https://github.com/visual-framework/vf-core/commit/19c8e14599fa93ec52c4b5c85c1320248357b7a5" class="vf-badge">git diff</a>
- removes the bottom margin
- increases the top margin
### [vf-global-header](https://stable.visual-framework.dev/components/vf-global-header/) <span class="vf-badge">3.0.1</span> <a href="https://github.com/visual-framework/vf-core/commit/19c8e14599fa93ec52c4b5c85c1320248357b7a5" class="vf-badge">git diff</a>
- removes padding
- adds top margin for layout
### [vf-header](https://stable.visual-framework.dev/components/vf-header/) <span class="vf-badge">1.0.3</span> <a href="https://github.com/visual-framework/vf-core/commit/19c8e14599fa93ec52c4b5c85c1320248357b7a5" class="vf-badge">git diff</a>
- removes negative margin bottom when `vf-global-header` is a child of `vf-header`
### [vf-box](https://stable.visual-framework.dev/components/vf-box/) <span class="vf-badge">2.2.0</span> <a href="https://github.com/visual-framework/vf-core/commit/aeecb084157102995b9708dea25dc89b85d0f962" class="vf-badge">git diff</a>
- adds internal padding option back
### [vf-cluster](https://stable.visual-framework.dev/components/vf-cluster/) <span class="vf-badge">2.0.0</span> <a href="https://github.com/visual-framework/vf-core/commit/aeecb084157102995b9708dea25dc89b85d0f962" class="vf-badge">git diff</a>
- replaces all spacing / sizing values with new tokens naming convention
### [vf-no-js](https://stable.visual-framework.dev/components/vf-no-js/) <span class="vf-badge">1.0.1</span> <a href="https://github.com/visual-framework/vf-core/commit/a8ffe6e29e8baa8010560a0da6112c448c51f16b" class="vf-badge">git diff</a>
* Classify as a utility component
### [vf-component-generator](https://stable.visual-framework.dev/components/vf-component-generator/) <span class="vf-badge">1.0.3</span> <a href="https://github.com/visual-framework/vf-core/commit/a8ffe6e29e8baa8010560a0da6112c448c51f16b" class="vf-badge">git diff</a>
* improve README template
### [vf-badge](https://stable.visual-framework.dev/components/vf-badge/) <span class="vf-badge">1.2.1</span> <a href="https://github.com/visual-framework/vf-core/commit/a8ffe6e29e8baa8010560a0da6112c448c51f16b" class="vf-badge">git diff</a>
* README cleanup
### [vf-u-fullbleed](https://stable.visual-framework.dev/components/vf-u-fullbleed/) <span class="vf-badge">1.2.1</span> <a href="https://github.com/visual-framework/vf-core/commit/a8ffe6e29e8baa8010560a0da6112c448c51f16b" class="vf-badge">git diff</a>
* README cleanup
Giving the Visual Framework better space
2020-10-20T15:10:50Z
https://stable.visual-framework.dev/updates/2020-10-20-a-better-space/
This is a breaking change, so we have given this a ‘major bump’ in the [npm package](https://www.npmjs.com/package/@visual-framework/vf-design-tokens) to `v2.0.0`.
<div class="vf-box vf-box--easy">
<h3 class="vf-box__heading">tl;dr?</h3>
<p class="vf-box__text"><code>vf-u-margin__bottom--xs</code> is now <code>vf-u-margin__bottom--100</code></p>
</div>
<br />
Where we were using [’t-shirt’ sizes](https://www.drupal.org/files/issues/2019-05-01/Bootstrap-4--v--Bootstrap-3.png) to define a naming convention it stifled our ability to create newer spacing tokens. How do decide what to call the value that’s between ‘medium’ and ‘large’? We didn’t think `vf-spacing—bigger-than-medium-but-smaller-than-large` would work out so well.
Now we use an incremental number to determine the spacing tokens.
As we are moving closer to a more unified, consistent system of layout and spacing with multiples of `4px` we start with `4px` (or `.125em`) equally `50`.
This way we can easily expand the spacing tokens as needed.
These changes:
- have already [been made in components](/updates/2020-10-20-component-updates) that made use of the original spacing design tokens so if you update your components to the latest version - you will get these updates ‘for free’.
- also effects the naming of the utility classes that some are using in their sites and products. You will need to update those CSS classes accordingly to benefit from these changes.
Below is a table of what the tokens were, and what they are now so you can ‘find and replace’ as needed in your projects.
| old class | new class | value (in `rem`) |
|-------------------|-------------------|------------------|
| .vf-u-margin—0 | .vf-u-margin—0 | 0rem |
| .vf-u-margin—xxs | .vf-u-margin—50 | .125rem |
| .vf-u-margin—xs | .vf-u-margin—100 | .25rem |
| .vf-u-margin—sm | .vf-u-margin—200 | .5rem |
| .vf-u-margin—md | .vf-u-margin—400 | 1rem |
| .vf-u-margin—lg | .vf-u-margin—500 | 1.25rem |
| .vf-u-margin—xl | .vf-u-margin—600 | 1.5rem |
| .vf-u-margin—xxl | .vf-u-margin—800 | 2rem |
| .vf-u-margin—xxxl | .vf-u-margin—1200 | 3rem |
<br />
This also highlights the (so far, unwritten) rule that utility classes should be a last resort, and not an often used technique (we are trying to move components forward so they can accept things that might need to be ‘customised’ for your requirement).
2.3.0 Component updates
2020-10-20T13:10:50Z
https://stable.visual-framework.dev/updates/2020-10-20-component-updates/
<div class="vf-box vf-box-theme--tertiary vf-box--easy">
<h3 class="vf-box__heading">
This releases 2.3.0 to the CDN
</h3>
<div class="vf-box__text">
[`https://assets.emblstatic.net/vf/v2.3.0/css/styles.css`](https://assets.emblstatic.net/vf/v2.3.0/css/styles.css) <br />
[`https://assets.emblstatic.net/vf/v2.3.0/scripts/scripts.js`](https://assets.emblstatic.net/vf/v2.3.0/scripts/scripts.js)
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, [you can find a guide here](/building).
</div>
</div>
## Components with breaking changes
### [vf-design-tokens](https://stable.visual-framework.dev/components/vf-design-tokens/) <span class="vf-badge">2.0.0</span> <a href="https://github.com/visual-framework/vf-core/commit/e7e09d66c3f4d6e2d2fe0624abf02301073121ca" class="vf-badge">git diff</a>
This release updates all spacing variables to use numbers for sizing. [You can learn more about change in this post](/updates/2020-10-20-a-better-space).
The following components have also been updated and now require `vf-design-tokens` 2.0.0.
- [vf-banner](https://stable.visual-framework.dev/components/vf-banner/) 1.6.0
- [vf-box](https://stable.visual-framework.dev/components/vf-box/) 2.1.0
- [vf-button](https://stable.visual-framework.dev/components/vf-button/) 1.2.0
- [vf-code-example](https://stable.visual-framework.dev/components/vf-code-example/) 1.1.0
- [vf-content](https://stable.visual-framework.dev/components/vf-content/) 1.3.0
- [vf-details](https://stable.visual-framework.dev/components/vf-details/) 1.1.0
- [vf-form__fieldset](https://stable.visual-framework.dev/components/vf-form__fieldset/) 1.1.0
- [vf-form__label](https://stable.visual-framework.dev/components/vf-form__label/) 1.2.0
- [vf-form__legend](https://stable.visual-framework.dev/components/vf-form__legend/) 1.1.0
- [vf-link-list](https://stable.visual-framework.dev/components/vf-link-list/) 1.2.0
- [vf-logo](https://stable.visual-framework.dev/components/vf-logo/) 1.4.0
- [vf-masthead](https://stable.visual-framework.dev/components/vf-masthead/) 1.2.0
- [vf-page-header](https://stable.visual-framework.dev/components/vf-page-header/) 1.1.0
- [vf-sass-config](https://stable.visual-framework.dev/components/vf-sass-config/) 2.1.0
- [vf-section-header](https://stable.visual-framework.dev/components/vf-section-header/) 1.3.0
### [vf-utility-classes](https://stable.visual-framework.dev/components/vf-utility-classes/) <span class="vf-badge">2.0.0</span> <a href="https://github.com/visual-framework/vf-core/commit/e7e09d66c3f4d6e2d2fe0624abf02301073121ca" class="vf-badge">git diff</a>
- all utility classes that make use of spacing tokens now use numerical naming.
- updates documentation pages, as needed.
- requires `v2.0.0` of the `vf-design-tokens` package or newer.
### [vf-divider](https://stable.visual-framework.dev/components/vf-divider/) <span class="vf-badge">2.0.0</span> <a href="https://github.com/visual-framework/vf-core/commit/5633dab3799e320e51e23b786eadf25ffe2723e2" class="vf-badge">git diff</a>
- removes the `grid-column: 1 / -1;` rule
- moves the margin into the `@mixin` available in `vf-sass-config`.
- adds `--vf-divider--margin-block-end` custom property to allow the overriding the block end margin as needed.
### [vf-sass-config](https://stable.visual-framework.dev/components/vf-sass-config/) <span class="vf-badge">2.0.0</span> <a href="https://github.com/visual-framework/vf-core/commit/5633dab3799e320e51e23b786eadf25ffe2723e2" class="vf-badge">git diff</a>
- removes the inline margin from the component.
- adds the block end margin an creates a Sass variable for `$margin--block-end`.
- adds `width: 100%;` as it was defaulting to `width: auto;`.
## New components
### [vf-cluster](https://stable.visual-framework.dev/components/vf-cluster/) <span class="vf-badge">0.0.1</span> <a href="https://github.com/visual-framework/vf-core/commit/a1ba072647a89f61ce093e1db0ebabb004816882" class="vf-badge">git diff</a>
- Initital launch of the component. It is useable but the documentation needs refining.
## Major new features
### [vf-stack](https://stable.visual-framework.dev/components/vf-stack/) <span class="vf-badge">1.2.0</span> <a href="https://github.com/visual-framework/vf-core/commit/a1ba072647a89f61ce093e1db0ebabb004816882" class="vf-badge">git diff</a>
- now uses Nunjucks 'blocks' so we can use this layout more programatically.
- hides the defauly Nunjcuks file as it renders what looks like a blank page (because it's waiting for the block content).
- creates separate Nunjucks files to display variants in Fractal.
- updates naming conventions of variables available.
- introduces `stack__spacing__custom` which will replace `custom_spacing_property` in the `2.0.0` component release.
### [vf-analytics-google](https://stable.visual-framework.dev/components/vf-analytics-google/) <span class="vf-badge">1.0.0-rc.6</span> <a href="https://github.com/visual-framework/vf-core/commit/41817a91dbb81a60bf4ea2bb72a9c082544c695c" class="vf-badge">git diff</a>
* Track form element interactions
* https://github.com/visual-framework/vf-core/issues/1161
* Explicit labels can be provided with data attributes: `data-vf-analytics-label="A special label"`
* Code linting
* Avoid logging clicks on non-interactive elements (white space, standard text)
* Reduce likelihood of logging multiple events
* `vfGaIndicateLoaded()` now accepts the options object `vfGaTrackOptions`
* with property `vfGaTrackPageLoad`. `vfGaTrackOptions.vfGaTrackPageLoad` defaults to true. If you set to false, the function will _not_ track the initial page view. Useful if you track the initial page view with JavaScript in your HTML.
* https://github.com/visual-framework/vf-core/issues/1116
* Track the users network: `vfGaTrackOptions.vfGaTrackNetwork`. As of February 2020 Google Analytics no longer tracks the network name of visitors. A 3rd party tool enables this, follow the setup guide at https://ipmeta.io/instructions (note there is no need to load https://ipmeta.io/plugin.js, this component includes it for you)
* https://github.com/visual-framework/vf-core/issues/968
* `analyticsTrackInteraction()` is now namespaced
### [vf-core](https://stable.visual-framework.dev/components/vf-core/) <span class="vf-badge">2.2.7</span> <a href="https://github.com/visual-framework/vf-core/commit/2c06958d69ea3664e9426952b6550e7fa7d24646" class="vf-badge">git diff</a>
- adds ESLint task and config
- https://github.com/visual-framework/vf-core/issues/1143
- adds `buildTimeStamp` to `componentInfo` component sass map
- https://github.com/visual-framework/vf-core/issues/974
### [vf-hero](https://stable.visual-framework.dev/components/vf-hero/) <span class="vf-badge">1.7.0</span> <a href="https://github.com/visual-framework/vf-core/commit/b3a7f4398fc1d9ec83291ddda72f78196a6408ee" class="vf-badge">git diff</a>
- makes the padding on `--intense` standardised to our spacing units
- reduces height of all other variants
- currently this is the 'maximum space' the component will get to allow it's content to be readable.
## Bug fixes
### [vf-component-initialization](https://stable.visual-framework.dev/components/vf-component-initialization/) <span class="vf-badge">1.0.1</span> <a href="https://github.com/visual-framework/vf-core/commit/bc7aae5f4d394bb907d39e4adfb471da248de474" class="vf-badge">git diff</a>
* Pin dependencies to avoid issue with Fractal bootstrap
* https://github.com/visual-framework/vf-core/pull/1170
### [vf-banner](https://stable.visual-framework.dev/components/vf-banner/) <span class="vf-badge">1.5.1</span> <a href="https://github.com/visual-framework/vf-core/commit/dd4cd070ef0a2eb0b368132629defbe0ee95c0dc" class="vf-badge">git diff</a>
- removes leftover `console.log`
## Minor updates
### [vf-grid](https://stable.visual-framework.dev/components/vf-grid/) <span class="vf-badge">1.3.0</span> <a href="https://github.com/visual-framework/vf-core/commit/a1ba072647a89f61ce093e1db0ebabb004816882" class="vf-badge">git diff</a>
- makes the layout something that can now use 'extends' within nunjucks
### [embl-grid](https://stable.visual-framework.dev/components/embl-grid/) <span class="vf-badge">2.1.0</span> <a href="https://github.com/visual-framework/vf-core/commit/a1ba072647a89f61ce093e1db0ebabb004816882" class="vf-badge">git diff</a>
- makes the layout something that can now use 'extends' within nunjucks
### [vf-sass-compilation](https://stable.visual-framework.dev/components/vf-sass-compilation/) <span class="vf-badge">1.0.2</span> <a href="https://github.com/visual-framework/vf-core/commit/2c06958d69ea3664e9426952b6550e7fa7d24646" class="vf-badge">git diff</a>
- adds ESLint task and config
- https://github.com/visual-framework/vf-core/issues/1143
### [vf-componenet-rollup](https://stable.visual-framework.dev/components/vf-componenet-rollup/) <span class="vf-badge">1.2.1</span> <a href="https://github.com/visual-framework/vf-core/commit/2b719c9b3fa1f8ab0fe59bfb28076a6d79575596" class="vf-badge">git diff</a>
* adds `buildTimeStamp` from `componentInfo` to Sass template
* https://github.com/visual-framework/vf-core/issues/974
### [vf-componenet-generator](https://stable.visual-framework.dev/components/vf-componenet-generator/) <span class="vf-badge">1.0.3</span> <a href="https://github.com/visual-framework/vf-core/commit/2b719c9b3fa1f8ab0fe59bfb28076a6d79575596" class="vf-badge">git diff</a>
* adds `buildTimeStamp` from `componentInfo` to Sass template
* https://github.com/visual-framework/vf-core/issues/974
### [vf-u-fullbleed](https://stable.visual-framework.dev/components/vf-u-fullbleed/) <span class="vf-badge">1.2.0</span> <a href="https://github.com/visual-framework/vf-core/commit/5633dab3799e320e51e23b786eadf25ffe2723e2" class="vf-badge">git diff</a>
- adds a CSS custom property for when a component with `vf-u-fullbleed` needs inline margins.
2.2.9 Component updates
2020-10-12T09:10:50Z
https://stable.visual-framework.dev/updates/2020-10-12-component-updates/
This releases 2.2.9 to the CDN:
- [https://assets.emblstatic.net/vf/v2.2.9/css/styles.css](https://assets.emblstatic.net/vf/v2.2.9/css/styles.css)
- [https://assets.emblstatic.net/vf/v2.2.9/scripts/scripts.js](https://assets.emblstatic.net/vf/v2.2.9/scripts/scripts.js)
---
### [embl-notifications](https://stable.visual-framework.dev/components/embl-notifications/) 1.0.0
commit [aba7c129360008218543d96d67d7da78c7f77e34](https://github.com/visual-framework/vf-core/commit/aba7c129360008218543d96d67d7da78c7f77e34)
- Check a backup URL for cases of major outages: https://embl-communications.github.io/embl-notifcations-fallback/notifications.js
- [Issue 1150](https://github.com/visual-framework/vf-core/issues/1150)
---
### [vf-search-client-side](https://stable.visual-framework.dev/components/vf-search-client-side/) 1.0.0-alpha.3
commit [57bffc9240dfcb3833c270f95e464a43dd1dcfc4](https://github.com/visual-framework/vf-core/commit/57bffc9240dfcb3833c270f95e464a43dd1dcfc4)
- adds support for `autofocus` on search input
- [Pull request 1147](https://github.com/visual-framework/vf-core/pull/1147)
---
### [vf-search](https://stable.visual-framework.dev/components/vf-search/) 1.1.2
commit [57bffc9240dfcb3833c270f95e464a43dd1dcfc4](https://github.com/visual-framework/vf-core/commit/57bffc9240dfcb3833c270f95e464a43dd1dcfc4)
- adds support for `autofocus` on search input
- [Pull request 1147](https://github.com/visual-framework/vf-core/pull/1147)
---
### [vf-design-tokens](https://stable.visual-framework.dev/components/vf-design-tokens/) 1.3.1
commit [22d11e4d2cd6267fa30af98125ad7dbb227b4464](https://github.com/visual-framework/vf-core/commit/22d11e4d2cd6267fa30af98125ad7dbb227b4464)
- fix display of design token component documentation
- [Pull request 1134](https://github.com/visual-framework/vf-core/pull/1134)
2.2.8 Component updates
2020-10-02T09:33:50Z
https://stable.visual-framework.dev/updates/2020-10-02-component-updates/
This releases 2.2.8 to the CDN:
- [https://assets.emblstatic.net/vf/v2.2.8/css/styles.css](https://assets.emblstatic.net/vf/v2.2.8/css/styles.css)
- [https://assets.emblstatic.net/vf/v2.2.8/scripts/scripts.js](https://assets.emblstatic.net/vf/v2.2.8/scripts/scripts.js)
---
### [vf-section-header](https://stable.visual-framework.dev/components/vf-section-header/) 1.2.2
commit [3f8cb25d7edbbaed3df40724175160122a469e79](https://github.com/visual-framework/vf-core/commit/3f8cb25d7edbbaed3df40724175160122a469e79)
* adds `id` for anchor support
---
### [vf-analytics-google](https://stable.visual-framework.dev/components/vf-analytics-google/) 1.0.0-rc.4
commit [bcb793e7dfa498635624c9430922210372a7a5ba](https://github.com/visual-framework/vf-core/commit/bcb793e7dfa498635624c9430922210372a7a5ba)
* improve `vfGaLogMessage()` to note type of event being tracked
* https://github.com/visual-framework/vf-core/pull/1141
2.2.7 Component updates
2020-09-30T13:24:50Z
https://stable.visual-framework.dev/updates/2020-09-30-component-updates/
This releases 2.2.7 to the CDN:
- [https://assets.emblstatic.net/vf/v2.2.7/css/styles.css](https://assets.emblstatic.net/vf/v2.2.7/css/styles.css)
- [https://assets.emblstatic.net/vf/v2.2.7/scripts/scripts.js](https://assets.emblstatic.net/vf/v2.2.7/scripts/scripts.js)
---
### [vf-banner](https://stable.visual-framework.dev/components/vf-banner/) 1.5.0
commit [5f4f29e0b5566dbbcc73ff28d99e4f430a14e926](https://github.com/visual-framework/vf-core/commit/5f4f29e0b5566dbbcc73ff28d99e4f430a14e926)
- centralises logic to "close" a banner
- adds padding to the document to accomodate a fixed-position banner so it won't hide content
- https://github.com/visual-framework/vf-core/issues/1119
### [vf-analytics-google](https://stable.visual-framework.dev/components/vf-analytics-google/) 1.0.0-rc.3
commit [140a20e6f1e9a32c14958bb5b26358d480a349cc](https://github.com/visual-framework/vf-core/commit/140a20e6f1e9a32c14958bb5b26358d480a349cc)
* documentation cleanup
* `analyticsTrackInteraction()` is now namespaced as `vfGaTrackInteraction()`
* `vfGaTrackInteraction()` now documented for direct usage
* Fix console verbose logging: if set to false it would pass
* https://github.com/visual-framework/vf-core/issues/1131
### [vf-card](https://stable.visual-framework.dev/components/vf-card/) 2.2.0
commit [788277969ff44528842d85147f5b1e1c05326b9b](https://github.com/visual-framework/vf-core/commit/788277969ff44528842d85147f5b1e1c05326b9b)
- adds a slight box shadow to all card variants to denote that it's something on the page, not 'of the page'.
- updates the hover box shadow so that it fits with the new box shadow on all cards.
### [vf-form__input](https://stable.visual-framework.dev/components/vf-form__input/) 1.1.0
commit [af8e0a1461033a5ad7a6a7cb673914da2315ba82](https://github.com/visual-framework/vf-core/commit/af8e0a1461033a5ad7a6a7cb673914da2315ba82)
- adds `type="search"` form input.
- styles the cancel button so it uses our icon set and is bigger than user agent default.
### [vf-button](https://stable.visual-framework.dev/components/vf-button/) 1.1.1
commit [fb54a3462a003219f00859c9c8a111a4edce997c](https://github.com/visual-framework/vf-core/commit/fb54a3462a003219f00859c9c8a111a4edce997c)
- adds `webkit-appearance: none;` as needed for Safari browsers as autoprefixer is not doing this.
### [vf-form__input](https://stable.visual-framework.dev/components/vf-form__input/) 1.0.1
commit [fb54a3462a003219f00859c9c8a111a4edce997c](https://github.com/visual-framework/vf-core/commit/fb54a3462a003219f00859c9c8a111a4edce997c)
- adds `webkit-appearance: none;` as needed for Safari browsers as autoprefixer is not doing this.
### [vf-form__select](https://stable.visual-framework.dev/components/vf-form__select/) 1.0.1
commit [fb54a3462a003219f00859c9c8a111a4edce997c](https://github.com/visual-framework/vf-core/commit/fb54a3462a003219f00859c9c8a111a4edce997c)
- adds `webkit-appearance: none;` as needed for Safari browsers as autoprefixer is not doing this.
### [vf-search-client-side](https://stable.visual-framework.dev/components/vf-search-client-side/) 1.0.0-alpha.2
commit [dd4ab4a1073999340eb445877a5f5af9b6903745](https://github.com/visual-framework/vf-core/commit/dd4ab4a1073999340eb445877a5f5af9b6903745)
* Improve documentation
2.2.1 Component updates
2020-09-11T20:24:50Z
https://stable.visual-framework.dev/updates/2020-09-11-component-updates/
This releases 2.2.1 to the CDN:
- https://assets.emblstatic.net/vf/v2.2.1/css/styles.css
- https://assets.emblstatic.net/vf/v2.2.1/scripts/scripts.js
### [embl-grid](https://stable.visual-framework.dev/components/embl-grid/) 2.0.4
commit [697e93b8d6f375cb8293eb20dc8eec750f765a90](https://github.com/visual-framework/vf-core/commit/697e93b8d6f375cb8293eb20dc8eec750f765a90)
```
- fixes issue with `auto` and `1fr` doing the opposite with the sidebar.
```
### [embl-breadcrumbs-lookup](https://stable.visual-framework.dev/components/embl-breadcrumbs-lookup/) 1.0.0
commit [bc838b989cd538be42da34fd56ada27dd37f67f9](https://github.com/visual-framework/vf-core/commit/bc838b989cd538be42da34fd56ada27dd37f67f9)
```
- prevent recursive breadcrumb lookup: it can occur for the EMBL taxonomy to have recursive parents, this present direct recursion
```
### [vf-component-library](https://stable.visual-framework.dev/components/vf-component-library/) 1.0.7
commit [28421a0e94d929a0458c9d86129b854df99a7fea](https://github.com/visual-framework/vf-core/commit/28421a0e94d929a0458c9d86129b854df99a7fea)
```
- adds updates blog
```
Updates on Visual Framework component changes
2020-09-11T11:24:50Z
https://stable.visual-framework.dev/updates/2020-09-11-communicating-more/
<p>Here on <a href="https://stable.visual-framework.dev/updates">this blog</a> you can now expect to find what's new in each release of components.</p>
<p>We've also revised our <a href="https://github.com/visual-framework/vf-core/blob/develop/PUBLISHING.md">publishing procedure</a> to more frequently ship tagged releases the CDN (a la: <code>https://assets.emblstatic.net/vf/v2.2.0/css/styles.css</code>). And we plan to <a href="https://github.com/visual-framework/vf-core/issues/1074">better document</a> how to find the latest tagged release, and when you should build your own CSS and JS from source.</p>
<h2>Ways to stay updated</h2>
<ul>
<li><a href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Join the VF Slack group</a></li>
<li>Use a CI tool like <a href="https://dependabot.com/">Dependabot</a> to get automatic pull requests</li>
<li><a href="http://localhost:3003/vf-core/feed.xml">Follow the RSS feed</a></li>
</ul>
<h2>How we're (partly) automating blog updates</h2>
<p>We're using git to echo all the changes between the last releases with this git command:</p>
<p><code>git show -U --raw $(git describe --abbrev=0 --tags $(git rev-list --tags --skip=1 --max-count=1))..$(git describe --abbrev=0 --tags $(git rev-list --tags --max-count=1)) --raw --output=tools/vf-component-library/src/site/updates/$(date +%F)-component-updates.md -- **/CHANGELOG.md</code></p>
<p>It dumps the changes into a time-stamped Markdown file which our <a href="https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-library">Eleventy-based component library</a> turns into <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/updates.njk">a blog post</a>.</p>
<p>We run this as an aliased command: <code>yarn run releasenotes</code></p>
<p>The file then needs some manual massaging which we plan to further automate in the future:</p>
<ul>
<li>Insert templated frontmatter</li>
<li>Rewrite the git output and link accorignly, in this format:</li>
</ul>
<pre><code>
### [vf-summary](https://stable.visual-framework.dev/components/vf-summary/) 1.3.1
commit [999f4cf9671afab790735150dd21c2040c3968b3](https://github.com/visual-framework/vf-core/commit/999f4cf9671afab790735150dd21c2040c3968b3)
- adds 'grid-template-areas' CSS for `--has-image` variant so you can use it with a `-thumbnail` class.
</code></pre>
<h2>Another useful command</h2>
<p>This command would output all CHANGELOG.md changes since the most recent tag:</p>
<p><code>git show -U --raw $(git describe --tags --abbrev=0 @^)..@ --raw --output=tools/vf-component-library/src/site/updates/$(date +%F).md -- **/CHANGELOG.md</code></p>
Component updates
2020-09-10T12:24:50Z
https://stable.visual-framework.dev/updates/2020-09-10-component-updates/
### [vf-summary](https://stable.visual-framework.dev/components/vf-summary/) 1.3.1
commit [999f4cf9671afab790735150dd21c2040c3968b3](https://github.com/visual-framework/vf-core/commit/999f4cf9671afab790735150dd21c2040c3968b3)
```bash
- adds 'grid-template-areas' CSS for `--has-image` variant so you can use it with a `-thumbnail` class.
```
### [embl-grid](https://stable.visual-framework.dev/components/embl-grid/) 2.0.2
commit [797068ad8d3f0232e9b9cf85c5cfca7f2ef3405f](https://github.com/visual-framework/vf-core/commit/797068ad8d3f0232e9b9cf85c5cfca7f2ef3405f)
```bash
- changes breakpoint for sidebar to be a sidebar from 1024px
- makes the sidebar smaller until it hits 1300px
```
### [vf-sass-config](https://stable.visual-framework.dev/components/vf-sass-config/) 1.4.1
commit [59d9a30f76b0effe7e649e3f578c4df4a939072a](https://github.com/visual-framework/vf-core/commit/59d9a30f76b0effe7e649e3f578c4df4a939072a)
```bash
- updates the `$global-page-max-width` variable so that it's consistent with the page width across components - set to `81.25rem`.
```
### Dependency bumps
commit [3447c6e18ea7ea7fd638ad4ccd5b30e0cc9fc874](https://github.com/visual-framework/vf-core/commit/3447c6e18ea7ea7fd638ad4ccd5b30e0cc9fc874)
- [vf-content](https://stable.visual-framework.dev/components/embl-grid/) 2.0.3
- [vf-sass-config](https://visual-framework.github.io/vf-sass-config/components/embl-grid/) 1.4.2
- [vf-sass-starter](https://visual-framework.github.io/vf-sass-starter/components/embl-grid/) 0.1.7
- [vf-vf-stack](https://visual-framework.github.io/vf-vf-stack/components/embl-grid/) 1.1.1
Component updates
2020-09-09T12:24:50Z
https://stable.visual-framework.dev/updates/2020-09-09-component-updates/
### [vf-content](https://stable.visual-framework.dev/components/vf-content/) 1.2.2
commit [ce06ca359f3cad01c5db46e4e04c67c5cf71fcb0](https://github.com/visual-framework/vf-core/commit/ce06ca359f3cad01c5db46e4e04c67c5cf71fcb0)
```bash
- dependency bump
```
### vf-component-library 1.0.6
commit [8590c2ad02f26328d489228a4f6f39a11aebb913](https://github.com/visual-framework/vf-core/commit/8590c2ad02f26328d489228a4f6f39a11aebb913)
```bash
- begin to make more pattern/boilerplate guidance
- minor templating updates
```
### [vf-search](https://stable.visual-framework.dev/components/vf-search/) 1.2.2
commit [ac13156044ea6101e8f947a905aede597757e346](https://github.com/visual-framework/vf-core/commit/ac13156044ea6101e8f947a905aede597757e346)
```bash
- adds support for default search value
```
### [vf-box](https://stable.visual-framework.dev/components/vf-box/) 2.0.2 and 2.0.1
commit [8074046d63b28d4e2031d8dfdaca9e78c9a27f60](https://github.com/visual-framework/vf-core/commit/8074046d63b28d4e2031d8dfdaca9e78c9a27f60)
```bash
- fixes bug with `-link` variant by adding position relative to `vf-box`
- adds `| safe` to `vf-box__text` variable so that HTML can be parsed through.
- margin reset on `.vf-box :last-child` now has more specificity as `.vf-box > :last-child`
```
Components: deprecating
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/guidance/deprecating-components/
<p>Here's what we need to make sure we do:</p>
<ol>
<li>Developers can avoid installing and outdated component;</li>
<li>Developers can know to stop using a component; and</li>
<li>Components aren't removed so existing sites continue to function.</li>
</ol>
<h2>How to deprecate an entire component</h2>
<ol>
<li>In the <code>component-name.config.yml</code> file add:
<ul>
<li><code>status: deprecated</code></li>
<li><code>component-type: deprecated</code></li>
<li><code>hidden: true</code></li>
</ul>
</li>
<li>In the <code>component-name.scss</code> file wrap the sass with:
<ul>
<li><code>html:not(.vf-disable-deprecated) {</code></li>
</ul>
</li>
<li>Update <code>README.md</code> with:
<ul>
<li>why the component has been deprecated</li>
<li>what component(s) developers should instead use</li>
<li>Use this template in the README.md file</li>
</ul>
<pre><code class="language-html">This component has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#">new</a> component.
</code></pre>
</li>
<li>Publish on npm
<ul>
<li>see <a href="https://github.com/visual-framework/vf-core/blob/develop/PUBLISHING.md"><code>PUBLISHING.md</code></a></li>
</ul>
</li>
<li>Remove the component from <code>vf-core</code></li>
<li>Deprecate on npm
<ul>
<li><code>npm deprecate @visual-framework/component "no longer supported use the @visual-framework/component instead"</code></li>
</ul>
</li>
</ol>
<h2>Need to deprecate just one variant of a component?</h2>
<ol>
<li>Add a note to the <code>--variant.njk</code>
<ul>
<li>Use this template</li>
</ul>
<pre><code class="language-html">This variant has been <span style="color: rgb(228, 0, 70);">deprecated</span>. Please use the <a class="vf-link" href="#">new</a> component.
</code></pre>
</li>
<li>Wrap the relevant Sass in <code>html:not(.vf-disable-deprecated) {</code></li>
<li>Hide the variant tab in <code>.config.yml</code>:</li>
</ol>
<pre><code>variants:
- name: deprecated-variant
hidden: true
</code></pre>
<br />
<p>See also: <a href="https://github.com/visual-framework/vf-core/tree/develop/components/vf-deprecated">example <code>vf-deprecated</code> component</a></p>
EBI-VF 1.3 integration
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/demos/integration-vf1/
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://dev.ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<!-- Use this CSS file for any custom styling -->
<!--
<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />
-->
<!-- If you have a custom header image or colour -->
<!--
<meta name="ebi:masthead-color" content="#000" />
<meta name="ebi:masthead-image" content="//www.ebi.ac.uk/web_guidelines/EBI-Framework/images/backgrounds/embl-ebi-background.jpg" />
-->
<!-- you can replace this with theme-[projectname].css. See http://www.ebi.ac.uk/web/style/colour for details of how to do this -->
<!-- also inform ES so we can host your colour palette file -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css" type="text/css" media="all" />
<!-- end CSS-->
<header id="masthead-black-bar" class="clearfix masthead-black-bar">
</header>
<div id="content">
<div data-sticky-container="">
<header id="masthead" class="masthead" data-sticky="" data-sticky-on="large" data-top-anchor="content:top" data-btm-anchor="content:bottom">
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-12" id="local-title">
<h1><a href="https://stable.visual-framework.dev/" title="Back to [service-name] homepage">EBI Framework</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
<nav>
<ul id="local-nav" class="dropdown menu float-left" data-description="navigational">
<li><a href="https://stable.visual-framework.dev/">Overview</a></li>
<li><a data-open="modal-download">Download</a></li>
<li><a href="https://stable.visual-framework.dev/demos/integration-vf1/#">Support <i class="icon icon-generic" data-icon="x"></i></a></li>
</ul>
</nav>
<!-- /local-nav -->
</div>
</header>
</div>
<!-- Suggested layout containers -->
<section id="main-content-area" class="row" role="main">
<!-- Your menu structure should make a breadcrumb redundant, but if a breadcrump is needed uncomment the below -->
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs columns">
<li><a href="https://stable.visual-framework.dev/">EBI Framework</a></li>
<li><a href="https://stable.visual-framework.dev/demos/">Sample pages</a></li>
<li>
<span class="show-for-sr">Current: </span> Blank boilerplate
</li>
</ul>
</nav>
<div class="columns">
<section>
<h2>EBI Boilerplate + jobs widget</h2>
<p>A quick port of https://www.ebi.ac.uk/style-lab/websites/sample-site/boilerplate/blank.html</p>
<p><a href="https://www.ebi.ac.uk/style-lab/websites/patterns/" class="vf-link">Lot's more VF 1.x components to try out here</a>.</p>
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?pattern=vf-jobs-snippet&filter-content-type=jobs&filter-field-contains[field_jobs_description]=Cancer&filter-field-date-after[field_jobs_expiration]=today&limit=3&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
</section>
</div>
</section>
<!-- Optional local footer (insert citation / project-specific copyright / etc here -->
<!--
<footer id="local-footer" class="local-footer" role="local-footer">
<div class="row">
<span class="reference">How to reference this page: ...</span>
</div>
</footer>
-->
<!-- End optional local footer -->
</div>
<!-- End suggested layout containers / #content -->
<footer>
<div id="global-footer" class="global-footer">
<nav id="global-nav-expanded" class="global-nav-expanded row">
<!-- Footer will be automatically inserted by footer.js -->
</nav>
<section id="ebi-footer-meta" class="ebi-footer-meta row">
<!-- Footer meta will be automatically inserted by footer.js -->
</section>
</div>
</footer>
<!-- JavaScript -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.10.2.min.js"><\/script>')</script>
-->
<script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/script.js"></script>
<!-- The Foundation theme JavaScript -->
<script src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/libraries/foundation-6/js/foundation.js"></script>
<script type="text/JavaScript">$(document).foundation();</script>
I'm pure 2.0
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/demos/integration-pure/
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?pattern=vf-jobs-snippet&filter-content-type=jobs&filter-field-contains[field_jobs_description]=Cancer&filter-field-date-after[field_jobs_expiration]=today&limit=3&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
Bootstrap integration
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/demos/integration-bootstrap/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4" />
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="https://stable.visual-framework.dev/demos/integration-bootstrap/#" role="button">Learn more</a>
</div>
<a href="https://getbootstrap.com/docs/4.3/components/" class="vf-link">Lot's more Bootstrap components to try out here</a>
<link rel="import" href="https://dev.beta.embl.org/api/v1/pattern.html?pattern=vf-jobs-snippet&filter-content-type=jobs&filter-field-contains[field_jobs_description]=Cancer&filter-field-date-after[field_jobs_expiration]=today&limit=3&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
Example integrations
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/demos/
<p>Sample integrations of the VF with other Frameworks:</p>
<ul>
<li><a href="https://stable.visual-framework.dev/demos/integration-pure">"Pure" VF 2.0</a></li>
<li><a href="https://stable.visual-framework.dev/demos/integration-bootstrap">Bootstrap</a></li>
<li><a href="https://stable.visual-framework.dev/demos/integration-vf1">VF 2.0 + VF 1.x</a></li>
<li>React (coming soonish)</li>
</ul>
Local components
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/components/ebi-header-footer/
<!-- no special content -->
Local components
2019-04-09T12:24:50Z
https://stable.visual-framework.dev/components/preview/preview/
<!-- no special content -->
Spacing and sizing
2018-10-19T12:24:50Z
https://stable.visual-framework.dev/design-tokens/spacing/
<h1 class="vf-intro__heading">Spacing and sizing</h1>
<nav class="vf-navigation vf-navigation--on-this-page | vf-u-fullbleed | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner" data-vf-js-navigation-on-this-page-container="true">
<li class="vf-navigation__item">
On this page
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/spacing/#spacing" class="vf-navigation__link" aria-selected="true">Spacing</a>
</li>
<li class="vf-navigation__item">
<a href="https://stable.visual-framework.dev/design-tokens/spacing/#breakpoints" class="vf-navigation__link">Breakpoints</a>
</li>
</ul>
</nav>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="spacing"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/custom-properties/vf-spacing.custom-properties.scss">Spacing</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 0; width: 0; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 0</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">0</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--0</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--0</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: .125rem; width: .125rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 50</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">.125rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--50</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(50)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--50</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: .25rem; width: .25rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 100</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">.25rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--100</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(100)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--100</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: .5rem; width: .5rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 200</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">.5rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--200</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(200)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--200</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 1rem; width: 1rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 400</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">1rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--400</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(400)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--400</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 1.25rem; width: 1.25rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 500</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">1.25rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--500</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(500)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--500</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 1.5rem; width: 1.5rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 600</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">1.5rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--600</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(600)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--600</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 2rem; width: 2rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 800</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">2rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--800</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(800)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--800</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 3rem; width: 3rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 1200</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">3rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--1200</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(1200)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--1200</code></p>
</section>
</article>
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: 4rem; width: 4rem; background: #009f4d;"></div>
</div><section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Spacing 1600</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">4rem</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-spacing--1600</code></p>
<p class="vf-card__text">Sass function:
<code class="vf-code-example">space(1600)</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-spacing--1600</code></p>
</section>
</article>
</article>
</section>
<section class="embl-grid">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="breakpoints"><a href="https://github.com/visual-framework/vf-core/blob/develop/components/vf-design-tokens/dist/sass/maps/vf-breakpoints.map.scss">Breakpoint widths</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2></div>
<article class="vf-grid vf-grid__col-2">
<article class="vf-card">
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Extra Small Breakpoint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">360px</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-breakpoint--xs</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-breakpoint--xs</code></p>
</section>
</article>
<article class="vf-card">
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Small Breakpoint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">600px</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-breakpoint--sm</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-breakpoint--sm</code></p>
</section>
</article>
<article class="vf-card">
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Regular Breakpoint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">768px</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-breakpoint--md</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-breakpoint--md</code></p>
</section>
</article>
<article class="vf-card">
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Large Breakpoint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">1024px</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-breakpoint--lg</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-breakpoint--lg</code></p>
</section>
</article>
<article class="vf-card">
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>Extra Large Breakpoint</h3>
<p class="vf-card__text">Value:
<code class="vf-code-example">1280px</code></p>
<p class="vf-card__text">Sass variable:
<code class="vf-code-example">$vf-breakpoint--xl</code></p>
<p class="vf-card__text">CSS custom property:
<code class="vf-code-example">--vf-breakpoint--xl</code></p>
</section>
</article>
</article>
</section>
Page with sidebar
2018-08-22T12:24:50Z
https://stable.visual-framework.dev/patterns/sidebar/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Page with sidebar | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="Barcelona" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
</head>
<body class="vf-body | vf-stack vf-stack--400">
<header class="vf-header">
<header class="vf-global-header">
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
<img class="vf-logo__image" src="https://stable.visual-framework.dev/assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager" />
<span class="vf-logo__text">Visual Framework for Life Science websites</span>
</a>
<nav class="vf-navigation vf-navigation--global | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Services</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Research</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Training</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">About us</a>
</li> </ul>
</nav>
</header>
</header>
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
<ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/components" class="vf-breadcrumbs__link">Components and patterns</a>
</li>
<li class="vf-breadcrumbs__item" aria-current="location">
Page with sidebar
</li>
</ul>
<span class="vf-breadcrumbs__heading">Related:</span>
<ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/building" class="vf-breadcrumbs__link">Building a site</a>
</li>
</ul>
</nav>
<section class="vf-intro" id="an-id-for-anchor">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Page with sidebar
<a href="javascript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a> </h1>
<p class="vf-lede">Use this boilerplate pattern for generic pages.</p>
<p class="vf-intro__text">Long narrow sidebars suffer from usability issues, fortunately the VF utilises a container-based approach which allows for better "chunking" of information and sidebars that only stretch for the length of a portion of a page, which we'll demonstrate here.</p>
</div>
</section>
<section class="embl-grid embl-grid--has-sidebar">
<div>
<!-- you can include section headers too -->
<!-- <div class="vf-section-header"><h2 class="vf-section-header__heading"> A longer content area</h2></div> -->
</div>
<div class="vf-content">
<div class="vf-content">
<h1 id="embl-communications-strategy-2018-2020">EMBL communications strategy 2018-2020</h1>
<p class="vf-content__standfirst">This <a href="https://stable.visual-framework.dev/patterns/sidebar/#">communications strategy</a> outlines EMBL’s vision, mission and goals. It is intended to support everyone who communicates on behalf of EMBL, within and outside of the organisation, in order to provide aligned messaging and help EMBL to achieve its goals. The strategy is supported by an operational plan for the Strategy and Communications team.</p>
<p class="vf-content__standfirst">The plan reflects the priorities defined in the communications strategy and translates them into a set of deliverables and projects managed by the Strategy and Communications team. This documentation will be regularly reviewed and revised. Your feedback is welcome at any time: please contact EMBL’s Strategy and Communications team.</p>
<small><i>This document was last revised 7 March 2018</i></small>
<h2 id="section-1-embls-vision-and-mission">Section 1: EMBL’s vision and mission</h2>
<h3 id="embls-vision">EMBL’s vision</h3>
<p>Enabling scientists worldwide to discover the secrets of life</p>
<h3 id="embls-mission">EMBL’s mission</h3>
<ol>
<li>Uncovering the molecular basis of life through research</li>
<li>Providing research infrastructure and services</li>
<li>Training and inspiring the next generation of scientists</li>
<li>Driving research, innovation and progress through technology development</li>
<li>Interactions with industry and technology transfer</li>
<li>Playing a leading role in the integration of life science research</li>
</ol>
<h3 id="further-examples-of-bullets">Further examples of bullets</h3>
<ul>
<li>A bulleted item</li>
<li>A nested bulleted item</li>
<li>A nested bulleted item</li>
<li>A bulleted item</li>
<li>A bulleted item</li>
<li>A bulleted item</li>
<li>A bulleted item</li>
</ul>
<h3 id="definition-lists">Definition lists</h3>
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
<table>
<thead>
<tr>
<th scope="col">Event</th>
<th scope="col">Date</th>
<th scope="col">Type</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>dave</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
<td>roger</td>
<td>London, U.K.</td>
</tr>
<tr>
<td>dave</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
<td>roger</td>
<td>London, U.K.</td>
</tr>
<tr>
<td>dave</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td>roger</td>
<td>London, U.K.</td>
</tr>
</tbody>
</table>
<h3>What is EMBL?</h3>
<p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
<p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>
<figure>
<img src="https://stable.visual-framework.dev/assets/vf-figure/assets/figure-example.png" alt="An example figure image" loading="lazy" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
</figure>
<figure>
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/20201202_hero_emblorg_homepage-zoom-out.jpg" alt="An example figure image" loading="lazy" />
<figcaption>A very wide image.</figcaption>
</figure>
<p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
<p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>
<h2>Section 2: EMBL’s goals</h2>
<h3>Goal 1: Advancing society</h3>
<p>The fundamental knowledge that we create, enable and share is immensely valuable to society. Life-science research and services help to address society’s grand challenges, from human health, agriculture, to the environment and beyond.</p>
<h4>Communications goals:</h4>
<p>Show the impact of our work in tackling society’s big challenges</p>
<h3>Goal 2: Enable excellent science to advance our understanding of life</h3>
<p>We support scientists worldwide with infrastructure, services, technologies, training and platforms for exchange to carry out the best possible research. We are driven by curiosity about life, the most exciting story in the universe. We believe that advancing humankind’s understanding of life is a noble goal in itself.</p>
<h4>Communications goals:</h4>
<ul>
<li>Develop and sustain support for EMBL from important stakeholders</li>
<li>Attract the best scientists, engineers, technicians and support staff</li>
<li>Inform scientists about training opportunities and services</li>
</ul>
<blockquote>
<p>We are a group of user experience specialists in an international scientific organisation</p><p>Our aim is to help teams design services to meet the needs of their users</p><p>We believe in openness , transparency, working collaboratively and iteratively, continuously learning and sharing knowledge throughout the organisation</p><p><cite>EMBl-EBI Web Development UX Team Mission</cite></p>
</blockquote>
<figure>
<img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy" />
<figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
</figure>
</div>
</div>
<div class="">
<div class="vf-box">
<h3 class="vf-box__heading"></h3>
<p class="vf-box__text"></p>
</div>
</div>
</section>
<footer class="vf-footer">
<div class="vf-footer__inner">
<p class="vf-footer__notice">A description of a site or organisation and what its goals are.</p>
<div class="vf-footer__links-group | vf-grid">
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">A link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Another link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Third link</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
</div>
<section class="vf-footer__legal | vf-grid vf-grid__col-1">
<ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
</ul>
<p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
<p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
<p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
<a class="vf-footer__link" href="javascript:Void(0);">Another entry</a>
</section>
</div>
</footer>
<footer class="vf-footer | vf-search-client-side--no-index">
<div class="vf-footer__inner">
<p class="vf-footer__notice">The Visual Framework is a toolkit to quickly and collaboratively build better life science websites.</p>
<p class="vf-footer__notice">It is open source and used on dozens of life science websites and maintained by a community of front end developers, UX specialists and designers. <a class="vf-footer__link" href="https://stable.visual-framework.dev/guidance/discussing-the-vf">Get involved</a>.</p>
<div class="vf-footer__links-group | vf-grid vf-grid__col-5">
<div class="vf-links">
<ul class="vf-links__list | vf-list">
<h4 class="vf-links__heading">
<a class="vf-heading__link" href="https://stable.visual-framework.dev/about">About</a>
</h4>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/about/faq">FAQ</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/about/roadmap">Roadmap</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/about/consultation">Consultation process</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates">Updates and blog</a>
</li>
</ul>
</div>
<div class="vf-links">
<ul class="vf-links__list | vf-list">
<h4 class="vf-links__heading">
<a class="vf-heading__link" href="https://stable.visual-framework.dev/building">Building</a>
</h4>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/components">Component list</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns">Patterns and examples</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/guidance">Guidance and principles</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/troubleshooting">Troubleshooting</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">
<a class="vf-heading__link" href="https://stable.visual-framework.dev/developing">Developing</a>
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/developing/getting-started/setting-up">Setting up</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/developing/getting-started/code-of-conduct">Code of conduct</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/developing/getting-started/pull-requests">Making a Pull Request</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">
<a class="vf-heading__link" href="https://github.com/visual-framework/vf-core">Project</a>
</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/search">Search</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/updates">Changelog, updates</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://github.com/visual-framework/vf-core">GitHub</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ">Slack</a>
</li>
</ul>
</div>
<div class="vf-links">
</div>
<div class="vf-links">
</div>
</div>
<section class="vf-footer__legal | vf-grid vf-grid__col-1">
<span class="vf-footer__legal-text">
<a class="vf-footer__link" href="https://www.embl.org/">Brought to you by the developers, designers and UX teams at EMBL and EMBL-EBI</a>
</span>
<span class="vf-footer__legal-text">
<a class="vf-footer__link" href="https://goo.gl/maps/nbxNg2HGXL1MTtzt9">Meyerhofstraße 1, 69117 Heidelberg, Germany</a>
</span>
<span class="vf-footer__legal-text">
<a class="vf-footer__link" href="tel:004962213870">Tel: +49 6221 387-0</a>
</span>
</section>
<section class="vf-footer__legal">
<span class="vf-footer__legal-text">
Latest release: <code class="">v2.5.14</code> <a href="https://stable.visual-framework.dev/updates" class="vf-footer__link">See more releases</a>
</span>
<span class="vf-footer__legal-text">
<a class="vf-footer__link" href="https://stable.visual-framework.dev/feed.xml">RSS Feed</a>
</span>
<span class="vf-footer__legal-text">
Code license is <a class="vf-footer__link" href="https://github.com/visual-framework/vf-core/blob/develop/LICENSE">Apache 2.0</a>
</span>
</section>
</div>
</footer>
<!-- IE11 polyfill JS -->
<script nomodule="" crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-N5ZLH2KNJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N5ZLH2KNJP');
</script>
</body>
</html>
Search results
2018-08-22T12:24:50Z
https://stable.visual-framework.dev/patterns/search-results/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Search results | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="Barcelona" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
<!--
Want to build a site with the Visual Framework?
---
You can copy the CSS and JS you find here, but for the best experience see the building guide:
https://stable.visual-framework.dev/building/
-->
</head>
<body class="vf-body vf-stack">
<header class="vf-header">
<header class="vf-global-header">
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
<img class="vf-logo__image" src="https://stable.visual-framework.dev/assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager" />
<span class="vf-logo__text">Visual Framework for Life Science websites</span>
</a>
<nav class="vf-navigation vf-navigation--global | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Services</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Research</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Training</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">About us</a>
</li> </ul>
</nav>
</header>
</header>
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
<ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/components" class="vf-breadcrumbs__link">Components and patterns</a>
</li>
<li class="vf-breadcrumbs__item" aria-current="location">
Search results
</li>
</ul>
<span class="vf-breadcrumbs__heading">Related:</span>
<ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/building" class="vf-breadcrumbs__link">Building a site</a>
</li>
</ul>
</nav>
<section class="embl-grid embl-grid--has-centered-content | vf-stack vf-stack--400">
<div></div>
<div>
<h1 class="vf-text vf-text-heading--1">Search pattern results</h1>
<p class="vf-text-body">
If you need a description about the service or context of the search.
</p>
<form action="javascript:Void(0);" class="vf-form vf-form--search | vf-sidebar vf-sidebar--end">
<div class="vf-sidebar__inner">
<div class="vf-form__item">
<label class="vf-form__label vf-u-sr-only | vf-search__label" for="inlinesearchitem">Inline search</label>
<input type="search" placeholder="Enter your search terms" id="inlinesearchitem" value="the current search query" class="vf-form__input" /> </div>
<button type="submit" class="vf-search__button | vf-button vf-button--primary">
<span class="vf-button__text">Search</span>
</button>
<p class="vf-form__helper">Related or examples: <a href="javascript:Void(0);" class="vf-link">Cheese</a>, <a href="javascript:Void(0);" class="vf-link">Brie</a>.</p> </div>
</form>
</div>
</section>
<section class="embl-grid">
<div class="vf-stack vf-stack--400">
<p class="vf-text-body vf-text-body--4">
Showing 10 results from a total of 1 280
</p><p>
</p><div class="vf-show-hide vf-show-hide--hidden" data-vf-js-show-hide="" data-vf-js-show-hide-hidden="">
<div class="vf-banner vf-banner--alert vf-banner--info">
<div class="vf-banner__content">
<p class="vf-banner__text">The facet layout is yet to be made mobile friendly.</p>
</div>
</div>
</div>
<fieldset class="vf-form__fieldset vf-stack vf-stack--400">
<legend class="vf-form__legend">Pick your favourite(s).</legend>
<div class="vf-form__item vf-form__item--checkbox">
<input type="checkbox" name="fruits" value="apples" id="fruit_01" class="vf-form__checkbox" />
<label for="fruit_01" class="vf-form__label">Apples</label>
</div>
<div class="vf-form__item vf-form__item--checkbox">
<input type="checkbox" name="fruits" value="bums" id="fruit_02" class="vf-form__checkbox" />
<label for="fruit_02" class="vf-form__label">Bananas</label>
<p class="vf-form__helper">Some text to help with things</p>
</div>
<div class="vf-form__item vf-form__item--checkbox">
<input type="checkbox" name="fruits" value="mangos" id="fruit_03" class="vf-form__checkbox" />
<label for="fruit_03" class="vf-form__label">Mangos</label>
</div>
<div class="vf-form__item vf-form__item--checkbox">
<input type="checkbox" name="fruits" value="oranges" id="fruit_04" class="vf-form__checkbox" />
<label for="fruit_04" class="vf-form__label">Oranges</label>
</div>
<div class="vf-form__item vf-form__item--checkbox">
<input type="checkbox" name="fruits" value="pears" id="fruit_05" class="vf-form__checkbox" disabled="" />
<label for="fruit_05" class="vf-form__label">Pears</label>
</div>
<div class="vf-form__item vf-form__item--checkbox">
<input type="checkbox" name="fruits" value="strawberries" id="fruit_06" class="vf-form__checkbox vf-form__checkbox--invalid" />
<label for="fruit_06" class="vf-form__label | vf-form__label--required">Strawberries<span class="vf-u-sr-only">field is required.</span>
<svg class="vf-icon vf-icon--asterick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>asterick</title><path d="M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z"></path></svg>
</label>
<p class="vf-form__helper vf-form__helper--error">You didn't pick Strawberries?</p>
</div>
</fieldset>
<fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
<legend class="vf-form__legend">Which do you like?</legend>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Apples" id="1" class="vf-form__radio" />
<label for="1" class="vf-form__label">Apples</label>
<p class="vf-form__helper">Some text to help with things</p>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Bananas" id="2" class="vf-form__radio" />
<label for="2" class="vf-form__label">Bananas</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Mangos" id="3" class="vf-form__radio" />
<label for="3" class="vf-form__label">Mangos</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Oranges" id="4" class="vf-form__radio" />
<label for="4" class="vf-form__label">Oranges</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Pears" id="5" class="vf-form__radio" disabled="" />
<label for="5" class="vf-form__label">Pears</label>
</div>
<div class="vf-form__item vf-form__item--radio">
<input type="radio" name="fruits" value="Strawberries" id="6" class="vf-form__radio" />
<label for="6" class="vf-form__label">Strawberries</label>
</div>
</fieldset>
<button class="vf-button vf-button--primary vf-button--sm ">Update search</button>
</div>
<div class="vf-stack">
<div class="vf-show-hide vf-show-hide--hidden" data-vf-js-show-hide="" data-vf-js-show-hide-hidden="">
<div class="vf-banner vf-banner--alert vf-banner--info">
<div class="vf-banner__content">
<p class="vf-banner__text">Your results go here in whatever format is most suitable: list, table, tiled images... etc. Here we have used summaries. You should be mindful about the line length of your results.</p>
</div>
</div>
</div>
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs="">
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/search-results/#vf-tabs__section--1">Generic</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/search-results/#vf-tabs__section--2">Training</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/search-results/#vf-tabs__section--3">Scientific</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/search-results/#vf-tabs__section--4">Jobs</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/search-results/#vf-tabs__section--5">Content</a>
</li>
<li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/search-results/#vf-tabs__section--6">Tabular</a>
</li>
</ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content="">
<section class="vf-tabs__section" id="vf-tabs__section--1">
<article class="vf-summary">
<p class="vf-summary__date">
{summary__secondary-label}
<span class="vf-summary__meta">
{summary__secondary-information}
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
{summary__title}
</a>
</h3>
<p class="vf-summary__text">
{summary__text} These are a few examples of text-based results that follow the same structure but with varying types of content.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
{summary__tertiary-information}
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
{summary__secondary-label}
<span class="vf-summary__meta">
{summary__secondary-information}
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
{summary__title}
</a>
</h3>
<p class="vf-summary__text">
{summary__text} These are a few examples of text-based results that follow the same structure but with varying types of content.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
{summary__tertiary-information}
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
{summary__secondary-label}
<span class="vf-summary__meta">
{summary__secondary-information}
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
{summary__title}
</a>
</h3>
<p class="vf-summary__text">
{summary__text} These are a few examples of text-based results that follow the same structure but with varying types of content.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
{summary__tertiary-information}
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
{summary__secondary-label}
<span class="vf-summary__meta">
{summary__secondary-information}
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
{summary__title}
</a>
</h3>
<p class="vf-summary__text">
{summary__text} These are a few examples of text-based results that follow the same structure but with varying types of content.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
{summary__tertiary-information}
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
{summary__secondary-label}
<span class="vf-summary__meta">
{summary__secondary-information}
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
{summary__title}
</a>
</h3>
<p class="vf-summary__text">
{summary__text} These are a few examples of text-based results that follow the same structure but with varying types of content.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
{summary__tertiary-information}
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
{summary__secondary-label}
<span class="vf-summary__meta">
{summary__secondary-information}
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
{summary__title}
</a>
</h3>
<p class="vf-summary__text">
{summary__text} These are a few examples of text-based results that follow the same structure but with varying types of content.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
{summary__tertiary-information}
</p>
</article>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
<article class="vf-summary">
<p class="vf-summary__date">
04 September
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Executive Masters in Management of Research Infrastructures
</a>
</h3>
<p class="vf-summary__text">
This Masters development programme is aimed at current Research Infrastructures managers and leaders who wish to develop the competencies required to meet the needs of Research Infrastructures in the planning, construction and operation phases.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
EMBO Workshop, Heidelberg
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
Online tutorial
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Functional genomics I: Introduction and designing experiments
</a>
</h3>
<p class="vf-summary__text">
This online course will give you an introduction to functional genomics. We will introduce you to different types of functional genomics studies and discuss best practices when designing your own ...
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
<a class="vf-link" href="javascript:Void(0);">More results for this online tutorial</a>
</p>
</section>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
04 September
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Executive Masters in Management of Research Infrastructures
</a>
</h3>
<p class="vf-summary__text">
This Masters development programme is aimed at current Research Infrastructures managers and leaders who wish to develop the competencies required to meet the needs of Research Infrastructures in the planning, construction and operation phases.
</p>
<p class="vf-summary__text | vf-u-type__text-body--5">
EMBO Workshop, Heidelberg
</p>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
Online tutorial
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Functional genomics I: Introduction and designing experiments
</a>
</h3>
<p class="vf-summary__text">
This online course will give you an introduction to functional genomics. We will introduce you to different types of functional genomics studies and discuss best practices when designing your own ...
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
<a class="vf-link" href="javascript:Void(0);">More results for this online tutorial</a>
</p>
</section>
</article>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--3">
<article class="vf-summary">
<p class="vf-summary__date">
<span class="vf-summary__meta">
Source: <a class="vf-link" href="javascript:Void(0);">UniProtKB (ID: KR171_HUMAN)</a>
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Q9BYP8 (KR171_HUMAN)
</a>
</h3>
<p class="vf-summary__text">
Keratin-associated protein 17-1. Homo sapiens(Reviewed).
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
Cross References: <a class="vf-link" href="javascript:Void(0);">Protein expression data</a> (18), <a class="vf-link" href="javascript:Void(0);">Bioactive molecules</a> (15), <a class="vf-link" href="javascript:Void(0);">Nucleotide sequences</a> (6), <a class="vf-link" href="javascript:Void(0);">show more</a>
<br />
Formats: <a class="vf-link" href="javascript:Void(0);">FASTA format</a>, <a class="vf-link" href="javascript:Void(0);">Feature Viewer</a>, <a class="vf-link" href="javascript:Void(0);">Interpro Matches</a>, <a class="vf-link" href="javascript:Void(0);">show more</a>
</p>
</section>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
<span class="vf-summary__meta">
Source: <a class="vf-link" href="javascript:Void(0);">UniProtKB (ID: KR171_HUMAN)</a>
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Q9BYP8 (KR171_HUMAN)
</a>
</h3>
<p class="vf-summary__text">
Keratin-associated protein 17-1. Homo sapiens(Reviewed).
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
Cross References: <a class="vf-link" href="javascript:Void(0);">Protein expression data</a> (18), <a class="vf-link" href="javascript:Void(0);">Bioactive molecules</a> (15), <a class="vf-link" href="javascript:Void(0);">Nucleotide sequences</a> (6), <a class="vf-link" href="javascript:Void(0);">show more</a>
<br />
Formats: <a class="vf-link" href="javascript:Void(0);">FASTA format</a>, <a class="vf-link" href="javascript:Void(0);">Feature Viewer</a>, <a class="vf-link" href="javascript:Void(0);">Interpro Matches</a>, <a class="vf-link" href="javascript:Void(0);">show more</a>
</p>
</section>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
<span class="vf-summary__meta">
Source: <a class="vf-link" href="javascript:Void(0);">UniProtKB (ID: KR171_HUMAN)</a>
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Q9BYP8 (KR171_HUMAN)
</a>
</h3>
<p class="vf-summary__text">
Keratin-associated protein 17-1. Homo sapiens(Reviewed).
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
Cross References: <a class="vf-link" href="javascript:Void(0);">Protein expression data</a> (18), <a class="vf-link" href="javascript:Void(0);">Bioactive molecules</a> (15), <a class="vf-link" href="javascript:Void(0);">Nucleotide sequences</a> (6), <a class="vf-link" href="javascript:Void(0);">show more</a>
<br />
Formats: <a class="vf-link" href="javascript:Void(0);">FASTA format</a>, <a class="vf-link" href="javascript:Void(0);">Feature Viewer</a>, <a class="vf-link" href="javascript:Void(0);">Interpro Matches</a>, <a class="vf-link" href="javascript:Void(0);">show more</a>
</p>
</section>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
<span class="vf-summary__meta">
Source: <a class="vf-link" href="javascript:Void(0);">UniProtKB (ID: KR171_HUMAN)</a>
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Q9BYP8 (KR171_HUMAN)
</a>
</h3>
<p class="vf-summary__text">
Keratin-associated protein 17-1. Homo sapiens(Reviewed).
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
Cross References: <a class="vf-link" href="javascript:Void(0);">Protein expression data</a> (18), <a class="vf-link" href="javascript:Void(0);">Bioactive molecules</a> (15), <a class="vf-link" href="javascript:Void(0);">Nucleotide sequences</a> (6), <a class="vf-link" href="javascript:Void(0);">show more</a>
<br />
Formats: <a class="vf-link" href="javascript:Void(0);">FASTA format</a>, <a class="vf-link" href="javascript:Void(0);">Feature Viewer</a>, <a class="vf-link" href="javascript:Void(0);">Interpro Matches</a>, <a class="vf-link" href="javascript:Void(0);">show more</a>
</p>
</section>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
<span class="vf-summary__meta">
Source: <a class="vf-link" href="javascript:Void(0);">UniProtKB (ID: KR171_HUMAN)</a>
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Q9BYP8 (KR171_HUMAN)
</a>
</h3>
<p class="vf-summary__text">
Keratin-associated protein 17-1. Homo sapiens(Reviewed).
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
Cross References: <a class="vf-link" href="javascript:Void(0);">Protein expression data</a> (18), <a class="vf-link" href="javascript:Void(0);">Bioactive molecules</a> (15), <a class="vf-link" href="javascript:Void(0);">Nucleotide sequences</a> (6), <a class="vf-link" href="javascript:Void(0);">show more</a>
<br />
Formats: <a class="vf-link" href="javascript:Void(0);">FASTA format</a>, <a class="vf-link" href="javascript:Void(0);">Feature Viewer</a>, <a class="vf-link" href="javascript:Void(0);">Interpro Matches</a>, <a class="vf-link" href="javascript:Void(0);">show more</a>
</p>
</section>
</article>
<article class="vf-summary">
<p class="vf-summary__date">
<span class="vf-summary__meta">
Source: <a class="vf-link" href="javascript:Void(0);">UniProtKB (ID: KR171_HUMAN)</a>
</span>
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/patterns/search-results/###" class="vf-summary__link">
Q9BYP8 (KR171_HUMAN)
</a>
</h3>
<p class="vf-summary__text">
Keratin-associated protein 17-1. Homo sapiens(Reviewed).
</p>
<section class="vf-summary__text">
<p class="vf-summary__location | vf-u-type__text-body--5">
Cross References: <a class="vf-link" href="javascript:Void(0);">Protein expression data</a> (18), <a class="vf-link" href="javascript:Void(0);">Bioactive molecules</a> (15), <a class="vf-link" href="javascript:Void(0);">Nucleotide sequences</a> (6), <a class="vf-link" href="javascript:Void(0);">show more</a>
<br />
Formats: <a class="vf-link" href="javascript:Void(0);">FASTA format</a>, <a class="vf-link" href="javascript:Void(0);">Feature Viewer</a>, <a class="vf-link" href="javascript:Void(0);">Interpro Matches</a>, <a class="vf-link" href="javascript:Void(0);">show more</a>
</p>
</section>
</article>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--4">
<article class="vf-summary vf-summary--job">
<p class="vf-summary__meta">
Staff Member in EMBL-EBI Hinxton
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__link">Bioinformatician</a>
</h3>
<p class="vf-summary__text">The Open Targets (OT) project aims to systematically identify and prioritise drug targets by combining genetic, clinical and functional genomics data. It is a shared initiative between the European...</p>
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a>
<p class="vf-summary__date">Closes 22 December 2020</p>
</article>
<article class="vf-summary vf-summary--job">
<p class="vf-summary__meta">
Staff Member in EMBL-EBI Hinxton
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__link">Bioinformatician</a>
</h3>
<p class="vf-summary__text">The Open Targets (OT) project aims to systematically identify and prioritise drug targets by combining genetic, clinical and functional genomics data. It is a shared initiative between the European...</p>
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a>
<p class="vf-summary__date">Closes 22 December 2020</p>
</article>
<article class="vf-summary vf-summary--job">
<p class="vf-summary__meta">
Staff Member in EMBL-EBI Hinxton
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__link">Bioinformatician</a>
</h3>
<p class="vf-summary__text">The Open Targets (OT) project aims to systematically identify and prioritise drug targets by combining genetic, clinical and functional genomics data. It is a shared initiative between the European...</p>
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a>
<p class="vf-summary__date">Closes 22 December 2020</p>
</article>
<article class="vf-summary vf-summary--job">
<p class="vf-summary__meta">
Staff Member in EMBL-EBI Hinxton
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__link">Bioinformatician</a>
</h3>
<p class="vf-summary__text">The Open Targets (OT) project aims to systematically identify and prioritise drug targets by combining genetic, clinical and functional genomics data. It is a shared initiative between the European...</p>
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a>
<p class="vf-summary__date">Closes 22 December 2020</p>
</article>
<article class="vf-summary vf-summary--job">
<p class="vf-summary__meta">
Staff Member in EMBL-EBI Hinxton
</p>
<h3 class="vf-summary__title">
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__link">Bioinformatician</a>
</h3>
<p class="vf-summary__text">The Open Targets (OT) project aims to systematically identify and prioritise drug targets by combining genetic, clinical and functional genomics data. It is a shared initiative between the European...</p>
<a href="https://stable.visual-framework.dev/jobs/position/EBI01735" class="vf-summary__button | vf-button vf-button--primary vf-button--outline vf-button--sm">Learn more</a>
<p class="vf-summary__date">Closes 22 December 2020</p>
</article>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--5">
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="https://stable.visual-framework.dev/assets/vf-summary/assets/vf-summary--news-has-image.jpg" alt="News image alt" loading="lazy" />
<h3 class="vf-summary__title">
<a href="javascript:Void(0);" class="vf-summary__link">
What is Cancer?
</a>
</h3>
<p class="vf-summary__text">
Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.
</p>
</article>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--6">
<svg class="vf-icon-sprite vf-icon-sprite--tables" display="none">
<defs>
<g id="vf-table-sortable--up">
<path xmlns="http://www.w3.org/2000/svg" d="M17.485,5.062,12.707.284a1.031,1.031,0,0,0-1.415,0L6.515,5.062a1,1,0,0,0,.707,1.707H10.25a.25.25,0,0,1,.25.25V22.492a1.5,1.5,0,1,0,3,0V7.019a.249.249,0,0,1,.25-.25h3.028a1,1,0,0,0,.707-1.707Z"></path>
</g>
<g id="vf-table-sortable--down">
<path xmlns="http://www.w3.org/2000/svg" d="M17.7,17.838a1,1,0,0,0-.924-.617H13.75a.249.249,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0V16.971a.25.25,0,0,1-.25.25H7.222a1,1,0,0,0-.707,1.707l4.777,4.778a1,1,0,0,0,1.415,0l4.778-4.778A1,1,0,0,0,17.7,17.838Z"></path>
</g>
<g id="vf-table-sortable">
<path xmlns="http://www.w3.org/2000/svg" d="M9,19a1,1,0,0,0-.707,1.707l3,3a1,1,0,0,0,1.414,0l3-3A1,1,0,0,0,15,19H13.5a.25.25,0,0,1-.25-.25V5.249A.25.25,0,0,1,13.5,5H15a1,1,0,0,0,.707-1.707l-3-3a1,1,0,0,0-1.414,0l-3,3A1,1,0,0,0,9,5h1.5a.25.25,0,0,1,.25.25v13.5a.25.25,0,0,1-.25.25Z"></path>
</g>
</defs>
</svg>
<table class="vf-table">
<thead class="vf-table__header">
<tr class="vf-table__row"> <th class="vf-table__heading" scope="col"> Event
</th>
<th class="vf-table__heading" scope="col"> Date
</th>
<th class="vf-table__heading" scope="col"> Type
</th>
<th class="vf-table__heading" scope="col"> Location
</th>
</tr>
</thead>
<tbody class="vf-table__body"> <tr class="vf-table__row
"><td class="vf-table__cell">dave</td>
<td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
<td class="vf-table__cell">roger</td>
<td class="vf-table__cell">London, U.K.</td>
</tr>
<tr class="vf-table__row
"><td class="vf-table__cell">dave</td>
<td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
<td class="vf-table__cell">roger</td>
<td class="vf-table__cell">London, U.K.</td>
</tr>
<tr class="vf-table__row
"><td class="vf-table__cell">dave</td>
<td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
<td class="vf-table__cell">roger</td>
<td class="vf-table__cell">London, U.K.</td>
</tr>
</tbody> <tfoot class="vf-table__footer">
<tr class="vf-table__row">
<td class="vf-table__cell" colspan="3">
Hello
</td>
<td class="vf-table__cell" colspan="1">
world
</td>
</tr>
</tfoot></table>
</section>
</div>
<nav class="vf-pagination" aria-label="Pagination">
<ul class="vf-pagination__list">
<li class="vf-pagination__item vf-pagination__item--previous-page">
<a href="javascript:Void(0);" class="vf-pagination__link">
Previous<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item">
<a href="javascript:Void(0);" class="vf-pagination__link">
1<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item">
<a href="javascript:Void(0);" class="vf-pagination__link">
2<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item">
<span class="vf-pagination__label">...</span>
</li>
<li class="vf-pagination__item">
<a href="javascript:Void(0);" class="vf-pagination__link">
17<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item vf-pagination__item--is-active">
<span class="vf-pagination__label" aria-current="page">
<span class="vf-u-sr-only">Page </span>18
</span>
</li>
<li class="vf-pagination__item">
<a href="javascript:Void(0);" class="vf-pagination__link">
19<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item">
<span class="vf-pagination__label">...</span>
</li>
<li class="vf-pagination__item">
<a href="javascript:Void(0);" class="vf-pagination__link">
91<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item">
<a href="javascript:Void(0);" class="vf-pagination__link">
92<span class="vf-u-sr-only"> page</span>
</a>
</li>
<li class="vf-pagination__item vf-pagination__item--next-page">
<a href="javascript:Void(0);" class="vf-pagination__link">
Next<span class="vf-u-sr-only"> page</span>
</a>
</li>
</ul>
</nav>
<div class="vf-show-hide vf-show-hide--hidden" data-vf-js-show-hide="" data-vf-js-show-hide-hidden="">
<div class="vf-banner vf-banner--alert vf-banner--info">
<div class="vf-banner__content">
<p class="vf-banner__text">Tip: You may also wish to precede the results with pagination and details of which page out of how many this is.</p>
</div>
</div>
</div>
</div>
</section>
<hr class="vf-divider" />
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/search-results.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
<footer class="vf-footer">
<div class="vf-footer__inner">
<p class="vf-footer__notice">A description of a site or organisation and what its goals are.</p>
<div class="vf-footer__links-group | vf-grid">
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">A link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Another link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Third link</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
</div>
<section class="vf-footer__legal | vf-grid vf-grid__col-1">
<ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
</ul>
<p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
<p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
<p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
<a class="vf-footer__link" href="javascript:Void(0);">Another entry</a>
</section>
</div>
</footer>
<style>
/* vf-show-hide still needs to be implemented */
</style>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script></body>
</html>
Scientific resource landing page
2018-08-22T12:24:50Z
https://stable.visual-framework.dev/patterns/scientific-service/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Scientific resource landing page | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/vf-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="Barcelona" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
</head>
<body class="vf-body | vf-stack vf-stack--400">
<header class="vf-header">
<header class="vf-global-header">
<a href="https://stable.visual-framework.dev/" class="vf-logo | vf-logo--has-text">
<img class="vf-logo__image" src="https://stable.visual-framework.dev/assets/vf-logo/assets/logo.svg" alt="Visual Framework for Life Science websites" loading="eager" />
<span class="vf-logo__text">Visual Framework for Life Science websites</span>
</a>
<nav class="vf-navigation vf-navigation--global | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Services</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Research</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Training</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">About us</a>
</li> </ul>
</nav>
</header>
</header>
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
<ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/components" class="vf-breadcrumbs__link">Components and patterns</a>
</li>
<li class="vf-breadcrumbs__item" aria-current="location">
Scientific resource landing page
</li>
</ul>
<span class="vf-breadcrumbs__heading">Related:</span>
<ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/building" class="vf-breadcrumbs__link">Building a site</a>
</li>
</ul>
</nav>
<!-- See the VF Hero docs: https://stable.visual-framework.dev/components/vf-hero/ -->
<div class="vf-banner vf-banner--alert vf-banner--info">
<div class="vf-banner__content">
<p class="vf-banner__text">This is a starting point for services that demonstrates an overall feel and how to structure the homepage navigation. Individual service design will vary greately depending on the needs addressed.</p>
</div>
</div>
<style>
/* vf-hero wih search is still a prototype concept */
.vf-hero--search .vf-hero__content {
min-width: 60%;
}
</style>
<!-- prototype hero + search -->
<section class="vf-hero vf-hero--800 vf-hero--search | vf-u-fullbleed" style="--vf-hero--bg-image: url('https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/EBI_webbanner_test_V3.jpg');">
<div class="vf-hero__content | vf-box | vf-stack vf-stack--400"><p class="vf-hero__kicker"><a href="https://www.ebi.ac.uk/about">Categorisation (Optional)</a> | Structural Biology</p>
<h2 class="vf-hero__heading">Online scientific resource</h2>
<p class="vf-hero__subheading">Open data resources of code, functions and things of data</p>
<form action="https://stable.visual-framework.dev/patterns/scientific-service/#" class="vf-form vf-form--search vf-form--search--mini | vf-sidebar vf-sidebar--end">
<div class="vf-sidebar__inner">
<div class="vf-form__item">
<label class="vf-form__label vf-u-sr-only | vf-search__label" for="searchitem">Search</label>
<input type="search" placeholder="Search the service" id="searchitem" class="vf-form__input" />
</div>
<div class="vf-form__item">
<select class="vf-form__select" id="vf-form__select">
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="dog" selected="">Dog</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
</div>
<button type="submit" class="vf-search__button | vf-button vf-button--primary">
<span class="vf-button__text | vf-u-sr-only">Search</span>
<svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140">
<g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
<path d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z" fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path>
</g>
</svg>
</button>
</div>
</form>
<p class="vf-text-body--5">
Example searches: <a href="javascript:Void(0);" class="vf-link">Example</a>, <a href="javascript:Void(0);" class="vf-link">Example</a>, <a href="javascript:Void(0);" class="vf-link">Example</a>
|
<a href="javascript:Void(0);" class="vf-link">advanced search</a>
</p>
</div>
</section>
<section class="vf-grid vf-grid__col-3 | vf-card-container | vf-u-fullbleed vf-u-background-color-ui--grey--light">
<div class="vf-grid__col--span-2">
<div class="vf-grid vf-grid__col-2"><article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Browse <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">On the homepage, don't use a strip of navigation</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Results <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">It's more user friendly to put the navigation into squares like these</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Download <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">It allows users to explore the content</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Help <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">And also read about what to expect in each section</p>
</div>
</article>
</div>
</div>
<div><article class="vf-card vf-card--brand vf-card--striped">
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">About this service <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">A thing provides functional analysis of proteins by classifying them into families and predicting domains and important sites.</p>
</div>
</article>
</div>
</section>
<section class="embl-grid | vf-u-margin__top--1200"> <div class="vf-section-header"><h2 class="vf-section-header__heading"> In the spotlight</h2></div> <section class="vf-grid vf-grid__col-1 | vf-content">
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs=""><li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/scientific-service/#vf-tabs__section--1">Search by sequence</a>
</li><li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/scientific-service/#vf-tabs__section--2">Search by text</a>
</li><li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/scientific-service/#vf-tabs__section--3">Search by Domain Architecture</a>
</li></ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content="">
<section class="vf-tabs__section" id="vf-tabs__section--1">
<p>This could be text information, or a nested form. Or you might not want tabs at all, use the code needed for your service. You can also include non-Visual Framework JS and CSS, as the VF won't break your other code.</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
<p>Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--3">
<p>Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="https://stable.visual-framework.dev/patterns/scientific-service/#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="https://stable.visual-framework.dev/patterns/scientific-service/#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.</p>
</section>
</div>
</section>
</section>
<!-- See the VF Card container docs: https://stable.visual-framework.dev/components/vf-card-container/ -->
<section class="vf-card-container | vf-u-background-color--grey--lightest vf-u-fullbleed" style="--vf-card__image--aspect-ratio: 16 / 9;">
<div class="vf-card-container__inner">
<div class="vf-section-header"><h2 class="vf-section-header__heading vf-section-header__heading--is-link"><a href="javascript:Void(0);">Missions</a><svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="" fill-rule="nonzero"></path></svg></h2><p class="vf-section-header__text">To promote molecular biology across Europe</p><p class="vf-section-header__text">To create a centre of excellence for Europe's leading young molecular biologists</p></div>
<article class="vf-card vf-card--brand vf-card--bordered">
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">One card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos? Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">A card here <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</article>
<article class="vf-card vf-card--brand vf-card--bordered">
<img src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/2020/04/SCHOOLS_1011_ells-learninglab_hd_01_Cool_500px.jpg" alt="" class="vf-card__image" loading="lazy" />
<div class="vf-card__content | vf-stack vf-stack--400"><h3 class="vf-card__heading"><a class="vf-card__link" href="javascript:Void(0);">Another card <svg aria-hidden="true" class="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z" fill="currentColor" fill-rule="nonzero"></path></svg>
</a></h3>
<p class="vf-card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum, omnis provident saepe aut eius aliquam sequi fugit incidunt reiciendis, mollitia quos?</p>
</div>
</article>
</div>
</section>
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/scientific-service.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
<footer class="vf-footer">
<div class="vf-footer__inner">
<p class="vf-footer__notice">A description of a site or organisation and what its goals are.</p>
<div class="vf-footer__links-group | vf-grid">
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">A link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Another link</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Third link</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
<div class="vf-links">
<h4 class="vf-links__heading">Category</h4>
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="javascript:Void(0);">Entry</a>
</li>
</ul>
</div>
</div>
<section class="vf-footer__legal | vf-grid vf-grid__col-1">
<ul class="vf-footer__list vf-footer__list--legal | vf-list vf-list--inline">
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
<li class="vf-list__item">
<a href="javascript:Void(0);" class="vf-list__link">Entry</a>
</li>
</ul>
<p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
<p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
<p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
<a class="vf-footer__link" href="javascript:Void(0);">Another entry</a>
</section>
</div>
</footer>
<!-- IE11 polyfill JS -->
<script nomodule="" crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-N5ZLH2KNJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N5ZLH2KNJP');
</script>
</body>
</html>
Navigation example
2018-08-22T12:24:50Z
https://stable.visual-framework.dev/patterns/navigation/
Instead of nested menus, the Visual Framework is designed to facilitate structure and navigation through a series of stackable containers.
This simplifies the UX and makes reorganising pages simpler.
Integrating with existing sites and CSS, JS
2018-08-22T12:24:50Z
https://stable.visual-framework.dev/patterns/integration/
<!-- you can find more examples at https://github.com/visual-framework/vf-sample-integrations -->
<!DOCTYPE html SYSTEM "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>UniProt</title>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="https://www.uniprot.org/" rel="home" />
<link href="https://creativecommons.org/licenses/by/4.0/" rel="license" />
<link type="image/vnd.microsoft.icon" href="https://www.uniprot.org/favicon.ico" rel="shortcut icon" />
<link href="https://www.uniprot.org/uniprot.min.css2019_01" type="text/css" rel="stylesheet" />
<script src="https://www.uniprot.org/scripts/frontier/d3/d3.v3.min.js" type="text/javascript"></script>
<script src="https://www.uniprot.org/js-compr.js2019_01" type="text/javascript"></script>
<script type="text/javascript">
uniprot.namespace = 'uniprot';
uniprot.releasedate = '2019_01';
</script>
</head>
<body xmlns:up="http://purl.uniprot.org/core/" class="namespace-homepage" typeof="schema:WebPage"><span id="evidenceToolTip" style="display:none">
<p>An evidence describes the source of an annotation, e.g. an experiment that has been published in the
scientific literature, an orthologous protein, a record from another database, etc.</p>
<p><a href="https://www.uniprot.org/manual/evidences">More...</a></p>
</span>
<div id="masthead-container">
<div class="masthead" id="local-masthead">
<div id="local-title"><a id="logo" accesskey="1" href="https://www.uniprot.org/"><img alt="" src="https://www.uniprot.org/images/logos/Logo_medium.png" title="UniProt home" /></a></div>
<div class="namespace-uniprot" id="local-search">
<form method="get" action="https://stable.visual-framework.dev/uniprot" id="search-form">
<div id="namespace-background">
<div class="searchBoxIndicator" style="display:none" id="searchBoxIndicator1"> </div>
<div onclick="location.href='/help/text-search';" class="searchBoxIndicator" style="display:none" id="searchBoxIndicator2"> </div>
<div onclick="location.href='/help/advanced_search ';" class="searchBoxIndicator" style="display:none" id="searchBoxIndicator3"> </div><a class="namespace-select" id="select-namespace" onclick="return false;" href="https://stable.visual-framework.dev/patterns/integration/"><span class="caret_white" id="selected-namespace">UniProtKB</span></a>
<ul style="display:none" class="select-namespace-options"><a href="https://stable.visual-framework.dev/patterns/integration/#" class="closeBox" id="closeNamespaceOptions">x</a>
<li>
<ul>
<li class="fixedHeight_namespaces">
<h3 class="namespace_uniprot"><a class="namespace-option uniprot" href="https://stable.visual-framework.dev/patterns/integration/#" id="uniprot">UniProtKB</a></h3>
<p>Protein knowledgebase</p>
</li>
<li class="fixedHeight_namespaces">
<h3 class="namespace_uniparc"><a class="namespace-option uniparc" href="https://stable.visual-framework.dev/patterns/integration/#" id="uniparc">UniParc</a>
</h3>
<p>Sequence archive</p>
</li>
<li class="fixedHeight_namespaces">
<h3 class="namespace_help"><a class="namespace-option help" href="https://stable.visual-framework.dev/patterns/integration/#" id="help">Help</a></h3>
<p>Help pages, FAQs, UniProtKB manual, documents, news archive and Biocuration projects.</p>
</li>
</ul>
</li>
<li>
<ul>
<li class="fixedHeight_namespaces">
<h3 class="namespace_uniref"><a class="namespace-option uniref" href="https://stable.visual-framework.dev/patterns/integration/#" id="uniref">UniRef</a></h3>
<p>Sequence clusters</p>
</li>
<li class="fixedHeight_namespaces">
<h3 class="namespace_proteomes"><a class="namespace-option proteomes" href="https://stable.visual-framework.dev/patterns/integration/#" id="proteomes">Proteomes</a></h3>
<p>Protein sets from fully sequenced genomes</p>
</li>
<li class="fixedHeight_namespaces">
<h3 class="namespace_unirule">Annotation systems</h3>
<p class="supportingLeadingText">Systems used to automatically annotate proteins with high accuracy:
</p>
<ul class="supportingDataOptions">
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="unirule">UniRule (Expertly curated
rules)</a></li>
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="saas">SAAS (System generated rules)</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li class="fixedHeight_namespaces">
<h3 class="supporting"><span>Supporting data</span></h3>
<p class="supportingLeadingText">Select one of the options below to target your search:</p>
<ul class="supportingDataOptions">
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="citations">Literature citations</a></li>
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="taxonomy">Taxonomy</a></li>
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="keywords">Keywords</a></li>
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="locations">Subcellular locations</a></li>
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="database">Cross-referenced databases</a>
</li>
<li><a class="namespace-option supporting" href="https://stable.visual-framework.dev/patterns/integration/#" id="diseases">Human diseases</a></li>
</ul>
</li>
</ul>
</li>
</ul><input value="" id="topQuery" type="hidden" />
<div id="queryContainer"><input autocomplete="off" autofocus="autofocus" id="query" value="" accesskey="4" name="query" type="search" /></div><a class="caret_grey" href="https://stable.visual-framework.dev/patterns/integration/#" id="advanced-search-toggle">Advanced</a><input value="score" name="sort" type="hidden" /><a id="search-button" title="Search" data-icon="1" class="icon icon-functional button">Search</a>
<div style="display:none" class="advSearch" id="query-builder-container"><a href="https://stable.visual-framework.dev/patterns/integration/#" class="closeBox" id="closeAdvanceSearch">x</a>
<div id="advanced-search"></div>
</div>
</div>
</form>
</div>
<div id="nav">
<ul id="local-nav">
<li class="mobileHomeLink"><a href="https://www.uniprot.org/">Home</a></li>
<li class="first"><a class="tooltipped" title="Find regions of local similarity between sequences" href="https://www.uniprot.org/blast" id="top-blast-link">BLAST</a></li>
<li><a class="tooltipped" title="Align two or more protein sequences with the Clustal Omega program" href="https://www.uniprot.org/align" accesskey="9" id="top-align-link">Align</a></li>
<li class="last"><a class="tooltipped" title="Submit a list of identifiers to retrieve the corresponding UniProt entries, or to map them from or to an external database" rel="help" href="https://www.uniprot.org/uploadlists" id="upload-lists-nav">Retrieve/ID mapping</a></li>
<li class="last"><a class="tooltipped" title="Submit a list of peptides to find UniProt sequences containing them" rel="help" href="https://www.uniprot.org/peptidesearch" id="peptidesearch-lists-nav">Peptide search</a></li>
<li class="functional last"><a accesskey="9" href="https://www.uniprot.org/contact" id="contact">Contact</a>
</li>
<li class="functional"><a rel="help" href="https://www.uniprot.org/help/" id="help">Help</a></li>
</ul>
</div>
</div>
</div>
<div class="warn" id="browserwarning">You are using a version of browser that may not display all the features of this
website. Please consider upgrading <a href="https://www.uniprot.org/help/browser_support">your browser</a>.</div>
<main class="homepage" property="schema:mainEntity" resource="" typeof="" id="content">
<section id="page-header">
<div id="top-right-actions">
<div style="display:none" id="basket"><a href="https://stable.visual-framework.dev/patterns/integration/#" data-icon="b" class="closed basket-empty icon icon-static caret_white button" id="basket-list">Basket <span style="display:none" id="basket-count">0</span></a></div>
<div style="z-index: 3;display:none" id="basket-contents">
<div id="closeBasket"><span class="basketText">(max 400 entries)</span><a class="closeBox" href="https://stable.visual-framework.dev/patterns/integration/#">x</a>
</div>
<div id="emptyBasketContent">
<h3><span class="context-help tooltipped-click">
Your basket is currently empty. <sup> i</sup><span style="display:none"><span class="toolTipContent">
<p>When browsing through different UniProt proteins, you can use the ‘basket’ to save them, so
that you can back to find or analyse them later.<p><a href='/help/basket'
target='_top'>More...</a></p></span></span></span></h3>
<p>Select item(s) and click on "Add to basket" to create your own collection here<br /> (400 entries
max)<br /></p>
<div id="emptyBasketContentHelp"></div>
</div>
<div style="display:none" id="loadingBasketContent"></div>
<div id="filledBasketContents">
<ul id="basketTabs" class="tabs">
<li><a id="uniprotBasketTab" class="uniprot tab basketTab">UniProtKB (<span class="uniprot-basket-count">0</span>)</a></li>
<li><a id="unirefBasketTab" class="uniref tab basketTab">UniRef (<span class="uniref-basket-count">0</span>)</a></li>
<li><a id="uniparcBasketTab" class="uniparc tab basketTab">UniParc (<span class="uniparc-basket-count">0</span>)</a></li>
</ul>
<div class="tabsContent" style="display: none" id="basket-uniprot"></div>
<div class="tabsContent" style="display: none" id="basket-uniref"></div>
<div class="tabsContent" style="display: none" id="basket-uniparc"></div>
</div>
<div id="basket-actions">
<ul class="action-buttons-grouped">
<li><a title="Select two or more entries and click here to align them" data-icon="i" class="button icon icon-functional align disabled" href="https://stable.visual-framework.dev/patterns/integration/#" id="basket-align-button">Align</a></li>
<li><a data-icon="t" title="Select an entry and click here to run a BLAST search on it" class="button icon-functional icon blast disabled" href="https://stable.visual-framework.dev/patterns/integration/#" id="basket-blast-button">BLAST</a></li>
<li><a title="Map ids to other databases" class="button icon-functional disabled" id="basket-map-button">Map Ids</a></li>
<li><a data-icon="=" title="Download results" class="button icon icon-functional download disabled" href="https://stable.visual-framework.dev/patterns/integration/#" id="basket-download-button">Download</a></li>
<li style="float: right;"><a title="Full View" class="button fullView disabled" id="basket-view-button">Full View</a></li>
<li style="float: right;"><a title="Remove Selected entries" class="button remove disabled" id="basket-remove-button">Remove</a></li>
<li style="float: right"><a title="Clear basket" class="button clear disabled" id="basket-clear-button">Clear</a></li>
</ul>
</div>
</div>
<form action="https://stable.visual-framework.dev/align/" method="post" id="basket-alignForm"><input value="no" name="landingPage" type="hidden" /><input value="clustalo" name="program" type="hidden" /><input value="yes" name="redirect" type="hidden" /><input value="" name="alignQuery" id="basket-alignQuery" type="hidden" /></form>
<form action="https://stable.visual-framework.dev/blast/" method="post" id="basket-blastForm"><input value="yes" name="redirect" type="hidden" /><input value="no" name="landingPage" type="hidden" /><input value="uniprotkb" name="dataset" type="hidden" /><input value="10" name="threshold" type="hidden" /><input value="" name="matrix" type="hidden" /><input value="false" name="filter" type="hidden" /><input value="true" name="gapped" type="hidden" /><input value="250" name="numal" type="hidden" /><input value="" id="basket-blastQuery" name="blastQuery" type="hidden" /></form>
<form action="https://stable.visual-framework.dev/patterns/integration/" method="post" id="basket-downloadForm"><input value="" name="query" type="hidden" /></form>
</div>
</section>
<div id="mission-statement">
The mission of <a href="https://www.uniprot.org/help/about">UniProt</a> is to provide
the scientific community with a comprehensive, high-quality and
freely accessible resource of protein sequence and functional
information.
</div>
<nav id="browse-nav-container"><a id="uniprot-browse">
<div class="uniprot-browse-box">
<h3>UniProtKB</h3>
<div class="uniprot-browse-shortdesc">UniProt Knowledgebase</div>
</div>
<div id="inner-browse-container">
<div style="z-index:10" class="uniprot-browse-box-inner" id="swissprot-browse">
<h5>Swiss-Prot (559,077)</h5><span data-icon="s" class="icon-uniprot reviewed-icon">Manually annotated and
reviewed.</span>
<div class="browse-description">Records with information extracted from literature and curator-evaluated
computational analysis.</div>
</div>
<div style="z-index:10" class="uniprot-browse-box-inner" id="trembl-browse">
<h5>TrEMBL (139,694,261)</h5><span data-icon="t" class="icon-uniprot unreviewed-icon">Automatically
annotated and not reviewed.</span>
<div class="browse-description">Records that await full manual annotation.</div>
</div>
</div>
</a><a href="https://www.uniprot.org/uniref" class="browse-box" id="uniref-browse">
<h3>UniRef</h3>
<div class="browse-shortdesc">Sequence clusters</div>
<div class="browse-icon body-icon-conceptual">y</div>
<div class="browse-description">The UniProt Reference Clusters (UniRef) provide clustered sets of sequences from
the UniProt Knowledgebase (including isoforms) and selected UniParc records.</div>
</a><a href="https://www.uniprot.org/uniparc" class="browse-box" id="uniparc-browse">
<h3>UniParc</h3>
<div class="browse-shortdesc">Sequence archive</div>
<div class="browse-icon body-icon-generic">D</div>
<div class="browse-description">UniParc is a comprehensive and non-redundant database that contains most of the
publicly available protein sequences in the world.</div>
</a><a href="https://www.uniprot.org/proteomes" class="browse-box" id="proteomes-browse">
<h3>Proteomes</h3>
<div class="browse-icon body-icon-species">FHL</div>
<div class="browse-description">A proteome is the set of proteins thought to be expressed by an organism.
UniProt provides proteomes for species with completely sequenced genomes.</div>
</a>
<div class="" id="supporting-data-browse">
<h3>Supporting data</h3>
</div>
<div id="supporting-data"><a href="https://www.uniprot.org/citations" class="supporting-browse-box">
Literature citations
<div class="browse-icon body-icon-conceptual">l</div></a><a href="https://www.uniprot.org/taxonomy" class="supporting-browse-box">
Taxonomy
<div class="browse-icon body-icon-functional">h</div></a><a href="https://www.uniprot.org/locations" class="supporting-browse-box">
Subcellular locations
<div class="browse-icon body-icon-uniprot">c</div></a><a href="https://www.uniprot.org/database" class="supporting-browse-box">
Cross-ref. databases
<div class="browse-icon body-icon-uniprot">x</div></a><a href="https://www.uniprot.org/diseases" class="supporting-browse-box">
Diseases
<div class="browse-icon body-icon-conceptual">d</div></a><a href="https://www.uniprot.org/keywords" class="supporting-browse-box">
Keywords
<div class="browse-icon body-icon-functional">0</div></a></div>
</nav>
<section class="shortcuts transparent" id="news-container">
<div id="news">
<h3 class="pane-title"><a href="https://www.uniprot.org/news/?sort=created" class="newsTitle">News</a><a class="icon-right socialmedia lastshortcut icon_rss" title="News Feed" target="_blank" href="https://www.uniprot.org/news/?format=rss&sort=created"><a class="icon-right socialmedia icon_facebook" title="Facebook Logo" target="_blank" href="https://www.facebook.com/uniprot.org"><a class="icon-right socialmedia icon_twitter" title="Twitter" target="_blank" href="https://twitter.com/uniprot"><a class="icon-right socialmedia icon_blog" title="Blog" target="_blank" href="https://insideuniprot.blogspot.com/"></a></a></a></a></h3>
<div id="newsection">
<ul>
<li>
<p><a href="https://www.uniprot.org/changes">Forthcoming changes</a><br />Planned changes for UniProt</p>
</li>
<li>
<p><a href="https://www.uniprot.org/news/2019/01/16/release">UniProt release 2019_01</a><br />
Engaging and disengaging: CRISPR rings | Cross-references to jPOST
</p>
</li>
<li>
<p><a href="https://www.uniprot.org/news/2018/12/05/release">UniProt release 2018_11</a><br />
Enhanced enzyme annotation in UniProtKB using Rhea – integrating biology and chemistry
</p>
</li>
<li>
<p><a href="https://www.uniprot.org/news/2018/11/07/release">UniProt release 2018_10</a><br />
You’re not coming in!
</p>
</li>
<li>
<p><a href="https://www.uniprot.org/news/2018/10/10/release">UniProt release 2018_09</a><br />
Tubulin code: a long sought-after player identified
</p>
</li>
</ul>
</div><br clear="all" /><a href="https://www.uniprot.org/news?sort=created" data-icon=";" class="icon icon-generic newsArchiveLink">News archive</a>
</div>
</section>
<section id="getting_started">
<h3>Getting started <span style="float:right;"><a target="_blank" href="https://www.youtube.com/user/uniprotvideos" title="Open our video channel on YouTube to see all our help videos"><img src="https://www.uniprot.org/images/youtube.png" /></a></span></h3>
<ul>
<li>
<p><a data-icon="1" class="icon icon-functional" id="textSearch" href="https://stable.visual-framework.dev/patterns/integration/">Text search</a><br />Our basic text search allows you to search all the resources available</p>
</li>
<li>
<p><a data-icon="t" class="icon icon-functional" href="https://www.uniprot.org/blast">BLAST</a><br />Find regions of similarity between your sequences</p>
</li>
<li>
<p><a data-icon="i" class="icon icon-functional" href="https://www.uniprot.org/align">Sequence alignments</a><br />Align two or more protein sequences using the Clustal Omega program</p>
</li>
<li>
<p><a data-icon="_" class="icon icon-functional" href="https://www.uniprot.org/uploadlists">Retrieve/ID mapping</a><br />Batch search with UniProt IDs or convert them to another type of database ID (or vice versa)</p>
</li>
<li>
<p><a data-icon="_" class="icon icon-functional" href="https://www.uniprot.org/peptidesearch">Peptide search</a><br />Find sequences that exactly match a query peptide sequence</p>
</li>
</ul>
</section>
<section id="latest_release">
<h3>UniProt data</h3>
<ul>
<li id="hp-download">
<p><a data-icon="=" class="icon icon-functional" href="https://www.uniprot.org/downloads">Download latest release</a><br />Get the UniProt data
</p>
</li>
<li>
<p><a data-icon="z" class="icon icon-functional" id="hp-statistics" href="https://www.uniprot.org/statistics/?sort=published">Statistics</a><br />View Swiss-Prot and TrEMBL statistics
</p>
</li>
<li>
<p><a data-icon="4" class="icon icon-functional" id="hp-changes" href="https://www.uniprot.org/help/publications">How to cite us</a><br />The UniProt Consortium
</p>
</li>
<li>
<p><a data-icon="D" class="icon icon-functional" href="https://www.uniprot.org/help/submissions">Submit your data</a><br />Submit your sequences and annotation updates
</p>
</li>
<li>
<p><a data-icon="D" class="icon icon-static" href="https://www.uniprot.org/help/programmatic_access">Programmatic access</a><br />Query UniProt data using APIs providing REST, SPARQL and Java services
</p>
</li>
</ul>
</section>
<section id="spotlight">
<!-- BEGIN: VF 2.0 sample -->
<div class="vf-tabs">
<ul class="vf-tabs__list" data-vf-js-tabs=""><li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/integration/#vf-tabs__section--1">VF 2.0 tabs</a>
</li><li class="vf-tabs__item">
<a class="vf-tabs__link" href="https://stable.visual-framework.dev/patterns/integration/#vf-tabs__section--2">Another tab</a>
</li></ul>
</div>
<div class="vf-tabs-content" data-vf-js-tabs-content="">
<section class="vf-tabs__section" id="vf-tabs__section--1">
<p>Here we show how we can add a VF2.0 component without breaking the parent site's CSS cascade or JS.</p>
</section>
<section class="vf-tabs__section" id="vf-tabs__section--2">
<h2>Section 2</h2> <p>Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.</p>
</section>
</div>
<!-- END: VF 2.0 sample -->
</section>
</main>
<footer id="page-footer">
<section>
<h5>Tools</h5>
<ul>
<li><a href="https://www.uniprot.org/blast">BLAST</a></li>
<li><a href="https://www.uniprot.org/align">Align</a></li>
<li><a href="https://www.uniprot.org/uploadlists">Retrieve/ID mapping</a></li>
<li><a href="https://www.uniprot.org/peptidesearch">Peptide search</a></li>
</ul>
</section>
<section>
<h5>Core data</h5>
<ul>
<li><a href="https://www.uniprot.org/uniprot">Protein knowledgebase (UniProtKB)</a></li>
<li><a href="https://www.uniprot.org/uniref">Sequence clusters (UniRef)</a></li>
<li><a href="https://www.uniprot.org/uniparc">Sequence archive (UniParc)</a></li>
<li><a href="https://www.uniprot.org/proteomes">Proteomes</a></li>
</ul>
</section>
<section>
<h5>Supporting data</h5>
<ul>
<li><a href="https://www.uniprot.org/citations">Literature citations</a></li>
<li><a href="https://www.uniprot.org/taxonomy">Taxonomy</a></li>
<li><a href="https://www.uniprot.org/keywords">Keywords</a></li>
<li><a href="https://www.uniprot.org/locations">Subcellular locations</a></li>
<li><a href="https://www.uniprot.org/database">Cross-referenced databases</a></li>
<li><a href="https://www.uniprot.org/diseases">Diseases</a></li>
</ul>
</section>
<section>
<h5>Information</h5>
<ul>
<li><a href="https://www.uniprot.org/help/about">About UniProt</a></li>
<li><a href="https://www.uniprot.org/help">Help</a></li>
<li><a href="https://www.uniprot.org/help/?fil=section:faq">FAQ</a></li>
<li><a href="https://www.uniprot.org/help/?fil=section:manual">UniProtKB manual</a></li>
<li><a href="https://www.uniprot.org/help/technical">Technical corner</a></li>
<li><a href="https://www.uniprot.org/help/?query=*&fil=section:biocuration">Expert biocuration</a></li>
</ul>
</section>
<section class="small">
<div class="uniprotlogo"><img src="https://www.uniprot.org/images/logos/uniprot-rgb-optimized.svg" /></div>
<span>© 2002 –
<span property="schema:copyrightYear">2019</span>
<a accesskey="9" href="https://www.uniprot.org/help/about">UniProt Consortium</a> | <a href="https://www.uniprot.org/help/license">License & Disclaimer</a> | <a href="https://www.uniprot.org/help/privacy">Privacy Notice</a></span>
<div resource="/help/about#UniProt" id="logos" typeof="schema:NGO" property="schema:creator"><span resource="/help/about#EBI" typeof="schema:Organization" property="schema:member"><span class="hidden" property="schema:name">European Bioinformatics Institute</span><a href="https://www.ebi.ac.uk/" class="ebi" property="schema:url"></a></span><span resource="/help/about#PIR" typeof="schema:Organization" property="schema:member"><span class="hidden" property="schema:name">Protein Information Resource</span><a href="http://pir.georgetown.edu/" class="pir" property="schema:url"></a></span><span resource="/help/about#SIB" typeof="schema:Organization" property="schema:member"><span class="hidden" property="schema:name">SIB Swiss Institute of Bioinformatics</span><a href="https://www.sib.swiss/" class="sib" property="schema:url"></a></span></div>
</section>
</footer>
<div id="elixir-ribbon"><a href="https://www.elixir-europe.org/platforms/data/core-data-resources"><img height="64px" width="64px" id="elixer-cdr-logo" src="https://www.uniprot.org/images/elixir-cdr.gif" /> <h5><span class="elixir-banner-name">UniProt is an ELIXIR core data resource</span></h5></a></div>
<script src="https://www.uniprot.org/scripts/tippy.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
uniprot.isInternal = false;
var _scripts = ["common-bundle.js"];
if ("ie" === directory) {
_scripts.push("node-bundle.js");
}
uniprot.appendFn(_scripts);
})();
uniprot.appendFn(["home-bundle.js"]);
</script>
<!-- BEGIN: VF 2.0 sample -->
<!-- Data protection banner -->
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=581&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
<!-- Big note to show to visitors that this uses VF 2.0 -->
<div class="vf-banner vf-banner--fixed vf-banner--top vf-banner--phase" data-vf-js-banner="" data-vf-js-banner-state="dismissible" data-vf-js-banner-button-text="Close" data-vf-js-banner-button-theme="primary">
<div class="vf-banner__content" data-vf-js-banner-text="">
<p class="vf-banner__text">Here we show how we can add VF2.0 components without breaking the parent site's CSS cascade or JS. Note also the VF 2.0 tabs in the bottom right.</p>
</div>
</div>
<!-- VF 2.0 CSS, JS -->
<script src="https://dev.assets.emblstatic.net/vf/v2.0.0-alpha.5/scripts/scripts.js"></script>
<link rel="stylesheet" media="all" href="https://assets.emblstatic.net/vf/v2.2.0/css/styles.css" />
<!-- END: VF 2.0 sample -->
</body>
</html>
Content page (with the EMBL-EBI header, footer)
2018-08-22T12:24:50Z
https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/
<!DOCTYPE html>
<html lang="en" class="vf-no-js | vf-smooth-scroll">
<head>
<!-- See the VF No JS docs: https://stable.visual-framework.dev/components/vf-no-js/ -->
<script>
// Detect if JS is on and swap vf-no-js for vf-js on the html element
(function(H){H.className=H.className.replace(/\bvf-no-js\b/,'vf-js')})(document.documentElement);
</script>
<title>Content page (with the EMBL-EBI header, footer) | The Visual Framework</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<!-- See the VF Favicon docs: https://stable.visual-framework.dev/components/vf-favicon/ -->
<link rel="shortcut icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/favicon-16x16.png" />
<link rel="manifest" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/site.webmanifest" />
<link rel="mask-icon" href="https://assets.emblstatic.net/vf/v2.5.0/assets/embl-favicon/assets/safari-pinned-tab.svg" color="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<!-- See the embl-content-meta-properties docs: https://stable.visual-framework.dev/components/embl-content-meta-properties/ -->
<!-- Content descriptors -->
<meta name="embl:who" content="Group Jane" /> <!-- the people, groups and teams involved -->
<meta name="embl:where" content="EMBL-EBI" /> <!-- at which EMBL sites the content applies -->
<meta name="embl:what" content="research" /> <!-- the activities covered -->
<meta name="embl:active" content="what" /> <!-- which of the who/what/where is active -->
<!-- Content role -->
<meta name="embl:utility" content="-8" /> <!-- if content is task and work based or if is meant to inspire -->
<meta name="embl:reach" content="-5" /> <!-- if content is externally (public) or internally focused (those that work at EMBL) -->
<!-- Page infromation -->
<meta name="embl:maintainer" content="Strategy and Communications" /> <!-- the contact person or group responsible for the page -->
<meta name="embl:last-review" content="NaN" /> <!-- the last time the page was reviewed or updated -->
<meta name="embl:review-cycle" content="" /> <!-- how long in days before the page should be checked -->
<meta name="embl:expiry" content="2019-06-20" /> <!-- if there is a fixed point in time when the page is no longer relevant -->
<link rel="stylesheet" media="all" href="https://stable.visual-framework.dev/css/styles.css" />
<!--
Want to build a site with the Visual Framework?
---
You can copy the CSS and JS you find here, but for the best experience see the building guide:
https://stable.visual-framework.dev/building/
-->
</head>
<body class="vf-body vf-stack">
<!-- See the EBI Header Footer docs: https://stable.visual-framework.dev/components/ebi-header-footer -->
<!-- Tell the VF 1.4 not to display a data protection banner. -->
<!-- You should use the 2.0 data protection banner from the contentHub. -->
<span data-protection-message-disable="true"></span>
<!-- embl-ebi global header -->
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed"></header>
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=6682&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" type="text/css" media="all" />
<script defer="defer" src="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>
<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />
<!-- See the VF Breadcrumbs docs: https://stable.visual-framework.dev/components/embl-breadcrumbs-lookup/ -->
<nav class="vf-breadcrumbs" aria-label="Breadcrumb">
<ul class="vf-breadcrumbs__list | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/components" class="vf-breadcrumbs__link">Components and patterns</a>
</li>
<li class="vf-breadcrumbs__item" aria-current="location">
Content page (with the EMBL-EBI header, footer)
</li>
</ul>
<span class="vf-breadcrumbs__heading">Related:</span>
<ul class="vf-breadcrumbs__list vf-breadcrumbs__list--related | vf-list vf-list--inline">
<li class="vf-breadcrumbs__item">
<a href="https://stable.visual-framework.dev/building" class="vf-breadcrumbs__link">Building a site</a>
</li>
</ul>
</nav>
<!-- See the VF Navigation docs: https://stable.visual-framework.dev/components/vf-navigation/ -->
<nav class="vf-navigation vf-navigation--main | vf-cluster">
<ul class="vf-navigation__list | vf-list | vf-cluster__inner">
<li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link" aria-current="page">Home</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Download</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Release Notes</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">FAQ</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Help</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Licence</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">About</a>
</li> <li class="vf-navigation__item">
<a href="javascript:Void(0);" class="vf-navigation__link">Feedback</a>
</li> </ul>
</nav>
<!-- See the VF Intro docs: https://stable.visual-framework.dev/components/vf-intro/ -->
<section class="vf-intro">
<div><!-- empty --></div>
<div class="vf-stack">
<h1 class="vf-intro__heading ">Sample content page</h1>
<h2 class="vf-intro__subheading">Content-focused pages with the EMBL-EBI header and footer.</h2>
<p class="vf-lede">At EMBL-EBI we have a diverse, multidisciplinary team of over 850 people from 78 countries.</p>
</div>
</section>
<!-- Navigation -->
<section class="embl-grid">
<h3 class="vf-links__heading">On this page</h3>
<div class="vf-links vf-links__list--easy">
<ul class="vf-links__list | vf-list">
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/#application">
Application
<svg class="vf-icon vf-icon__arrown--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/#interviews">
Interviews
<svg class="vf-icon vf-icon__arrown--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/#onboarding">
Onboarding
<svg class="vf-icon vf-icon__arrown--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
<li class="vf-list__item">
<a class="vf-list__link" href="https://stable.visual-framework.dev/patterns/boilerplate-generic-embl-ebi/#remote">
Remote working
<svg class="vf-icon vf-icon__arrown--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"></path></svg>
</a>
</li>
</ul>
</div>
</section>
<div class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header">
<h2 class="vf-section-header__heading">
In a nutshell
</h2>
</div>
<div>
<div class="vf-embed vf-embed--custom-ratio" style="--vf-embed-max-width: 100%;
--vf-embed-custom-ratio-x: 640;
--vf-embed-custom-ratio-y: 360;"><iframe src="https://www.youtube.com/embed/cABhbUHsKIk" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="640" height="360" frameborder="0"></iframe></div>
</div>
<div class="vf-content">
<p>We value your skills, wherever you may come from and we offer a generous benefits package to support you.</p>
</div>
</div>
<!-- Application -->
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header">
<h3 class="vf-section-header__heading" id="application">Application</h3>
</div>
<div class="vf-content">
<p class="vf-intro__text">We are delighted that you are keen to join us. Our application process remains the same:</p>
<ol>
<li>Find the role you want to apply for on our <a href="https://stable.visual-framework.dev/about/jobs" class="vf-link">Jobs page</a>.</li>
<li>Upload your CV and cover letter.</li>
<li>A qualified panel will assess your application.</li>
<li>We will contact you with the outcome within 2-4 weeks after the vacancy has closed.</li>
</ol>
</div>
</section>
<!-- Interviews -->
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header">
<h3 class="vf-section-header__heading" id="interviews">Interviews</h3>
</div>
<div class="vf-content">
<p class="vf-intro__text">
During this time, we will only be conducting online job interviews. As part of the process, you will speak to your potential Group or Team leader and you will also have the chance to have an informal catch up with your prospective colleagues for a personal insight into what it's like to work in our incredible teams.
</p>
</div>
</section>
<!-- Onboarding -->
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header">
<h3 class="vf-section-header__heading" id="onboarding">Onboarding</h3>
</div>
<div class="vf-content">
<p class="vf-intro__text">
Over the past year, we have successfully onboarded many new employees into the EMBL-EBI family. All our new starters are set up with the resources, hardware and digital capability to work from home – wherever this may be!
</p>
<p class="vf-intro__text">
If you are currently located overseas, you have the option of starting employment in your home country until restrictions ease. We make every effort to accommodate individual circumstances and your Recruitment Officer will be able to guide you through the process every step of the way.
</p>
</div>
<figure class="vf-figure ">
<img class="vf-figure__image" src="https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/ebi-working-from-home.png?force_format=jpg" alt="Recruitment and work continues from home" />
<figcaption class="vf-figure__caption">Recruitment and work continues from home. Photo: EMBL-EBI</figcaption>
</figure>
</section>
<!-- Remote working & our social side -->
<section class="embl-grid embl-grid--has-centered-content">
<div class="vf-section-header">
<h3 class="vf-section-header__heading" id="remote">Remote working & our social side</h3>
</div>
<div class="vf-content">
<p class="vf-intro__text">
In order to stay connected and help you feel part of our vibrant team, we offer access to a multitude of activities while working remotely. Some of our most popular sessions have included a virtual MasterChef, fitness classes, boardgames and of course, regular Town Halls with our Directors.
</p>
<p class="vf-intro__text">
If you have any questions, please email the Recruitment team on <a href="mailto:recruitment@ebi.ac.uk" class="vf-link">recruitment@ebi.ac.uk</a>
</p>
<br />
<p><a href="https://stable.visual-framework.dev/about/jobs/" class="vf-button vf-button--primary vf-button--sm">View current openings at EMBL-EBI</a></p>
</div>
</section>
<!-- https://stable.visual-framework.dev/components/vf-banner-elixir/ -->
<section class="vf-u-fullbleed | vf-u-background-color-ui--grey--light">
<div class="vf-banner-elixir vf-banner" data-vf-js-banner-elixir="" data-vf-js-banner-elixir-logo="" data-vf-js-banner-elixir-name="Service Name" data-vf-js-banner-elixir-description="A short description about this service's role and function" data-vf-js-banner-elixir-link="default">
<div class="vf-banner__content">
<p class="vf-banner__text">default</p>
<p class="vf-banner__text">Service Name</p>
<p class="vf-banner__text">A short description about this service's role and function</p>
<p class="vf-banner__text">default</p>
</div>
</div>
</section>
<!-- See the EMBL Grid docs: https://stable.visual-framework.dev/components/embl-grid/ -->
<section class="embl-grid embl-grid--has-centered-content">
<div>
<!-- See the VF Section header docs: https://stable.visual-framework.dev/components/vf-section-header/ -->
<!-- you can include section headers too -->
<div class="vf-section-header"><h2 class="vf-section-header__heading" id="source"> Source code</h2><p class="vf-section-header__text"></p></div>
</div>
<!-- See the VF Content docs: https://stable.visual-framework.dev/components/vf-content/ -->
<div class="vf-content">
<p>You can see <a href="https://github.com/visual-framework/vf-core/blob/develop/tools/vf-component-library/src/site/patterns/boilerplate-generic-embl-ebi.njk" class="vf-link">the Nunjucks template for this page</a>. This is particularly helpful if you're building a page with Nunjucks or <a href="https://github.com/visual-framework/vf-eleventy">vf-eleventy</a>.</p>
</div>
</section>
<!-- embl-ebi global footer -->
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=106902&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader="" />
<!--
When using legacy EBI 1.x JS, we disable the old cookie banner.
https://stable.visual-framework.dev/components/ebi-header-footer/
-->
<div class="vf-u-display-none" data-protection-message-disable="true"></div>
<!-- IE11 polyfill JS -->
<script nomodule="" crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default"></script>
<!-- This page was generated on 2023-10-09T17:54:36.140+00:00 -->
<script src="https://assets.emblstatic.net/vf/v2.5.14/scripts/scripts.js"></script><!-- Global site tag (gtag.js) - Google Analytics -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-N5ZLH2KNJP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-N5ZLH2KNJP');
</script>
</body>
</html>