.l-constrained %header %h1 Style Guide %hr %article#typography %h1 h1 – Heading 1 %h2 h2 – Heading 2 %h3 h3 – Heading 3 %h4 h4 – Heading 4 %h5 h5 – Heading 5 %h6 h6 – Heading 6 %br %p Paragraph with %a{ href: "#" } an example LINK element, %em an example EM element, %strong an example STRONG element, and %small an example SMALL element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. %blockquote Blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. %blockquote %cite Blockquote Cite. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. %h3 Unordered List %ul %li Unordered list item %li Unordered list item %li Unordered list item %h3 Ordered List %ol %li Ordered list item %li Ordered list item %li Ordered list item %hr %article#buttons %h2 Buttons %p %button.btn Standard Button / %br / %br / %button.btn.btn-small Small Button / %button.btn.btn-big Large Button / %button.btn.btn-round Round Button / %button.btn.btn-square Square Button / %button.btn.btn-active Active Button / %button.btn{ disabled: true } Disabled Button %hr %article#forms %h2 Forms %form %label Text Input %input{ type: 'text' } %label Select Input %select %option Option 1 %option Option 2 %label Textarea %textarea %fieldset %legend Checkboxes %label %input{ type: 'checkbox' } Option 1 %label %input{ type: 'checkbox' } Option 2 %fieldset %legend Radio Buttons %label %input{ type: 'radio' } Option 1 %label %input{ type: 'radio' } Option 2 %hr %article#tables %h2 Tables %table.striped.hovered{ style: 'width: 100%' } %thead %tr %th Header 1 %th Header 2 %th Header 3 %tbody - (1..7).each do |i| %tr %td= "Data #{i*3}" %td= "Data #{i*5}" %td= "Data #{i*7}"