149 lines
6.2 KiB

  1. ---
  2. layout : 'default'
  3. css : 'divider'
  4. title : 'Divider'
  5. description : 'A divider visually segments content into separate groups'
  6. type : 'UI Element'
  7. ---
  8. <%- @partial('header') %>
  9. <div class="main container">
  10. <div class="peek">
  11. <div class="ui vertical pointing secondary menu">
  12. <a class="active item">Types</a>
  13. <a class="item">Variations</a>
  14. </div>
  15. </div>
  16. <h2 class="ui dividing header">Types</h2>
  17. <div class="example">
  18. <h4 class="ui header">Divider</h4>
  19. <p>A standard divider</p>
  20. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  21. <div class="ui divider"></div>
  22. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  23. </div>
  24. <div class="example">
  25. <h4 class="ui header">Vertical Divider</h4>
  26. <p>A divider can segment content vertically</p>
  27. <div class="ui two column middle aligned relaxed grid basic segment">
  28. <div class="column">
  29. <div class="ui form segment">
  30. <div class="field">
  31. <label>Username</label>
  32. <div class="ui left labeled icon input">
  33. <input type="text" placeholder="Username">
  34. <i class="user icon"></i>
  35. <div class="ui corner label">
  36. <i class="asterisk icon"></i>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="field">
  41. <label>Password</label>
  42. <div class="ui left labeled icon input">
  43. <input type="password">
  44. <i class="lock icon"></i>
  45. <div class="ui corner label">
  46. <i class="asterisk icon"></i>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="ui blue submit button">Login</div>
  51. </div>
  52. </div>
  53. <div class="ui vertical divider">
  54. Or
  55. </div>
  56. <div class="center aligned column">
  57. <div class="huge green ui labeled icon button">
  58. <i class="signup icon"></i>
  59. Sign Up
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="example">
  65. <h4 class="ui header">Horizontal Divider</h4>
  66. <p>A divider can segment content horizontally</p>
  67. <h3 class="ui header">Retrieve Order</h3>
  68. <div class="ui tertiary form segment">
  69. <div class="field">
  70. <label>Lookup Order</label>
  71. <div class="ui left labeled icon input">
  72. <i class="search icon"></i>
  73. <input type="text" placeholder="Order #">
  74. </div>
  75. </div>
  76. <div class="ui blue submit button">Search</div>
  77. </div>
  78. <div class="ui horizontal divider">
  79. Or
  80. </div>
  81. <div class="ui teal labeled icon button">
  82. Create New Order
  83. <i class="add icon"></i>
  84. </div>
  85. </div>
  86. <div class="example">
  87. <h4 class="ui header">Icon Divider</h4>
  88. <p>A divider can include an icon</p>
  89. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  90. <div class="ui horizontal icon divider">
  91. <i class="circular heart icon"></i>
  92. </div>
  93. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  94. </div>
  95. <h2 class="ui dividing header">Variations</h2>
  96. <div class="example">
  97. <h4 class="ui header">Inverted</h4>
  98. <p>A divider can have its colors inverted</p>
  99. <div class="ui inverted segment">
  100. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  101. <div class="ui inverted divider"></div>
  102. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  103. </div>
  104. </div>
  105. <div class="example">
  106. <h4 class="ui header">Fitted</h4>
  107. <p>A divider can be fitted, without any space above or below it.</p>
  108. <div class="ui segment">
  109. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
  110. <div class="ui fitted divider"></div>
  111. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
  112. </div>
  113. </div>
  114. <div class="example">
  115. <h4 class="ui header">Section</h4>
  116. <p>A divider can provide greater margins to divide sections of content</p>
  117. <h3 class="ui header">Section One</h3>
  118. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  119. <div class="ui section divider"></div>
  120. <h3 class="ui header">Section Two</h3>
  121. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  122. </div>
  123. <div class="example">
  124. <h4 class="ui header">Clearing</h4>
  125. <p>A divider can clear the contents above it</p>
  126. <div class="ui segment">
  127. <h2 class="ui left floated header">Left Header</h2>
  128. <h2 class="ui right floated header">Right Header</h2>
  129. <div class="ui clearing divider"></div>
  130. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  131. </div>
  132. </div>
  133. </div>
  134. </body>
  135. </html>