Divider

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;

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;

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

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;

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

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