Badges
The vf-badge
component is used to denote if a page, section, or link has a production state of alpha
, beta
or other information.
alpha
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": "element",
"text": "alpha",
"theme": "primary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "primary"
} %}
HTML
<span class="vf-badge vf-badge--primary">alpha</span>
beta
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": "element",
"text": "beta",
"theme": "secondary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "beta",
"theme": "secondary"
} %}
HTML
<span class="vf-badge vf-badge--secondary">beta</span>
alpha
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": "element",
"text": "alpha",
"theme": "tertiary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary"
} %}
HTML
<span class="vf-badge vf-badge--tertiary">alpha</span>
alpha
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": "element",
"text": "alpha",
"theme": "primary",
"style": [
"outline"
]
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "primary",
"style": [
"outline"
]
} %}
HTML
<span class="vf-badge vf-badge--primary vf-badge--outline">alpha</span>
beta
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": "element",
"text": "beta",
"style": [
"outline"
],
"theme": "secondary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "beta",
"style": [
"outline"
],
"theme": "secondary"
} %}
HTML
<span class="vf-badge vf-badge--secondary vf-badge--outline">beta</span>
alpha
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": "element",
"text": "alpha",
"theme": "tertiary",
"style": [
"outline"
]
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary",
"style": [
"outline"
]
} %}
HTML
<span class="vf-badge vf-badge--tertiary vf-badge--outline">alpha</span>
alpha
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": "element",
"text": "alpha",
"theme": "primary",
"style": [
"rounded"
]
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "primary",
"style": [
"rounded"
]
} %}
HTML
<span class="vf-badge vf-badge--primary vf-badge--rounded">alpha</span>
beta
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": "element",
"text": "beta",
"style": [
"rounded"
],
"theme": "secondary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "beta",
"style": [
"rounded"
],
"theme": "secondary"
} %}
HTML
<span class="vf-badge vf-badge--secondary vf-badge--rounded">beta</span>
alpha
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": "element",
"text": "alpha",
"theme": "tertiary",
"style": [
"rounded"
]
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary",
"style": [
"rounded"
]
} %}
HTML
<span class="vf-badge vf-badge--tertiary vf-badge--rounded">alpha</span>
alpha
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": "element",
"text": "alpha",
"theme": "primary",
"style": [
"pill"
]
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "primary",
"style": [
"pill"
]
} %}
HTML
<span class="vf-badge vf-badge--primary vf-badge--pill">alpha</span>
beta
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": "element",
"text": "beta",
"style": [
"pill"
],
"theme": "secondary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "beta",
"style": [
"pill"
],
"theme": "secondary"
} %}
HTML
<span class="vf-badge vf-badge--secondary vf-badge--pill">beta</span>
alpha
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": "element",
"text": "alpha",
"theme": "tertiary",
"style": [
"pill"
]
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary",
"style": [
"pill"
]
} %}
HTML
<span class="vf-badge vf-badge--tertiary vf-badge--pill">alpha</span>
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": "element",
"style": [
"square"
],
"theme": "primary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"style": [
"square"
],
"theme": "primary"
} %}
HTML
<span class="vf-badge vf-badge--primary vf-badge--square"></span>
alpha
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": "element",
"text": "alpha",
"theme": "tertiary"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary"
} %}
HTML
<span class="vf-badge vf-badge--tertiary">alpha</span>
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": "element",
"badge_href": "JavaScript:Void(0);",
"text": "beta"
}
%}
{% include "../path_to/vf-badge/vf-badge.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-badge', {
"component-type": "element",
"badge_href": "JavaScript:Void(0);",
"text": "beta"
} %}
HTML
<a href="JavaScript:Void(0);" class="vf-badge">beta</a>
Usage
The vf-badge
accepts a single text item of content.
content type |
variable |
description |
text |
text |
|
Links
The vf-badge
component can also be a link using <a class="vf-badge" href="">badge title</a>
.
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"]
.
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-badge
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-badge/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
1.0.17
1.0.16
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
1.0.6
- begin to make more pattern/boilerplate guidance
- minor templating updates
1.0.5
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-badge