extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'divider'
  - var parent = 'utilities'
  - var title = 'Divider - Utilities - Spectre.css CSS Framework'
  - var description = 'The Divider is used for separating elements. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('divider', 'Divider')
    include ../_layout/_ad-g.pug

    p The Divider is used for separating elements.

    .docs-demo.columns
      .column
        .divider

    .docs-demo.columns
      .column
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
        .divider.text-center(data-content="OR")
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.

    .docs-demo.columns
      .column
        form
          .form-group
            label.form-label(for="input-example-1") Email
            input#input-example-1.form-input(type="text" placeholder="Email")
          .form-group
            label.form-label(for="input-example-2") Password
            input#input-example-2.form-input(type="password" placeholder="Password")
          .form-group
            label.form-checkbox
              input(type="checkbox")
              i.form-icon
              |  Remember me
          .form-group
            button.btn.btn-primary Sign in
      .divider-vert(data-content="OR")
      .column
        form
          .form-group
            label.form-label(for="input-example-3") Email
            input#input-example-3.form-input(type="text" placeholder="Email")
          .form-group
            button.btn.btn-primary.btn-block Sign up
            button.btn.btn-link.btn-block Learn more

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- divider element -->
          <div class="divider"></div>
          <!-- divider element with text -->
          <div class="divider text-center" data-content="OR"></div>

          <!-- vertical divider element with text -->
          <div class="columns">
            <div class="column">
              <!-- column content -->
            </div>
            <div class="divider-vert" data-content="OR"></div>
            <div class="column">
              <!-- column content -->
            </div>
          </div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug