HTMLPLUS

Divider

It's a thin line that can divide the content vertically or horizontally.

Follow the tutorials here  to use the HTMLPLUS library on React-based  projects.

PlusDivider

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties
Slots
Events
CSS Variables
CSS Parts
Methods
Name
size
Type
"lg" | "md" | "sm""lg" | "md" | "sm"
Default
'md'
Determines the width of the divider.
Name
type
Type
"dashed" | "dotted" | "solid""dashed" | "dotted" | "solid"
Default
'solid'
Specifies different divider styles.
Name
vertical
Type
booleanboolean
Default
undefined
You can use vertical property for vertical division.
Name
--plus-divider-color
Used to adjust the color.
Name
--plus-divider-size
Used to adjust the size.
Name
--plus-divider-type
Used to adjust the type.

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Divider } from "@htmlplus/react";

const App = () => {
  return <>    
    <Divider size="sm"></Divider>    
    <br />    
    <Divider size="md"></Divider>    
    <br />    
    <Divider size="lg"></Divider>    
  </>;
};

export default App;

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Divider } from "@htmlplus/react";

const App = () => {
  return <>    
    <Divider type="solid"></Divider>    
    <br />    
    <Divider type="dashed"></Divider>    
    <br />    
    <Divider type="dotted"></Divider>    
  </>;
};

export default App;

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Divider } from "@htmlplus/react";

const App = () => {
  return <>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero.
    <Divider></Divider>
    Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus.
  Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum.
    <Divider></Divider>
    Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
  </>;
};

export default App;
plus-divider {
  margin: 1rem 0;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Divider } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center" justifyContent="evenly">      
      <Grid.Item xs="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend
    ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus,
    gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris
    aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus.
      </Grid.Item>      
      <Divider vertical></Divider>      
      <Grid.Item xs="5">
        Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida.
    Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel
    accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit
    imperdiet, gravida urna tempus, fringilla nisl.
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Card, Divider } from "@htmlplus/react";

const App = () => {
  return <>    
    <Card elevation="10">
      Item 1
      <Divider></Divider>
      Item 2
      <Divider></Divider>
      Item 3
      <Divider></Divider>
      Item 4
      <Divider></Divider>
      Item 5
    </Card>    
  </>;
};

export default App;
plus-card {
  padding: 0 1rem;
  line-height: 3rem;
}

PreviewScriptStylesandboxEdit on CodeSandbox
import React from "react";
import { Grid, Divider } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid alignItems="center" justifyContent="evenly">      
      <Grid.Item xs="5">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend
    ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus,
    gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris
    aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus.
      </Grid.Item>      
      <Divider vertical></Divider>      
      <Grid.Item xs="5">
        Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida.
    Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel
    accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit
    imperdiet, gravida urna tempus, fringilla nisl.
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;
plus-divider {
  --plus-divider-color: #5F9EE9;
  --plus-divider-size: 3px;
  margin: 2rem 0;
}
Contributors
Prev
Dialog
Next
Drawer
SELECT YOUR FRAMEWORK
React logo
React