<linkrel="stylesheet"href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/ebi-global.css"type="text/css"media="all" /><linkrel="stylesheet"href="https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/css/theme-embl-petrol.css"type="text/css"media="all" /><p>A demonstration of a few fixes. To make an entire page "VF 2.x-ish" add `class="ebi-vf1-integration"` to your body element.</p><divclass="ebi-vf1-integration"><h3>With .ebi-vf1-integration</h3><p>With <codeclass="vf-code-example">.ebi-vf1-integration</code></p><h1>h1</h1><h2>h2</h2><h3>h3</h3><div><strong>I'm bold</strong></div><div><ahref="JavaScript:Void(0);"class="vf-button vf-button--primary">a link variant</a></div><div><ahref="https://example.com">A link</a></div><inputtype="search"class="vf-form__input | vf-search__input"value=""name="s"></div><br /><br /><hrclass="vf-divider" /><divclass=""><h3>With<em>out</em> .ebi-vf1-integration</h3><p>With<em>out</em><codeclass="vf-code-example">.ebi-vf1-integration</code></p><h1>h1</h1><h2>h2</h2><h3>h3</h3><div><strong>I'm bold</strong></div><div><ahref="JavaScript:Void(0);"class="vf-button vf-button--primary">a link variant</a></div>
(click the link to see the visited state)
<div><ahref="https://example.com">A link</a></div><inputtype="search"class="vf-form__input | vf-search__input"value=""name="s"></div>
Usage
Enable its use by:
body class="ebi-vf1-integration", or
wrapping a section of html with the class .ebi-vf1-integration
Installation info
Option 1
Use the global VF 2.0 CSS along side your existing VF 1.x CSS; see: https://www.embl.org/guidelines/design/patterns/
Option 2
If you don't want to include all the VF 2.0 CSS, add only the compatibility CSS: