React Dividers

Default divider

import React from 'react';
import ReactDOM from 'react-dom';
import Divider from 'muicss/lib/react/divider';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div>Content 1</div>
        <Divider />
        <div>Content 2</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »

Top

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div>Content 1</div>
        <div className="mui--divider-top">Content 2</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »

Bottom

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <div className="mui--divider-bottom">Content 1</div>
        <div>Content 2</div>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »

Left

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <span>Content 1&nbsp;</span>
        <span className="mui--divider-left">&nbsp;Content 2</span>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »

Right

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {
  render() {
    return (
      <div>
        <span className="mui--divider-right">Content 1&nbsp;</span>
        <span>&nbsp;Content 2</span>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('example'));

View in new tab »