For use in labeling a section of content, often containers.
This component is distributed with npm. After installing npm, you can install the vf-section-header with this command.
$ yarn add --dev @visual-framework/vf-section-header
The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.
@import "@visual-framework/vf-section-header/index.scss";
Make sure you import Sass requirements along with the modules.
File system location: components/vf-section-header
{% render '@vf-section-header--default', {
"component-type": "block",
"section_title": "Projects"
} %}
<div class="vf-section-header">
<h2 class="vf-section-header__heading"> Projects </h2>
</div>
{% render '@vf-section-header--is-a-link', {
"component-type": "block",
"section_title": "Projects",
"href": "JavaScript:Void(0);"
} %}
<div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="JavaScript:Void(0);"> Projects <svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" 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>
{% render '@vf-section-header--has-a-sub-heading', {
"component-type": "block",
"section_title": "Projects",
"section__subheading": "News from EMBL’s six sites"
} %}
News from EMBL’s six sites
<div class="vf-section-header">
<h2 class="vf-section-header__heading"> Projects </h2>
<p class="vf-section-header__subheading">News from EMBL’s six sites</p>
</div>
{% render '@vf-section-header--has-a-sub-heading-and-link', {
"component-type": "block",
"section_title": "Projects",
"href": "JavaScript:Void(0);",
"section__subheading": "News from EMBL’s six sites"
} %}
News from EMBL’s six sites
<div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="JavaScript:Void(0);"> Projects <svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" 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>
<p class="vf-section-header__subheading">News from EMBL’s six sites</p>
</div>
{% render '@vf-section-header--has-a-sub-heading-and-link-and-text', {
"component-type": "block",
"section_title": "Projects",
"href": "JavaScript:Void(0);",
"section__subheading": "News from EMBL’s six sites",
"vf_section__content": [
"Hello everyone who are doing?",
"Pizza"
]
} %}
<div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="JavaScript:Void(0);"> Projects <svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" 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>
<p class="vf-section-header__subheading">News from EMBL’s six sites</p>
<p class="vf-section-header__text">Hello everyone who are doing?</p>
<p class="vf-section-header__text">Pizza</p>
</div>
{% render '@vf-section-header--has-a-link-and-text', {
"component-type": "block",
"section_title": "Projects",
"href": "JavaScript:Void(0);",
"vf_section__content": [
"Hello everyone who are doing?",
"Pizza"
]
} %}
<div class="vf-section-header"><a class="vf-section-header__heading vf-section-header__heading--is-link" href="JavaScript:Void(0);"> Projects <svg aria-hidden="true" class="vf-section-header__icon | vf-icon vf-icon-arrow--inline-end" 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>
<p class="vf-section-header__text">Hello everyone who are doing?</p>
<p class="vf-section-header__text">Pizza</p>
</div>
{% render '@vf-section-header--has-text', {
"component-type": "block",
"section_title": "Projects",
"vf_section__content": [
"Hello everyone who are doing?",
"Pizza"
]
} %}
Hello everyone who are doing?
Pizza
<div class="vf-section-header">
<h2 class="vf-section-header__heading"> Projects </h2>
<p class="vf-section-header__text">Hello everyone who are doing?</p>
<p class="vf-section-header__text">Pizza</p>
</div>
vf-componenet-rollup vf-core-components vf-local-overrides vf-sample This page is part of the components section.