alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Profile block

The vf-profile component is to be used to display a persons details in small, compact display. This can be used on pages that display several team members and it can be used on a group home page to show the group leader.

github location npm version

Usage

Content

The vf-profile allows for a variety of content related to a person.

content type variable description
image profile__image
alt text profile__image_alt
text profile__name
url profile__name_href
text profile__job_title
text profile__text
group profile__emails
text profile__email
group profile__phones
text profile__phone
text profile__uuid
url profile__uuid_href

All content is optional

Hiding Content Items

All content in this component can be set so that it is hidden (not generated in HTML) so that we can hide specific items of content depending on the overall context of the page.

The content types available to hide are:

  • image
  • title
  • job title
  • text
  • all emails
  • all phone numbers
  • ORCID

These content items follow the variable name, for example the title variable name is profile__title. To hide any of these items the variable is prefixed with hide_, for example hide_profile__emails.

To hide a content item you will need to use {% set %} in your .njk file above where you are including it, for example:

{% set hide_profile__emails == true %}
{% include vf-profile %}

Nunjucks and yml options

Nunjucks or YML variables available

variable options default
layout block or inline block
size small, medium, or large medium
theme primary or secondary
design variant very-easy or easy very-easy

Component Specific Variants

The vf-profile has two sets of component specific variants.

Layout Variants

There are two layout variants available for the component either block or inline. The layout for vf-profile defaults to block and using nunjucks we add the class vf-profile--block automatically. To change this to be inline you would need to add this line layout: inline to the .yml file.

Size Variants

There are three size variants available for the component that are small, medium, or large. We set medium as the default and using nunjucks we add the class vf-profile--medium automatically. To change this to either small, or large you would need to add size: small or size: large to the .yml file. If you want to be explicit you can define size: medium too.

Theme Variants

There are two theme variants available for the component that are primary, and secondary. To add a theme to the component you would need to add theme: primary or theme: secondary to the .yml file.

Design Variants

There are two design variants available for the component, either very-easy ot easy. To add a design variant for vf-profile defaults to vf-profile--very-easy and using nunjucks we add the class automatically. To change this to easy you would need to add this line variant: eady to the .yml file.

Variants

Block Small variant

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",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "size": "small",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
}
 %}
{% include "../path_to/vf-profile/vf-profile.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-profile', {
  "component-type": "block",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "size": "small",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
} %}
HTML 
<article class="vf-profile vf-profile--small vf-profile--block">
  <img class="vf-profile__image" src="https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_" alt="" loading="lazy">

  <h3 class="vf-profile__title">
    <a href="http://www.whitehouse.com" class="vf-profile__link">Annika Corinna Grandison</a>
  </h3>

  <p class="vf-profile__job-title">Engagement Team Lead</p>

  <p class="vf-profile__text">Communications</p>

  <p class="vf-profile__email">
    <a href="mailto:annika.grandison@embl.org" class="vf-profile__link vf-profile__link--secondary">annika.grandison@embl.org</a>
  </p>

  <p class="vf-profile__phone">
    <a href="tel:+49 6221 387-8443" class="vf-profile__link vf-profile__link--secondary">+49 6221 387-8443</a>
  </p>
  <p class="vf-profile__phone vf-profile__phone--mobile | vf-u-last-item ">
    <a href="tel:+49 175 899 1179" class="vf-profile__link vf-profile__link--secondary">+49 175 899 1179</a>
  </p>

  <p class="vf-profile__uuid">
    <span>ORCID:</span>
    <a class="vf-profile__link vf-profile__link--secondary" href="https://europepmc.org/authors/JavaScript:Void(0);">0000 - 1234 - 4326 - XX03</a>
  </p>

</article>

