1.0.2 • Public • Published

    The Cluster Layout component

    npm version


    The vf-cluster is a layout component that can be used when we need to give various content items (of indeterment sizes) an equaly spaced layout on the page that can respond to the browsers viewport width.


    The main use case for vf-cluster is to be mainly used when something the available grid systems are too 'rigid' because of the different widths of the content.



    To use the vf-cluster component we make use of the @extends directive from Nunjucks to 'wrap' around the content we want this layout component to render.


    To use the vf-cluster component you must be using vX.X.X of vf-eleventy.


    In the .njk file you are wanting to use the vf-cluster you must include the following code to 'extend' the file with the vf-cluster component.

    {% raw %}

    {% extends layout.cluster %}

    {% endraw %}

    You will then need to create a 'block' to put the relevant content inside so that it renders within the vf-cluster layout when rendered.

    {% raw %}

    {% block cluster_content %}
    {% endblock %}

    {% endraw %}

    To make use of .yml to render the vf-cluster to the variant you wish to use, you will have to 'set' the context in the .njk file.

    {% raw %}

    {% set context = cluster1 %}

    {% endraw %}

    note: cluster1 is an example, please pick your own semantic, readable context names
    With these set you can then add the relevant content as needed.



    To use the vf-cluster component you must be using vX.X.X of vf-wp.


    There are four spacing variants and three alignment variants available for this component as well as an option to define the width of the vf-clusters children.

    custom property options default
    spacing small, medium, large none
    alignment start, center, end none

    Spacing Variants

    There are three spacing variants that determina the inline and block spacing between items of content inside of vf-cluster.

    Alignment Variants

    This variant determines where the child components align in the vertical space available. When setting this in your .yml file it will add the relevant CSS value as the inline CSS custom property -vf-cluster-alignment.

    CSS Custom Properties

    custom property options example
    --vf-cluster-alignment could be used for a different vertical alignment value baseline
    --vf-cluster-margin can take a CSS size value to overide the defualt 31px
    --vf-cluster__item--flex can take a CSS flex value to determine the child widths 210px 1 0


    This repository is distributed with npm. After installing npm and yarn, you can install vf-cluster with this command.

    $ yarn add --dev @visual-framework/vf-cluster


    The source files included are written in scss syntax of Sass. You can point your sass include-path at your node_modules directory and import it like this.

    @import "@visual-framework/vf-cluster/index.scss";

    Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter



    npm i @visual-framework/vf-cluster

    DownloadsWeekly Downloads





    Apache 2.0

    Unpacked Size

    67 kB

    Total Files


    Last publish


    • pacope92
    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98