Lists
Classic html list <li>
types: order, unordered, bulleted and inline.
- a list item
- another list item
- and another list item
- yet another list item
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",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
}
%}
{% include "../path_to/vf-list/vf-list.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-list', {
"component-type": "element",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
} %}
HTML
<ul class="vf-list">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
</ul>
- a list item
- another list item
- and another list item
- yet another list item
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",
"list_type": "inline",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
}
%}
{% include "../path_to/vf-list/vf-list.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-list', {
"component-type": "element",
"list_type": "inline",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
} %}
HTML
<ul class="vf-list vf-list--inline">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
</ul>
- a list item
- another list item
- and another list item
- yet another list item
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",
"list_type": "ordered",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
}
%}
{% include "../path_to/vf-list/vf-list.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-list', {
"component-type": "element",
"list_type": "ordered",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
} %}
HTML
<ul class="vf-list vf-list--ordered">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
</ul>
- a list item
- another list item
- and another list item
- yet another list item
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",
"list_type": "unordered",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
}
%}
{% include "../path_to/vf-list/vf-list.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-list', {
"component-type": "element",
"list_type": "unordered",
"list": [
"a list item",
"another list item",
"and another list item",
"yet another list item"
]
} %}
HTML
<ul class="vf-list vf-list--unordered">
<li class="vf-list__item">a list item</li>
<li class="vf-list__item">another list item</li>
<li class="vf-list__item">and another list item</li>
<li class="vf-list__item">yet another list item</li>
</ul>
Installation info
This component is distributed with npm. After installing npm, you can install the vf-list
with this command.
$ yarn add --dev @visual-framework/vf-list
Sass/CSS
The source files included are written in Sass(scss
). You can point your Sass include-path
at your node_modules
directory and import it like this.
@import "@visual-framework/vf-list/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-list