Section Header block

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

github location npm version

Variants

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

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>
              

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>
              

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>
              

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>
              

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.