...
 
Commits (7)
......@@ -6,7 +6,7 @@
# https://dev.assets.emblstatic.net/vf/{tag}/ (eg v2.1.2 / v2.1.3-alpha.3)
# https://dev.assets.emblstatic.net/vf/{minor}/ (eg v2.1)
# https://dev.assets.emblstatic.net/vf/{major}/ (eg v2)
image: node:10.21.0
image: node:10.22.0
variables:
# project specific variables can be defined here
......
......@@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# 1.1.0
* adds if statement to allow for context data to pass through
# 1.0.0 (2019-12-17)
* Initial stable release
......@@ -6,15 +6,17 @@
The `vf-badge` component is used to label a page, part of a page, or a component. The `vf-badge` component can also be a link using `<a class="vf-badge" href="">badge title</a>`.
## Install
## Installation
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-badge` with this command.
This repository is distributed with [npm](https://www.npmjs.com/). After [installing npm](https://www.npmjs.com/get-npm) and [yarn](https://classic.yarnpkg.com/en/docs/install), you can install `vf-profile` with this command.
```
$ yarn add --dev @visual-framework/vf-badge
```
The source files included are written in [Sass](http://sass-lang.com)(`scss`). You can point your Sass `include-path` at your `node_modules` directory and import it like this.
### Sass/CSS
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
```
@import "@visual-framework/vf-badge/index.scss";
......@@ -22,10 +24,50 @@ The source files included are written in [Sass](http://sass-lang.com)(`scss`). Y
_Make sure you import Sass requirements along with the modules._
## Usage
If you are using the badge as a link, you must include the relevant url within the `href=""` part of `<a class="vf-badge" href="">badge title</a>`, for example:
The `vf-badge` component is used to denote if a page, section, or link has a production state of `alpha`, `beta` or other information.
```
<a class="vf-badge vf-badge--phases vf-badge--primary" href="">badge title</a>
```
### Content
The `vf-badge` accepts a single text item of content.
| content type | variable | description |
| ------------ | -------- | ----------- |
| text | `text` | |
### Nunjucks and yml options
#### Nunjucks and YML variables available
| variable | options | default |
| -------------- | -------------------------------------- | ------- |
| text | | |
| badge_href | | null |
| theme | 'primary', 'secondary', 'tertiary' | |
| style | 'pill', 'rounded', 'square', 'outline' | |
| override_class | | |
| id | | |
#### Component Specific Variants
The `vf-badge` allows for two sets of variants
##### Theme Variants
There are three theme variants available for the component that are **primary**, **secondary**, and **tertiary**. To add a theme to the component you would need to add `theme: primary`, `theme: secondary`, or `theme: tertiary` to the `.yml` file.
##### Design Variants
There are four design variants for the component. We have `square`, `pill`, and `rounded` as well as `outline`. The `outline` variant can be used along with another variant so the way we write this in code is a little different. To only have a rounded button we should write `["rounded"]` but if we wanted to have a rounded button with the outline rather than filled colour we would have to write `["outline", "rounded"]`.
## Help
- [Read the Visual Framework troubleshooting](https://visual-framework.github.io/vf-welcome/troubleshooting/)
- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)
{%- if context %}
{% set badge_href = context.badge_href %}
{% set theme = context.theme %}
{% set text = context.text %}
{% set style = context.style %}
{% set html = context.html %}
{% endif -%}
{# Determine type of element to use, if not explicitly set -#}
{% spaceless %}
{% if href %}
{% if badge_href %}
{% set tags = 'a' %}
{% else %}
{% set tags = 'span' %}
......
......@@ -13,11 +13,13 @@
* VF Core version in use: #{map-get($componentInfo, 'vfCoreVersion')}
*/
@import '../vf-sass-config/index.scss';
@import 'vf-sass-config/index.scss';
// Note, you can also do relative imports
// @import '../vf-sass-config/index.scss';
/* All Visual Framework Font components */
@import '../vf-font-plex-mono/vf-font-plex-mono.scss';
@import '../vf-font-plex-sans/vf-font-plex-sans.scss';
@import 'vf-font-plex-mono/vf-font-plex-mono.scss';
@import 'vf-font-plex-sans/vf-font-plex-sans.scss';
html, button {
@if $use-global-typography == true {
......@@ -28,110 +30,110 @@ html, button {
/* Visual Framework content compatibility
* We put this first so it will have the least specificity
*/
@import '../vf-content/vf-content.scss';
@import 'vf-content/vf-content.scss';
/* All Visual Framework grids */
@import '../vf-grid/vf-grid.scss';
@import '../vf-inlay/vf-inlay.scss';
@import '../vf-grid-page/vf-grid-page.scss';
@import '../embl-grid/embl-grid.scss';
@import 'vf-grid/vf-grid.scss';
@import 'vf-inlay/vf-inlay.scss';
@import 'vf-grid-page/vf-grid-page.scss';
@import 'embl-grid/embl-grid.scss';
/* All Visual Framework Elements */
@import '../vf-badge/vf-badge.scss';
@import '../vf-collapse/vf-collapse.scss';
@import '../vf-link/vf-link.scss';
@import '../vf-link/vf-link--primary.scss';
@import '../vf-link/vf-link--secondary.scss';
@import '../vf-link/vf-link--disabled.scss';
@import '../vf-logo/vf-logo.scss';
@import '../vf-embed/vf-embed.scss';
@import '../embl-logo/embl-logo.scss';
@import '../vf-explainer/vf-explainer.scss';
@import '../vf-form/vf-form__core/vf-form__core.scss';
@import '../vf-button/vf-button.scss';
@import '../vf-figure/vf-figure.scss';
@import '../vf-list/vf-list.scss';
@import '../vf-blockquote/vf-blockquote.scss';
@import '../vf-divider/vf-divider.scss';
@import '../embl-conditional-edit/embl-conditional-edit.scss';
@import 'vf-badge/vf-badge.scss';
@import 'vf-collapse/vf-collapse.scss';
@import 'vf-link/vf-link.scss';
@import 'vf-link/vf-link--primary.scss';
@import 'vf-link/vf-link--secondary.scss';
@import 'vf-link/vf-link--disabled.scss';
@import 'vf-logo/vf-logo.scss';
@import 'vf-embed/vf-embed.scss';
@import 'embl-logo/embl-logo.scss';
@import 'vf-explainer/vf-explainer.scss';
@import 'vf-form/vf-form__core/vf-form__core.scss';
@import 'vf-button/vf-button.scss';
@import 'vf-figure/vf-figure.scss';
@import 'vf-list/vf-list.scss';
@import 'vf-blockquote/vf-blockquote.scss';
@import 'vf-divider/vf-divider.scss';
@import 'embl-conditional-edit/embl-conditional-edit.scss';
/* All Visual Framework Blocks */
@import '../vf-box/vf-box.scss';
@import '../vf-box/vf-box--inlay.scss';
@import '../vf-box/vf-box--factoid.scss';
@import 'vf-box/vf-box.scss';
@import 'vf-box/vf-box--inlay.scss';
@import 'vf-box/vf-box--factoid.scss';
@import '../vf-breadcrumbs/vf-breadcrumbs.scss';
@import '../vf-breadcrumbs/vf-breadcrumbs--with-related.scss';
@import 'vf-breadcrumbs/vf-breadcrumbs.scss';
@import 'vf-breadcrumbs/vf-breadcrumbs--with-related.scss';
@import '../vf-card/vf-card.scss';
@import '../vf-card-container/vf-card-container.scss';
@import 'vf-card/vf-card.scss';
@import 'vf-card-container/vf-card-container.scss';
@import '../vf-discussion/vf-discussion.scss';
@import 'vf-discussion/vf-discussion.scss';
@import '../vf-code-example/vf-code-example.scss';
@import '../vf-page-header/vf-page-header.scss';
@import '../vf-link-list/vf-link-list.scss';
@import '../vf-header/vf-header.scss';
@import '../vf-hero/vf-hero.scss';
@import 'vf-code-example/vf-code-example.scss';
@import 'vf-page-header/vf-page-header.scss';
@import 'vf-link-list/vf-link-list.scss';
@import 'vf-header/vf-header.scss';
@import 'vf-hero/vf-hero.scss';
@import '../vf-lede/vf-lede.scss';
@import 'vf-lede/vf-lede.scss';
@import '../vf-masthead/vf-masthead.scss';
@import '../vf-masthead/vf-masthead--supports.scss';
@import 'vf-masthead/vf-masthead.scss';
@import 'vf-masthead/vf-masthead--supports.scss';
@import '../vf-navigation/vf-navigation.scss';
@import '../vf-navigation/vf-navigation--global.scss';
@import '../vf-navigation/vf-navigation--main.scss';
@import '../vf-navigation/vf-navigation--additional.scss';
@import 'vf-navigation/vf-navigation.scss';
@import 'vf-navigation/vf-navigation--global.scss';
@import 'vf-navigation/vf-navigation--main.scss';
@import 'vf-navigation/vf-navigation--additional.scss';
@import '../vf-section-header/vf-section-header.scss';
@import '../vf-activity-list/vf-activity-list.scss';
@import '../vf-article-meta-information/vf-article-meta-information.scss';
@import 'vf-section-header/vf-section-header.scss';
@import 'vf-activity-list/vf-activity-list.scss';
@import 'vf-article-meta-information/vf-article-meta-information.scss';
@import '../vf-profile/vf-profile.scss';
@import 'vf-profile/vf-profile.scss';
@import '../vf-search/vf-search.scss';
@import 'vf-search/vf-search.scss';
@import '../vf-social-links/vf-social-links.scss';
@import 'vf-social-links/vf-social-links.scss';
@import '../vf-summary/vf-summary.scss';
@import '../vf-summary/vf-summary--article.scss';
@import '../vf-summary/vf-summary--job.scss';
@import '../vf-summary/vf-summary--profile.scss';
@import '../vf-summary/vf-summary--event.scss';
@import '../vf-summary/vf-summary--publication.scss';
@import '../vf-summary/vf-summary--news.scss';
@import '../vf-summary/vf-summary--has-image.scss';
@import 'vf-summary/vf-summary.scss';
@import 'vf-summary/vf-summary--article.scss';
@import 'vf-summary/vf-summary--job.scss';
@import 'vf-summary/vf-summary--profile.scss';
@import 'vf-summary/vf-summary--event.scss';
@import 'vf-summary/vf-summary--publication.scss';
@import 'vf-summary/vf-summary--news.scss';
@import 'vf-summary/vf-summary--has-image.scss';
@import '../vf-video/vf-video.scss';
@import '../vf-video-teaser/vf-video-teaser.scss';
@import '../vf-global-header/vf-global-header.scss';
@import '../vf-tabs/vf-tabs.scss';
@import '../vf-table/vf-table.scss';
@import '../embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
@import '../vf-pagination/vf-pagination.scss';
@import '../vf-pagination/vf-pagination--full.scss';
@import 'vf-video/vf-video.scss';
@import 'vf-video-teaser/vf-video-teaser.scss';
@import 'vf-global-header/vf-global-header.scss';
@import 'vf-tabs/vf-tabs.scss';
@import 'vf-table/vf-table.scss';
@import 'embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss';
@import 'vf-pagination/vf-pagination.scss';
@import 'vf-pagination/vf-pagination--full.scss';
/* All Visual Framework Containers */
@import '../vf-activity-group/vf-activity-group.scss';
@import '../vf-intro/vf-intro.scss';
@import '../embl-content-hub-loader/embl-content-hub-loader.scss';
@import 'vf-activity-group/vf-activity-group.scss';
@import 'vf-intro/vf-intro.scss';
@import 'embl-content-hub-loader/embl-content-hub-loader.scss';
@import '../vf-banner/vf-banner.scss';
@import '../vf-banner/vf-banner--phase.scss';
@import '../vf-banner/vf-banner--alerts.scss';
@import '../vf-banner/vf-banner--fixed.scss';
@import '../vf-banner/vf-banner--gdpr.scss';
@import 'vf-banner/vf-banner.scss';
@import 'vf-banner/vf-banner--phase.scss';
@import 'vf-banner/vf-banner--alerts.scss';
@import 'vf-banner/vf-banner--fixed.scss';
@import 'vf-banner/vf-banner--gdpr.scss';
@import '../vf-news-container/vf-news-container.scss';
@import '../vf-video-container/vf-video-container.scss';
@import '../vf-footer/vf-footer.scss';
@import 'vf-news-container/vf-news-container.scss';
@import 'vf-video-container/vf-video-container.scss';
@import 'vf-footer/vf-footer.scss';
@import '../vf-tree/vf-tree.scss';
@import 'vf-tree/vf-tree.scss';
/* All Visual Framework Boilerplates */
......@@ -139,27 +141,27 @@ html, button {
/* All Visual Framework Deprecated components */
@import '../vf-deprecated/vf-deprecated.scss';
@import 'vf-deprecated/vf-deprecated.scss';
/* EBI Specific components */
// ebi-header-footer is not enabled by default
// this may change as more EBI sites move to "pure" sVF 2.0
// @import '../ebi-header-footer/ebi-header-footer.scss';
@import '../ebi-vf1-integration/ebi-vf1-integration.scss';
// @import 'ebi-header-footer/ebi-header-footer.scss';
@import 'ebi-vf1-integration/ebi-vf1-integration.scss';
/* All Visual Framework Utility and high-specificity components */
@import '../vf-heading/vf-heading.scss';
@import '../vf-text/vf-text.scss';
@import '../vf-u-fullbleed/vf-u-fullbleed.scss';
@import 'vf-heading/vf-heading.scss';
@import 'vf-text/vf-text.scss';
@import 'vf-u-fullbleed/vf-u-fullbleed.scss';
/* Visual Framework Utility Class Mixins */
@import '../vf-sass-config/mixins/vf-utility-mixins.scss';
@import '../vf-utility-classes/vf-utility-classes.scss';
@import 'vf-sass-config/mixins/vf-utility-mixins.scss';
@import 'vf-utility-classes/vf-utility-classes.scss';
// This is a demonstration of vf-core's ability to warn and proceed on missing
// sass imports
@import '../vf-somepattern/vf-i-dont-exist.scss';
@import 'vf-somepattern/vf-i-dont-exist.scss';
// If you have any locoal overrides, put them in:
@import '../vf-local-overrides/vf-local-overrides.scss';
@import 'vf-local-overrides/vf-local-overrides.scss';
# Change Log
## 1.1.0
* adds if statement to pass context data through to component
* improves documentation
## 1.0.2
* Simplify grid
......
# Intro Component
[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-intro.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-intro)
## About
A text-oriented container, this combines the `embl-grid` layout with a heading and `vf-lede` text.
## Install
## Installation
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-intro` with this command.
This repository is distributed with [npm](https://www.npmjs.com/). After [installing npm](https://www.npmjs.com/get-npm) and [yarn](https://classic.yarnpkg.com/en/docs/install), you can install `vf-profile` with this command.
```
$ yarn add --dev @visual-framework/vf-intro
......@@ -21,3 +16,59 @@ The source files included are written in [Sass](http://sass-lang.com)(`scss`). Y
```
_Make sure you import Sass requirements along with the modules._
## Usage
The `vf-intro` component is to be used as the main title of a page or section where you need to include some additional text in a larger typeface. The `vf-hero` can take a heading, lede text, and paragraph(s) of text. It can also include a badge on the heading which can be a link.
### Use in `vf-eleventy`
To use this component in a `vf-eleventy` project you will need to set the context for the content to pass through from the nunjucks file associated yaml file and include it.
<code>&lcub;% set context == UniqueContextName %&rcub;
<br>
&lcub;% include containers.vf_intro %&rcub;
</code>
**note:** due to how nunjucks handles special characters we have remove the `@` at sign and need to replace the `-` hyphen used for an `_` underscore to `&lcub;% include &rcub;` a component or container. As shown above instead of writing something like `&lcub;% include contaienrs.@vf-intro &rcub;` we need to type `&lcub;% include vf_intro &rcub;`
You may wish to make use of some of your projects side specifc data or content. To do this you will need to set the relevant items of content before you <code>&lcub;% include ... %&rcub;</code> the component. Note: If you also declare this content in the `.yml` file it will take precedence over the inlined code.
For example. If you wanted to make use of your projects `siteConfig` information. You can write out the inclusion of the component in you pages `.njk` file like so:
<code>&lcub;% set context == UniqueContextName %&rcub;
<br>
&lcub;% set vf_intro_heading == siteConfig.siteInformation.short_description %&rcub;
<br>
&lcub;% include containers.intro %&rcub;
</code>
### Content
The `vf-intro` allows for a variet of text.
| content type | variable | description |
| ------------ | ----------------------- | ----------- |
| text | `vf_intro_heading` | |
| text | `vf_intro_phase` | |
| url | `vf_intro_heading_href` | |
| text | `vf_intro_lede` | |
| group | `vf_intro_text` | |
| text | `intro_text` | |
<br/>The `vf-intro_phase`, `vf_intro_heading_href`, `vf_intro_lede`, `vf_intro_text`, and `intro_text` are all optional.
To include `intro_text` you will have to nest and indent the content inside/underneath the `vf_intro_text` in the `.yml` file, like:
```text
vf_intro_text:
- This is an example of intro text paragraph.
- This is an example of a second intro text paragraph.
```
## Help
- [Read the Visual Framework troubleshooting](https://visual-framework.github.io/vf-welcome/troubleshooting/)
- [Open a ticket](https://github.com/visual-framework/vf-core/issues)
- [Chat on Slack](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ)
......@@ -5,9 +5,9 @@ status: live
context:
component-type: container
vf_intro_heading: Cancer
intro_heading_href: 'JavaScript:Void(0);'
vf_intro_phase: beta
vf_intro_lede: Cancer is a generic term for lots of different diseases in which cells divide many more times than usual. This abnormal growth can affect many cell types in almost any part of the body.
vf_intro_text:
- Cancer is a multi-stage process. Normal cells begin to divide abnormally, spreading beyond their normal boundaries, and abnormal tissue growth causes swellings called tumours to form. Tumours can be benign – with no harmful effect on the body – or malignant, invading healthy tissue and interfering with normal bodily functions.
- There are more than 100 types of cancer and symptoms vary depending on the type. <a class="vf-link" href="JavaScript:Void(0);">Read more about Cancer</a>.
intro_heading_href: 'JavaScript:Void(0);'
{% if context %}
{% set vf_intro_heading = context.vf_intro_heading %}
{% set vf_intro_phase = context.vf_intro_phase %}
{% set vf_intro_heading_href = context.vf_intro_heading_href %}
{% set vf_intro_lede = context.vf_intro_lede %}
{% set vf_intro_text = context.vf_intro_text %}
{% set intro_text = context.intro_text %}
{% endif %}
<section class="vf-intro | embl-grid embl-grid--has-centered-content">
<div><!-- empty --></div>
<div>
<h1 class="vf-intro__heading {% if vf_intro_phase %}vf-intro__heading--has-tag{% endif %}
">{{vf_intro_heading}} {% if vf_intro_phase %}<a href="{{ intro_heading_href }}" class="vf-badge vf-badge--primary vf-badge--phases">{{vf_intro_phase}}</a>{% endif %}</h1>
{% render '@vf-lede', {"vf_lede_text": vf_intro_lede} %}
{% asyncEach intro_text in vf_intro_text -%}
<p class="vf-intro__text">{{intro_text}}</p>
{% endeach %}
<h1 class="vf-intro__heading {% if vf_intro_phase %}vf-intro__heading--has-tag{% endif %}">
{{- vf_intro_heading -}}
{%- if (vf_intro_phase) %}
{%- if (intro_heading_href) %}
<a href="{{- intro_heading_href -}}" class="vf-badge vf-badge--primary vf-badge--phases">{{- vf_intro_phase -}}</a>
{%- else -%}
<span class="vf-badge vf-badge--primary vf-badge--phases">{{- vf_intro_phase -}}</span>
{%- endif -%}
{%- endif -%}
</h1>
{%- render '@vf-lede', {"vf_lede_text": vf_intro_lede} -%}
{%- asyncEach intro_text in vf_intro_text -%}
<p class="vf-intro__text">{{- intro_text | safe -}}</p>
{%- endeach -%}
</div>
</section>
# Change Log
## 1.1.0
* adds an if statement so context data can be passed through
* refactors have `vf-badge` is used so that it can take context data rather than just render
## 1.0.3
* adds ability to drop in a `vf-badge` component after a link in `--has-images` variety
......
......@@ -7,6 +7,7 @@
// other components being used
@import '../vf-heading/vf-heading.scss';
@import '../vf-badge/vf-badge.scss';
// component specific styles
......
......@@ -16,7 +16,9 @@ variants:
link_list_href: JavaScript:Void(0);
- text: A colour scheme for VF
link_list_href: JavaScript:Void(0);
badge: alpha
badge:
theme: secondary
text: alpha
meta: Updated 14th February 2018
- text: New team members
link_list_href: JavaScript:Void(0);
......@@ -72,7 +74,8 @@ variants:
link_list_href: JavaScript:Void(0);
- text: Administration
link_list_href: JavaScript:Void(0);
- text: Bioninformatics
meta: Updated 14th February 2018
- text: Bioninfomatics
link_list_href: JavaScript:Void(0);
- text: Communication
link_list_href: JavaScript:Void(0);
......
{% if context %}
{% set title = context.title %}
{% set list = context.list %}
{% set title = context.title %}
{% set component_modifier = context.component_modifier %}
{% set list_modifier = context.list_modifier %}
{% endif %}
<div class="vf-links {%- if component_modifier %} {{ component_modifier }}{% endif %}">
<h3 class="vf-links__heading">{{ title }}</h3>
<ul class="vf-links__list {%- if list_modifier %} vf-links__list--{{ list_modifier}}{% endif %} | vf-list">
......@@ -16,7 +27,10 @@
<svg class="vf-icon vf-icon__arrow--down | vf-list__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-button-down</title><path d="M.249,7.207,11.233,19.678h0a1.066,1.066,0,0,0,1.539,0L23.751,7.207a.987.987,0,0,0-.107-1.414l-1.85-1.557a1.028,1.028,0,0,0-1.438.111L12.191,13.8a.25.25,0,0,1-.379,0L3.644,4.346A1.021,1.021,0,0,0,2.948,4a1,1,0,0,0-.741.238L.356,5.793A.988.988,0,0,0,0,6.478.978.978,0,0,0,.249,7.207Z"/></svg>
{% endif %}
</a>
{% if item.badge %}{% render '@vf-badge' %}{% endif %}
{% if item.badge %}
{% set badge = '@vf-badge' %}
{% render badge, { 'context': item.badge } %}
{% endif %}
{% if item.meta %}
<p class="vf-links__meta">{{ item.meta }}</p>
{% endif %}
......
......@@ -22,10 +22,6 @@
.vf-list__item {
@include set-type(text-body--2);
@include margin--block(bottom, map-get($vf-spacing-map, vf-spacing--lg));
align-items: center;
display: flex;
flex-wrap: wrap;
}
.vf-list__link {
......@@ -131,7 +127,7 @@
display: grid;
grid-column: 1 / -1;
grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
row-gap: 30px;
row-gap: 24px;
}
.vf-list__item {
......
# Change Log
## 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:
......
......@@ -16,7 +16,7 @@
color: set-color(vf-color--grey--darkest);
display: flex;
flex-direction: column;
width: max-content;
width: 100%; // we might not need this
}
.vf-profile__image {
......@@ -53,6 +53,10 @@
@include set-type(text-body--2, $custom-margin-bottom: 0);
line-height: 1.2;
.vf-profile__job-title + & {
margin-bottom: .25rem;
}
}
.vf-profile__email {
......
......@@ -6,7 +6,6 @@
*/
module.exports = function(gulp, buildDestionation) {
// Support for client projects using vf-build
// but we need to see which Fractal build mode to invoke (or not at all, when it's not needed)
let gulpFractalBuildTask;
......
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.