Block Regular variant

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",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
}
 %}
{% include "../path_to/vf-profile/vf-profile.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-profile', {
  "component-type": "block",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
} %}
HTML 
<article class="vf-profile vf-profile--medium vf-profile--block">
  <img class="vf-profile__image" src="https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_" alt="" loading="lazy">

  <h3 class="vf-profile__title">
    <a href="http://www.whitehouse.com" class="vf-profile__link">Annika Corinna Grandison</a>
  </h3>

  <p class="vf-profile__job-title">Engagement Team Lead</p>

  <p class="vf-profile__text">Communications</p>

  <p class="vf-profile__email">
    <a href="mailto:annika.grandison@embl.org" class="vf-profile__link vf-profile__link--secondary">annika.grandison@embl.org</a>
  </p>

  <p class="vf-profile__phone">
    <a href="tel:+49 6221 387-8443" class="vf-profile__link vf-profile__link--secondary">+49 6221 387-8443</a>
  </p>
  <p class="vf-profile__phone vf-profile__phone--mobile | vf-u-last-item ">
    <a href="tel:+49 175 899 1179" class="vf-profile__link vf-profile__link--secondary">+49 175 899 1179</a>
  </p>

  <p class="vf-profile__uuid">
    <span>ORCID:</span>
    <a class="vf-profile__link vf-profile__link--secondary" href="https://europepmc.org/authors/JavaScript:Void(0);">0000 - 1234 - 4326 - XX03</a>
  </p>

</article>

Block Large variant

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",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "size": "large",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
}
 %}
{% include "../path_to/vf-profile/vf-profile.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-profile', {
  "component-type": "block",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "size": "large",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
} %}
HTML 
<article class="vf-profile vf-profile--large vf-profile--block">
  <img class="vf-profile__image" src="https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_" alt="" loading="lazy">

  <h3 class="vf-profile__title">
    <a href="http://www.whitehouse.com" class="vf-profile__link">Annika Corinna Grandison</a>
  </h3>

  <p class="vf-profile__job-title">Engagement Team Lead</p>

  <p class="vf-profile__text">Communications</p>

  <p class="vf-profile__email">
    <a href="mailto:annika.grandison@embl.org" class="vf-profile__link vf-profile__link--secondary">annika.grandison@embl.org</a>
  </p>

  <p class="vf-profile__phone">
    <a href="tel:+49 6221 387-8443" class="vf-profile__link vf-profile__link--secondary">+49 6221 387-8443</a>
  </p>
  <p class="vf-profile__phone vf-profile__phone--mobile | vf-u-last-item ">
    <a href="tel:+49 175 899 1179" class="vf-profile__link vf-profile__link--secondary">+49 175 899 1179</a>
  </p>

  <p class="vf-profile__uuid">
    <span>ORCID:</span>
    <a class="vf-profile__link vf-profile__link--secondary" href="https://europepmc.org/authors/JavaScript:Void(0);">0000 - 1234 - 4326 - XX03</a>
  </p>

</article>

Inline Small variant

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",
  "layout": true,
  "size": "small",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    }
  ]
}
 %}
{% include "../path_to/vf-profile/vf-profile.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-profile', {
  "component-type": "block",
  "layout": true,
  "size": "small",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    }
  ]
} %}
HTML 
<article class="vf-profile vf-profile--small vf-profile--inline">
  <img class="vf-profile__image" src="https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_" alt="" loading="lazy">

  <h3 class="vf-profile__title">
    Annika Corinna Grandison </h3>




  <p class="vf-profile__phone | vf-u-last-item ">
    <a href="tel:+49 6221 387-8443" class="vf-profile__link vf-profile__link--secondary">+49 6221 387-8443</a>
  </p>


</article>

