@visual-framework/vf-profile

vf-profile component

Usage no npm install needed!

<script type="module">
  import visualFrameworkVfProfile from 'https://cdn.skypack.dev/@visual-framework/vf-profile';
</script>

README

Profile component

npm version

About

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.

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.

Install

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

Help