Visual Framework
Visual Framework
The vf-divider component creates a horizontal dividing rule that can help separate containers of content or content inside of their containers.
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 | vf-stack vf-stack--400">
<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;">
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.
includeYou'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 = {
"exampleMultiColumns": "false",
"component-type": "element"
}
%}
{% include "../path_to/vf-divider/vf-divider.njk" %}
renderThis 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', {
"exampleMultiColumns": "false",
"component-type": "element"
} %}
<hr class="vf-divider">
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.
includeYou'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 = {
"exampleMultiColumns": "false",
"component-type": "element",
"override_class": "vf-u-fullbleed"
}
%}
{% include "../path_to/vf-divider/vf-divider.njk" %}
renderThis 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', {
"exampleMultiColumns": "false",
"component-type": "element",
"override_class": "vf-u-fullbleed"
} %}
<hr class="vf-divider | vf-u-fullbleed">
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.
includeYou'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 = {
"exampleMultiColumns": "false",
"component-type": "element",
"override_class": "vf-u-fullbleed",
"context_margin__inline": "3rem"
}
%}
{% include "../path_to/vf-divider/vf-divider.njk" %}
renderThis 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', {
"exampleMultiColumns": "false",
"component-type": "element",
"override_class": "vf-u-fullbleed",
"context_margin__inline": "3rem"
} %}
<hr class="vf-divider | vf-u-fullbleed" style="--context-margin--inline: 3rem;">
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
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
vf-stack.grid-column: 1 / -1; rule@mixin available in vf-sass-config--vf-divider--margin-block-end custom property to allow the overriding the block end margin as needed
File system location: components/vf-divider
Find an issue on this page? Propose a change or discuss it.