path: root / docs / src / contents / divider.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

p A 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>