Divider
The vf-divider
component creates a horizontal dividing rule that can help separate containers of content or content inside of their containers.
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"
}
%}
{% include "../path_to/vf-divider/vf-divider.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-divider', {
"component-type": "element"
} %}
HTML
<hr class="vf-divider">
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",
"override_class": "vf-u-fullbleed"
}
%}
{% include "../path_to/vf-divider/vf-divider.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-divider', {
"component-type": "element",
"override_class": "vf-u-fullbleed"
} %}
HTML
<hr class="vf-divider | vf-u-fullbleed">
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",
"override_class": "vf-u-fullbleed",
"context_margin__inline": "3rem"
}
%}
{% include "../path_to/vf-divider/vf-divider.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-divider', {
"component-type": "element",
"override_class": "vf-u-fullbleed",
"context_margin__inline": "3rem"
} %}
HTML
<hr class="vf-divider | vf-u-fullbleed" style="--context-margin--inline: 3rem;">
Usage
The vf-divider
component will be the width of if's container. So inside of <body>
of your page it will be a maximum of 1300px.
<body class="vf-body">
<hr class="vf-divider">
</body>
If you wish to have your vf-divider
fit the whole width of the screen you can add the vf-u-fullbleed
utility class along side it:
<hr class="vf-divider | vf-u-fullbleed">
This fills the width of the viewport but gives a inline (left and right) margin.
You can customise the inline (left and right) margin if you wish by using the CSS custom property --context-margin--inline
on the element:
<hr class="vf-divider | vf-u-fullbleed" style="--context-margin--inline: 2rem;">
Installation info
This component is distributed with npm. After installing npm, you can install the vf-divider
with this command.
$ yarn add --dev @visual-framework/vf-divider
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-divider/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-divider