@visual-framework/vf-divider NPM

Divider component

About

The vf-divider component creates a horizontal dividing rule that can help separate containers of content or content inside of their containers.

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 | 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;">

Install

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

Help

fractal component

@everything-registry/sub-chunk-987 @ebiwd/ebi-eleventy-boilerplate @zalastax/nolb-_vis @visual-framework/vf-boilerplate-eleventy @visual-framework/vf-content @visual-framework/vf-demo-design-system @visual-framework/vf-demo-desing-system

3 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago