Neverending Perpetual Motion


    1.4.0 • Public • Published

    Profile component

    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.



    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.


    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


    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



    npm i @visual-framework/vf-profile

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    55.7 kB

    Total Files


    Last publish


    • khawkins98