- page_title "UI Development Kit", "Help" - lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum nisi sapien, non consequat lectus aliquam ultrices. Suspendisse sodales est euismod nunc condimentum, a consectetur diam ornare." .gitlab-ui-dev-kit %h1 GitLab UI development kit %p.light Use page inspector in your browser to check element classes and structure of examples below. %hr %ul %li = link_to 'Blocks', '#blocks' %li = link_to 'Lists', '#lists' %li = link_to 'Tables', '#tables' %li = link_to 'Nav', '#nav' %li = link_to 'Buttons', '#buttons' %li = link_to 'Panels', '#panels' %li = link_to 'Alerts', '#alerts' %li = link_to 'Forms', '#forms' %li = link_to 'Files', '#file' %li = link_to 'Markdown', '#markdown' %h2#blocks Blocks %h4 %code .gray-content-block .gray-content-block.middle-block %h4 Normal block inside content = lorem .gray-content-block.second-block %h4 Second block = lorem %h4 %code .cover-block %br .cover-block .avatar-holder = image_tag avatar_icon('admin@example.com', 90), class: "avatar s90", alt: '' .cover-title John Smith .cover-desc = lorem .cover-controls = link_to '#', class: 'btn btn-gray' do = icon('pencil') = link_to '#', class: 'btn btn-gray' do = icon('rss') %h2#lists Lists %h4 %code .content-list %ul.content-list %li One item %li One item %li One item %h4 %code .well-list %ul.well-list %li One item %li One item %li One item %h4 %code .panel .well-list .panel.panel-default .panel-heading Your list %ul.well-list %li One item %li One item %li One item %h4 %code .bordered-list %ul.bordered-list %li One item %li One item %li One item %h2#tables Tables .example %table.table %thead %tr %th # %th First Name %th Last Name %th Username %tbody %tr %td 1 %td Mark %td Otto %td @mdo %tr %td 2 %td Jacob %td Thornton %td @fat %tr %td 3 %td Larry %td the Bird %td @twitter %h2#navs Navigation %h4 %code .center-top-menu .example %ul.center-top-menu %li.active %a Open %li %a Closed %h4 %code .btn-group.btn-group-next .example %div.btn-group.btn-group-next %a.btn.active Open %a.btn Closed %h4 %code .nav.nav-tabs .example %ul.nav.nav-tabs %li.active %a Open %li %a Closed %h2#buttons Buttons .example %button.btn.btn-default{:type => "button"} Default %button.btn.btn-gray{:type => "button"} Gray %button.btn.btn-primary{:type => "button"} Primary %button.btn.btn-success{:type => "button"} Success %button.btn.btn-info{:type => "button"} Info %button.btn.btn-warning{:type => "button"} Warning %button.btn.btn-danger{:type => "button"} Danger %button.btn.btn-link{:type => "button"} Link %h2#panels Panels .row .col-md-6 .panel.panel-success .panel-heading Success .panel-body = lorem .panel.panel-primary .panel-heading Primary .panel-body = lorem .panel.panel-info .panel-heading Info .panel-body = lorem .col-md-6 .panel.panel-warning .panel-heading Warning .panel-body = lorem .panel.panel-danger .panel-heading Danger .panel-body = lorem %h2#alert Alerts .row .col-md-6 .alert.alert-success = lorem .alert.alert-primary = lorem .alert.alert-info = lorem .col-md-6 .alert.alert-warning = lorem .alert.alert-danger = lorem %h2#forms Forms %h4 %code form.horizontal-form %form.form-horizontal .form-group %label.col-sm-2.control-label{:for => "inputEmail3"} Email .col-sm-10 %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/ .form-group %label.col-sm-2.control-label{:for => "inputPassword3"} Password .col-sm-10 %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/ .form-group .col-sm-offset-2.col-sm-10 .checkbox %label %input{:type => "checkbox"}/ Remember me .form-group .col-sm-offset-2.col-sm-10 %button.btn.btn-default{:type => "submit"} Sign in %h4 %code form %form .form-group %label{:for => "exampleInputEmail1"} Email address %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/ .form-group %label{:for => "exampleInputPassword1"} Password %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/ .checkbox %label %input{:type => "checkbox"}/ Remember me %button.btn.btn-default{:type => "submit"} Sign in %h2#file File %h4 %code .file-holder - blob = Snippet.new(content: "Wow\nSuch\nFile") .example .file-holder .file-title Awesome file .file-actions .btn-group %a.btn Edit %a.btn.btn-danger Remove .file-contenta.code = render 'shared/file_highlight', blob: blob %h2#markdown Markdown %h4 %code .md or .wiki and others Markdown rendering has a bit different css and presented in next UI elements: %ul %li comment %li issue, merge request description %li wiki page %li help page You can check how markdown rendered at #{link_to 'Markdown help page', help_page_path("markdown", "markdown")}.