Section Header block

For use in labeling a section of content, often containers.

github location npm version

Variants

Default variant

Projects

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects"
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects"
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading"> Projects</h2>
 </div>

Is A Link variant

Projects

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects",
  "id": "section-link",
  "href": "JavaScript:Void(0);"
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects",
  "id": "section-link",
  "href": "JavaScript:Void(0);"
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="section-link"><a href="JavaScript:Void(0);">Projects</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>

Has A Sub Heading variant

Projects

News from EMBL’s six sites

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects",
  "id": "section-sub-heading",
  "section__subheading": "News from EMBL’s six sites"
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects",
  "id": "section-sub-heading",
  "section__subheading": "News from EMBL’s six sites"
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading" id="section-sub-heading"> Projects</h2>
   <p class="vf-section-header__subheading">News from EMBL’s six sites</p>
 </div>

Has A Sub Heading And Link variant

Projects

News from EMBL’s six sites

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects",
  "href": "JavaScript:Void(0);",
  "id": "section-sub-heading-link",
  "section__subheading": "News from EMBL’s six sites"
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects",
  "href": "JavaScript:Void(0);",
  "id": "section-sub-heading-link",
  "section__subheading": "News from EMBL’s six sites"
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="section-sub-heading-link"><a href="JavaScript:Void(0);">Projects</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__subheading">News from EMBL’s six sites</p>
 </div>

Has A Sub Heading And Link And Text variant

Projects

News from EMBL’s six sites

Hello everyone who are doing?

Buy Pizza.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects",
  "href": "JavaScript:Void(0);",
  "id": "section-sub-heading-link-text",
  "section__subheading": "News from EMBL’s six sites",
  "vf_section__content": [
    "Hello everyone who are doing?",
    "Buy <a href=\"#\">Pizza</a>."
  ]
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects",
  "href": "JavaScript:Void(0);",
  "id": "section-sub-heading-link-text",
  "section__subheading": "News from EMBL’s six sites",
  "vf_section__content": [
    "Hello everyone who are doing?",
    "Buy <a href=\"#\">Pizza</a>."
  ]
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="section-sub-heading-link-text"><a href="JavaScript:Void(0);">Projects</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__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">Buy <a href="#">Pizza</a>.</p>
 </div>

Has A Link And Text variant

Projects

Hello everyone who are doing?

Pizza

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects",
  "href": "JavaScript:Void(0);",
  "id": "section-link-text",
  "vf_section__content": [
    "Hello everyone who are doing?",
    "Pizza"
  ]
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects",
  "href": "JavaScript:Void(0);",
  "id": "section-link-text",
  "vf_section__content": [
    "Hello everyone who are doing?",
    "Pizza"
  ]
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading vf-section-header__heading--is-link" id="section-link-text"><a href="JavaScript:Void(0);">Projects</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">Hello everyone who are doing?</p>
   <p class="vf-section-header__text">Pizza</p>
 </div>

Has Text variant

Projects

Hello everyone who are doing?

Pizza

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "section_title": "Projects",
  "id": "section-text",
  "vf_section__content": [
    "Hello everyone who are doing?",
    "Pizza"
  ]
}
 %}
{% include "../path_to/vf-section-header/vf-section-header.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-section-header', {
  "component-type": "block",
  "section_title": "Projects",
  "id": "section-text",
  "vf_section__content": [
    "Hello everyone who are doing?",
    "Pizza"
  ]
} %}
HTML 
 <div class="vf-section-header">
   <h2 class="vf-section-header__heading" id="section-text"> Projects</h2>
   <p class="vf-section-header__text">Hello everyone who are doing?</p>
   <p class="vf-section-header__text">Pizza</p>
 </div>

Examples

Installation info

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

Sass/CSS

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. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.5.5

  • fix: Changed the hidden header code to show a header without a link. If not hidden then it'd show as usual.

1.5.4

  • feat: Added hidden field (optional) to address accessibility issues for H2 tags

1.5.3

  • Bug: following 1.5.2, ensures that links are always style correctly.

1.5.2

  • Accessibility: When section header is a link, it should still be wrapped an h2
  • https://github.com/visual-framework/vf-core/issues/1683
  • Whitespace control

1.5.1

  • Fixes the vertical centering of the svg arrow on vf-section-header. Also aligns better with the Figma design kit.
  • https://github.com/visual-framework/vf-core/pull/1562

1.5.0

  • makes if possible to use HTML in the section header text.

1.4.0

  • changes value of SVG to use ems so it scales with the typeface size.
  • makes the hover effect consistent with new vf-cards
  • makes the positioning match the baseline of the text

1.3.2

  • Removes an extra } in the Nunjucks template that was corrupting the html.
  • Better handle whitespace.
  • https://github.com/visual-framework/vf-core/pull/1317

1.3.1

  • Resolve issue of missing import in index.scss
  • https://github.com/visual-framework/vf-core/pull/1306

1.3.0

  • updates spacing design tokens
  • requires v2.0.0 of the vf-design-tokens package or newer

1.2.2

  • adds id for anchor support

1.2.1

  • makes the --is-link variant use CSS grid so the arrow SVG icon is always to the top, right of the text

1.2.0

  • Adds nunjucks if statement for adding context if component used as sub-component

1.1.1

  • SVG is a visual queue: adds aria-role="hidden" to the SVG in the component so screen readers don't announce it https://github.com/visual-framework/vf-core/pull/873

1.1.0

  • adds ability for section header to have sub-heading and text
  • :visited styles so they're blue
  • removes cursor: pointer and display: block from --is-link
  • moves transform out of todo
  • fixes transition-property to animation works
  • adds last-of-type to vf-section-header__text to remove any margin

1.0.3

  • Increase spacing between header link and arrow icon

1.0.1

  • Resolves bug in passing links to template

1.0.1

  • Adds support for headers as links

1.0.0

  • Initial stable release

Assets


File system location: components/vf-section-header

Find an issue on this page? Propose a change or discuss it.