Dividers

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

List Dividers

To show this type of Dividers you will need this code in down here.

     
 <List>
   <ListItem button>
       <ListItemIcon>
           <i className="zmdi zmdi-email zmdi-hc-fw zmdi-hc-2x" />
       </ListItemIcon>
                <ListItemText primary="Inbox" />
   </ListItem>
   <Divider light />
   <ListItem button>
        <ListItemIcon>
            <i className="zmdi zmdi-mail-send zmdi-hc-fw zmdi-hc-2x" />
        </ListItemIcon>
             <ListItemText primary="Sent" />
   </ListItem>
 </List>
  

Inset Dividerss

     
<List>
    <ListItem button>
        <Avatar className="size-50" alt="Remy Sharp" src="assets/images/userAvatar/domnic-harris.jpg"/>
        <ListItemText primary="Jhon Smith" secondary="Jan 28, 2017" />
        <ListItemSecondaryAction>
            <Badge className="mt-3 mr-3 text-uppercase" color="primary" pill>Admin</Badge>
        </ListItemSecondaryAction>
    </ListItem>
    <Divider inset />
    <ListItem button>
        <Avatar className="size-50" alt="Adelle Charles" src="assets/images/userAvatar/man-3.jpg"/>
        <ListItemText primary="Crish Harris" secondary="Nov 20, 2017" />
        <ListItemSecondaryAction>
            <Badge className="mt-3 mr-3 text-uppercase text-white" color="warning" pill>Guest</Badge>
        </ListItemSecondaryAction>
    </ListItem>
    <Divider inset />
    <ListItem button>
        <Avatar className="size-50" alt="Remy Sharp" src="assets/images/userAvatar/stella-johnson.png"/>
        <ListItemText primary="Stella Jhonson" secondary="Dec 02, 2014" />
        <ListItemSecondaryAction>
            <Badge className="mt-3 mr-3 text-uppercase" color="success" pill>Agent</Badge>
        </ListItemSecondaryAction>
    </ListItem>
</List>
   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
absolute	bool	false
classes	object		Useful to extend the style applied to components.
component	union: string |  func	'hr'	The component used for the root node. Either a string to use a DOM element or a component.
inset	bool	false	If true, the divider will be indented.
light	bool	false	If true, the divider will have a lighter color.