<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://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>

<div class="ebi-vf1-integration">

  <h3>With .ebi-vf1-integration</h3>

  <p>With <code class="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>
    <button class="vf-button vf-button--link">a link variant</button>
  </div>

  <div><a href="https://example.com">A link</a></div>

  <input type="search" class="vf-form__input | vf-search__input" value="" name="s">

</div>

<br /><br />

<hr class="vf-divider" />

<div class="">

  <h3>With<em>out</em> .ebi-vf1-integration</h3>

  <p>With<em>out</em> <code class="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>
    <button class="vf-button vf-button--link">a link variant</button>
  </div>
  (click the link to see the visited state)

  <div><a href="https://example.com">A link</a></div>

  <input type="search" class="vf-form__input | vf-search__input" value="" name="s">

</div>