Lists element

Classic html list <li> and <dl> types: order, unordered, bulleted, inline and definition.

github location npm version

Usage

When presenting a series of text-only content such as words or names, consider using a list. The best list type to use will depend on the relationships between the terms.

Default variant Use to present items without a specific order, like navigation menus or lists of features.

Tight variant The same as the default variant, but with less space between items. Use when it would be preferable to show more items of the same list together. Large variant Larger items for when the list should be more prominent

Inline variant:

  • Use to display a list horizontally within a sentence or paragraph, such as a series of authors

Ordered variant:

  • Use for content with a specific sequence or order, such as steps in a process or ranked items.

Unordered variant:

  • Use to present items without a specific order, like navigation menus or lists of features.

Definition List

  • Use to show terms with definitions or descriptions

Recommendations

Sort list items in a logical order that makes information easily scannable by the users such as: alphabetical, numerical, chronological, or by user preference.

Variants

Default variant

  • 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 (example), 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>

Tight variant

  • 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 (example), 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" : "default",
"override_class" : "vf-list--tight",
"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" : "default",
  "override_class" : "vf-list--tight",
  "list" : a list item,another list item,and another list item,yet another list item,}
%}
HTML 
 <ul class="vf-list vf-list--default | vf-list--tight">
   <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>

Large variant

  • 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 (example), 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" : "l",
"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" : "l",
  "list" : a list item,another list item,and another list item,yet another list item,}
%}
HTML 
 <ul class="vf-list vf-list--l">
   <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>

Inline variant

  • 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 (example), 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>

Ordered variant

  1. a list item
  2. another list item
  3. and another list item
  4. 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 (example), 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 
 <ol 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>
 </ol>

Unordered variant

  • 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 (example), 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>

Definition variant

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
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 (example), 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" : "definition",
"list" : [object Object],[object Object],[object Object],
 }
%}
{% 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" : "definition",
  "list" : [object Object],[object Object],[object Object],}
%}
HTML 
 <dl class="vf-list vf-list--definition">
   <dt class="vf-list__item vf-list--definition__term"> Beast of Bodmin </dt>
   <dd class="vf-list__item vf-list--definition__details"> A large feline inhabiting Bodmin Moor. </dd>
   <dt class="vf-list__item vf-list--definition__term"> Morgawr </dt>
   <dd class="vf-list__item vf-list--definition__details"> A sea serpent. </dd>
   <dt class="vf-list__item vf-list--definition__term"> Owlman </dt>
   <dd class="vf-list__item vf-list--definition__details"> A giant owl-like creature. </dd>
 </dl>

Examples

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.1.1

1.1.0

  • Add support to inherit context templates from Nunjucks.
  • Expose example of large variant (vf-list-l).
  • Add tight variant (vf-list--tight).
  • Add support for definition lists.
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
  • https://github.com/visual-framework/vf-core/issues/914

1.0.0

  • Initial stable release

Assets


File system location: components/vf-list

Find an issue on this page? Propose a change or discuss it.