Nutritious Pumpkin Meal

    @visual-framework/vf-divider

    2.0.1 • Public • Published

    Divider component

    npm version

    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

    Install

    npm i @visual-framework/vf-divider

    DownloadsWeekly Downloads

    725

    Version

    2.0.1

    License

    Apache 2.0

    Unpacked Size

    20.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98