Inline Regular variant

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",
  "layout": true,
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
}
 %}
{% include "../path_to/vf-profile/vf-profile.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-profile', {
  "component-type": "block",
  "layout": true,
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__phones": [
    {
      "profile__phone_number": "+49 6221 387-8443"
    },
    {
      "profile__phone_number": "+49 175 899 1179",
      "mobile": true
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
} %}
HTML 
<article class="vf-profile vf-profile--medium vf-profile--inline">
  <img class="vf-profile__image" src="https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_" alt="" loading="lazy">

  <h3 class="vf-profile__title">
    <a href="http://www.whitehouse.com" class="vf-profile__link">Annika Corinna Grandison</a>
  </h3>

  <p class="vf-profile__job-title">Engagement Team Lead</p>

  <p class="vf-profile__text">Communications</p>

  <p class="vf-profile__email">
    <a href="mailto:annika.grandison@embl.org" class="vf-profile__link vf-profile__link--secondary">annika.grandison@embl.org</a>
  </p>

  <p class="vf-profile__phone">
    <a href="tel:+49 6221 387-8443" class="vf-profile__link vf-profile__link--secondary">+49 6221 387-8443</a>
  </p>
  <p class="vf-profile__phone vf-profile__phone--mobile | vf-u-last-item ">
    <a href="tel:+49 175 899 1179" class="vf-profile__link vf-profile__link--secondary">+49 175 899 1179</a>
  </p>

  <p class="vf-profile__uuid">
    <span>ORCID:</span>
    <a class="vf-profile__link vf-profile__link--secondary" href="https://europepmc.org/authors/JavaScript:Void(0);">0000 - 1234 - 4326 - XX03</a>
  </p>

</article>

Inline Large variant

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",
  "layout": true,
  "size": "large",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
}
 %}
{% include "../path_to/vf-profile/vf-profile.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-profile', {
  "component-type": "block",
  "layout": true,
  "size": "large",
  "profile__image": "https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_",
  "profile__name": "Annika Corinna Grandison",
  "profile__name_href": "http://www.whitehouse.com",
  "profile__job_title": "Engagement Team Lead",
  "profile__text": "Communications",
  "profile__emails": [
    {
      "profile__email_address": "annika.grandison@embl.org"
    }
  ],
  "profile__uuid_href": "JavaScript:Void(0);",
  "profile__uuid": "0000 - 1234 - 4326 - XX03"
} %}
HTML 
<article class="vf-profile vf-profile--large vf-profile--inline">
  <img class="vf-profile__image" src="https://content.embl.org//sites/default/files/styles/medium/public/persons/CP-60025009?itok=PBOnHEa_" alt="" loading="lazy">

  <h3 class="vf-profile__title">
    <a href="http://www.whitehouse.com" class="vf-profile__link">Annika Corinna Grandison</a>
  </h3>

  <p class="vf-profile__job-title">Engagement Team Lead</p>

  <p class="vf-profile__text">Communications</p>

  <p class="vf-profile__email">
    <a href="mailto:annika.grandison@embl.org" class="vf-profile__link vf-profile__link--secondary">annika.grandison@embl.org</a>
  </p>


  <p class="vf-profile__uuid">
    <span>ORCID:</span>
    <a class="vf-profile__link vf-profile__link--secondary" href="https://europepmc.org/authors/JavaScript:Void(0);">0000 - 1234 - 4326 - XX03</a>
  </p>

</article>

Examples

Installation info

This repository is distributed with npm. After installing npm and yarn, you can install vf-profile with this command.

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

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-profile/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.4.0

  • Links of .vf-profile__link use inline-link mixin.
  • Remove need for .vf-u-last-item on last phone number.
  • https://github.com/visual-framework/vf-core/pull/1612

1.3.0

  • deprecates the Mortal Kombat variants.
  • deprecates the theming.
  • makes regular and small font sizes more consistent.

1.2.1

  • changes any set- style functions to cleaner version

1.2.0

  • adds loading="lazy" to the img element for better performance

1.1.0

  • makes theme variant naming and decisions consistent

1.0.2

  • makes the width: 100% rather than max-content as some people have really long job titles

1.0.1

  • fixes issue where email was a link not a mailto:
  • fixes issue where telephone number was a link not a tel:

1.0.0

  • Fix hiding of default variant
  • bump to major releas

0.0.1

  • Initial Component Release

Assets


File system location: components/vf-profile

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