react-md
react-md - Divider - Demos

Horizontal Dividers

Horizontal dividers can be used to separate content within your page when just spacing isn't enough. The example below will show how you can use dividers between different text blocks.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis nunc et maximus consectetur. Nunc posuere sem ex, quis vulputate lacus iaculis non. Nulla facilisi. Proin at lacus suscipit, interdum justo eu, mollis justo. Morbi lobortis eros in luctus porta. Nam consectetur laoreet nibh, nec egestas velit maximus at. Etiam eget mi luctus, fermentum nisi laoreet, tincidunt elit. Proin fermentum efficitur mauris eu dictum. Nam eu ante eu orci rhoncus dapibus. Nulla facilisi. Nullam sed justo massa. Sed consequat efficitur est, vel dignissim purus ultricies non. Ut et cursus metus. Sed sagittis mattis nisl ac pulvinar.

Nunc nec eleifend est. Nulla elit massa, condimentum a sollicitudin id, ullamcorper sed tortor. Sed quis congue mauris, at posuere elit. Cras ut nibh vel lacus varius consequat in a velit. Aenean convallis, turpis et ornare imperdiet, est enim molestie nulla, in facilisis sem arcu vel est. Donec sit amet tortor lobortis, pretium odio sit amet, congue neque. Nulla vitae magna sit amet lacus eleifend feugiat ac in nisl. Ut fringilla fermentum est ut egestas. Duis tincidunt, mauris sed rhoncus volutpat, est quam convallis odio, ac faucibus massa nisi sed ex. Praesent mollis quam in sapien rutrum, ut tincidunt lacus accumsan. Phasellus pharetra fringilla sapien id feugiat. Vestibulum auctor eget nisi eu lacinia. Proin sit amet justo nec turpis consectetur scelerisque.

Within Lists

Dividers work well with the @react-md/list package as well since a normal pattern is to add a distinction between different parts of a list. The Divider component also supports being inset so that it can align with the list keyline.

  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  • Fifth Item
  • Sixth Item
  • First Item
  • Second Item
  • Third Item
  • Fourth Item
  • Fifth Item
  • Sixth Item

Vertical Dividers

It is also possible to create vertical dividers using the VerticalDivider component instead of the base Divider component. I would personally recommend using the rmd-divider-border mixin instead since it a bit easier when using borders instead of a component, but it is possible. The VerticalDivider will automatically update its own height based on the parent element's height so that it can be shown.

Logo
Company Name