...
 
......@@ -194,7 +194,7 @@
/*!
* Component: @visual-framework/vf-intro
* Version: 1.1.0
* Version: 1.1.1
* Location: components/vf-intro
*/
.vf-intro {
......
......@@ -272,7 +272,7 @@ class="vf-logo | vf-logo--has-text">
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-intro__heading vf-intro__heading--has-tag"</span>&gt;</span>Cancer <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"JavaScript:Void(0);"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--primary vf-badge--phases"</span>&gt;</span>beta<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-lede"</span>&gt;</span>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.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-intro__text"</span>&gt;</span>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.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-intro__text"</span>&gt;</span>There are more than 100 types of cancer and symptoms vary depending on the type. <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"JavaScript:Void(0);"</span>&gt;</span>Read more about Cancer<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
......
......@@ -251,7 +251,7 @@ class="vf-logo | vf-logo--has-text">
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-intro__heading vf-intro__heading--has-tag"</span>&gt;</span>Cancer <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"JavaScript:Void(0);"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-badge vf-badge--primary vf-badge--phases"</span>&gt;</span>beta<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-lede"</span>&gt;</span>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.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-intro__text"</span>&gt;</span>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.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-intro__text"</span>&gt;</span>There are more than 100 types of cancer and symptoms vary depending on the type. <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"vf-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"JavaScript:Void(0);"</span>&gt;</span>Read more about Cancer<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
......@@ -299,6 +299,11 @@ class="vf-logo | vf-logo--has-text">
<pre class="vf-code-example__pre">
<code class="Code Code--lang-Markdown FileBrowser-code vf-code-example"><span class="hljs-section"># Change Log</span>
<span class="hljs-section">## 1.2.0</span>
<span class="hljs-bullet">
* </span>wraps all content except heading in if statement
<span class="hljs-bullet">* </span>changes how badges are implemented inside an if statement
<span class="hljs-section">## 1.1.0</span>
<span class="hljs-bullet">
* </span>adds if statement to pass context data through to component
......@@ -326,7 +331,7 @@ class="vf-logo | vf-logo--has-text">
Filesystem path: components/vf-intro/CHANGELOG.md
</li>
<li class="vf-list__item">
Size: 187 Bytes
Size: 309 Bytes
</li>
</ul>
</section>
......
......@@ -91,8 +91,11 @@ class="vf-logo | vf-logo--has-text">
<div><!-- empty --></div>
<div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p></div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></h1>
<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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
</div>
</section>
</div>
......
......@@ -31,8 +31,11 @@
<div><!-- empty --></div>
<div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p></div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></h1>
<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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
</div>
</section>
</div>
......
# Change Log
## 1.2.0
* wraps all content except heading in if statement
* changes how badges are implemented inside an if statement
## 1.1.0
* adds if statement to pass context data through to component
......
......@@ -91,8 +91,11 @@ class="vf-logo | vf-logo--has-text">
<div><!-- empty --></div>
<div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p></div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></h1>
<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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
</div>
</section>
</div>
......
......@@ -5,7 +5,10 @@
<div><!-- empty --></div>
<div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p></div>
<h1 class="vf-intro__heading vf-intro__heading--has-tag">Cancer <a href="JavaScript:Void(0);" class="vf-badge vf-badge--primary vf-badge--phases">beta</a></h1>
<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 class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.</p>
</div>
</section>
......@@ -350,7 +350,7 @@
/*!
* Component: @visual-framework/vf-intro
* Version: 1.1.0
* Version: 1.1.1
* Location: components/vf-intro
*/.vf-intro{margin:0 0 110px}.vf-intro>*{grid-column:2/span 1}.vf-intro .vf-lede{margin-bottom:2rem}.vf-body .vf-intro{box-sizing:initial;margin-left:unset;margin-right:unset;max-width:unset;padding-left:unset;padding-right:unset}.vf-intro{--vf-intro-spacing:200px;box-sizing:border-box;display:grid;grid-column:main;grid-template-rows:1fr repeat(10,-webkit-min-content);grid-template-rows:1fr repeat(10,min-content);margin-left:auto;margin-right:auto;max-width:78.5em;padding-left:1em;padding-right:1em}@media (min-width:1024px){.vf-intro{column-gap:var(--page-grid-gap);grid-template-areas:". a a" ". . b";grid-template-columns:var(--embl-grid-module--prime) auto var(--embl-grid-module--prime)}.vf-intro__heading{grid-area:a}.vf-intro .vf-links{grid-area:b;grid-row-end:-1}}.vf-intro__heading{font-family:IBM Plex Sans,Helvetica,Arial,sans-serif;font-size:42px;font-weight:700;line-height:1.547;margin:0 0 16px;margin:0 0 var(--vf-text-margin--bottom,16px);margin:0 0 56px}.vf-intro__heading--has-tag{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.vf-intro__heading--has-tag .vf-badge{margin-left:.5rem}@media (min-width:1024px){.vf-intro__heading--has-tag{left:-83px;position:relative}.vf-intro__heading--has-tag .vf-badge{margin-left:0;-ms-flex-order:-1;order:-1}}.vf-intro__text{font-family:IBM Plex Sans,Helvetica,Arial,sans-serif;font-size:19px;font-weight:400;line-height:1.421;margin:0 0 16px;margin:0 0 var(--vf-text-margin--bottom,16px);margin:0 0 24px}.vf-intro__text:last-of-type{margin-bottom:0}.vf-intro__text>a{text-decoration:none}.vf-intro__text>a,.vf-intro__text>a:visited{border-bottom:none;color:#3b6fb6}.vf-intro__text>a:visited:hover{color:#3b6fb6;text-decoration:underline}.vf-intro__text>a:hover{color:#193f90;border-bottom:none;text-decoration:underline}
......