Profile github location npm version

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.

Variants

Variant example: Block
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",
  "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--very-easy 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 | vf-u-last-item ">
    <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>
Variant example: Block Small
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",
  "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--very-easy 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 | vf-u-last-item ">
    <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>
Variant example: Block Large
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",
  "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--very-easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline
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",
  "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--very-easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline Small
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",
  "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--very-easy 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>
Variant example: Inline Large
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",
  "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--very-easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline Easy
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",
  "layout": true,
  "variant": "easy",
  "size": "medium",
  "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,
  "variant": "easy",
  "size": "medium",
  "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--easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline Easy Primary
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",
  "layout": true,
  "theme": "primary",
  "variant": "easy",
  "size": "medium",
  "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,
  "theme": "primary",
  "variant": "easy",
  "size": "medium",
  "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-theme--primary vf-profile--easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline Primary
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",
  "layout": true,
  "theme": "primary",
  "size": "medium",
  "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,
  "theme": "primary",
  "size": "medium",
  "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-theme--primary vf-profile--very-easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline Easy Secondary
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",
  "layout": true,
  "theme": "secondary",
  "variant": "easy",
  "size": "medium",
  "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,
  "theme": "secondary",
  "variant": "easy",
  "size": "medium",
  "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-theme--secondary vf-profile--easy 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 | vf-u-last-item ">
    <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>
Variant example: Inline Secondary
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",
  "layout": true,
  "theme": "secondary",
  "size": "medium",
  "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,
  "theme": "secondary",
  "size": "medium",
  "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-theme--secondary vf-profile--very-easy 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 | vf-u-last-item ">
    <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>

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:

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.

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

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