Masthead github location npm version

The vf-masthead (masthead) is a full-width container that can take a text, theme colour, an image, and create a 'block' for the text to lay atop.

Variants


Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ]
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ]
} %}
                
HTML
<div class="vf-masthead | vf-u-fullbleed">
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadTheme": "primary"
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadTheme": "primary"
} %}
                
HTML
<div class="vf-masthead vf-masthead-theme--primary | vf-u-fullbleed">
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadTheme": "secondary"
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadTheme": "secondary"
} %}
                
HTML
<div class="vf-masthead vf-masthead-theme--secondary | vf-u-fullbleed">
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadTheme": "tertiary"
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadTheme": "tertiary"
} %}
                
HTML
<div class="vf-masthead vf-masthead-theme--tertiary | vf-u-fullbleed">
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "hasTitleBlock": true
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "hasTitleBlock": true
} %}
                
HTML
<div class="vf-masthead vf-masthead--with-title-block | vf-u-fullbleed">
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "hasTitleBlock": true,
  "mastheadTheme": "primary"
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "hasTitleBlock": true,
  "mastheadTheme": "primary"
} %}
                
HTML
<div class="vf-masthead vf-masthead-theme--primary vf-masthead--with-title-block | vf-u-fullbleed">
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadImage": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg"
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadImage": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg"
} %}
                
HTML
<div class="vf-masthead vf-masthead--has-image | vf-u-fullbleed" style=" --vf-masthead__bg-image: url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg); background-image: var(--vf-masthead__bg-image)" data-vf-js-masthead>
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Strategy & CommunicationsChromosome structure and dynamics

VF HamburgStructural Biology

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 (exampe), 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",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadImage": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg",
  "hasTitleBlock": true
}
 %}
{% include "../path_to/vf-masthead/vf-masthead.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-masthead', {
  "component-type": "block",
  "masthead_href": "JavaScript:Void(0);",
  "masthead_heading": "Strategy & Communications",
  "masthead_heading_additional": "Chromosome structure and dynamics",
  "masthead_subheading": [
    {
      "masthead_subheading_text": "<a href=\"JavaScript:Void(0);\">VF Hamburg</a>"
    },
    {
      "masthead_subheading_text": "Structural Biology"
    }
  ],
  "mastheadImage": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg",
  "hasTitleBlock": true
} %}
                
HTML
<div class="vf-masthead vf-masthead--with-title-block vf-masthead--has-image | vf-u-fullbleed" style=" --vf-masthead__bg-image: url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/VF_Masthead_Example_52ACEA.jpg); background-image: var(--vf-masthead__bg-image)" data-vf-js-masthead>
  <div class="vf-masthead__title">
    <h1 class="vf-masthead__heading"><a href="JavaScript:Void(0);" class="vf-masthead__heading__link">Strategy & Communications</a><span class="vf-masthead__heading--additional">Chromosome structure and dynamics</span></h1>
    <h2 class="vf-masthead__subheading"><span class="vf-masthead__subheading__text"><a href="JavaScript:Void(0);">VF Hamburg</a></span><span class="vf-masthead__subheading__text">Structural Biology</span></h2>
  </div>
</div>
              

Usage

The vf-masthead component can be used on the home page of group sites to help inform the visitor of the groups name, location, and additional information.

✅ Do's 🚫 Do Not's
Use this on the homepage of group sites On every subsquent page
Use the title block with a theme colour Use a title block, theme colour, and image

Background Colours

By Default, the vf-masthead is black text on a light grey background except if it is the title block variant where the text will be white on a black background with an overall light grey background.

This can be effected by either having a component specific class that effects the colours.

Theme Variants available are:

There is also a variant that allows for a background image - vf-masthead--has-image as well as a variant that allows for the text to be in a block of white (with the text being black) - vf-masthead--with-title-block.

notes:

If you are overriding the background or foreground (text) colour make sure you are:


Background Image Size

The maximum dimensions for a background image is 1224px wide with a height of 150px. As more and more displays are what we term 'retina' they need to be twice the width and height to look crisp.

Images that are used for mastheads need to have dimensions of 2448px by 300px.

Text Colour

When using a background image we have to determine the best text colour to meet the contrast ratio from our accessibility guidelines.

We do this using JavaScript and the background image filename.

In choosing the image for masthead the image filename needs to have it's most dominate colour added as a hexadecimal code.

masthead-background-image--00EF00.png

To find the dominant colour in the background image you can use a colour picker in graphics software to find the hex code.

This then allows the code to look for this hexidecimal colour code and mathematically works out the correct text colour to use. The CSS custom property --local-theme-fg-color is then applied in the style tag of the component.

<style>
<div
class="vf-masthead vf-masthead--has-image"
style="background-image: var(--vf-masthead__bg-image);
 --local-theme-fg-color:#FFFFFF;"
data-vf-js-masthead
>
</style>

If JavaScript is disabled, or if it doesn't load with the page. The masthead will default to the background colour.


Browser Support

CSS Custom Properties do not work in older versions of Internet Explorer. We provide a default look for the masthead for these browser which is a white foreground colour (for text) on a green background.

However, this can be overriden if needed using the Sass variables.

Installation info

This component is distributed with npm. After installing npm, you can install the vf-masthead with this command.

$ yarn add --dev @visual-framework/vf-masthead

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-masthead/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.0.23

  • small change to cards on homepage

1.0.18

  • dependency bump

1.0.17

  • dependency bump

1.0.16

  • dependency bump

1.0.13

  • dependency bump
  • adds roamap and consultation docs

1.0.12

  • design token documenation now lives in the component libary

1.0.7

  • adds updates blog

1.0.6

  • begin to make more pattern/boilerplate guidance
  • minor templating updates

1.0.5

  • dependency bump

1.0.4

  • uses vf-favicon
  • adds meta attributes

1.0.3

  • run vf-component-assets:everything on local dev
  • remove reference to removed /css/app.css

1.0.2

  • Add 404
  • Fix component CSS generation

1.0.1

  • Also generate per-component CSS with vf-css:generate-component-css

1.0.0

  • Initial release to be used with vf-core 2.2.0

Assets



File system location: components/vf-masthead

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