               @span class: 'badge', '1234'
         '''
 
+      @section class: 'bordered', 'data-name': 'popover-list', =>
+        @h1 class: 'section-heading', 'Popover List'
+        @p => @raw '''
+          A <code>.popover-list</code> is a <code>.select-list</code> that
+          is meant to popover the code for something like autocomplete.
+        '''
+
+        @h2 'Basic example with one item selected'
+        @exampleCode '''
+          @div class: 'select-list popover-list', =>
+            @div class: 'editor mini editor-colors', 'User types here..'
+            @ol class: 'list-group', =>
+              @li class: 'selected', 'one'
+              @li 'two'
+              @li 'three'
+        '''
+
       @section class: 'bordered', 'data-name': 'error-messages', =>
         @h1 class: 'section-heading', 'Error messages'
         @ul class: 'error-messages', outlet: 'errorMessages'

          @span ' '
          @span class: 'highlight-error', 'Error'
        '''
      @section class: 'bordered', 'data-name': 'git', =>
        @h1 class: 'section-heading', 'Git related classes'
        @p => @raw 'Often we need git related classes to specify status.'

          @span class: 'status-modified icon icon-diff-modified', ''
          @span class: 'status-removed icon icon-diff-removed', ''
          @span class: 'status-renamed icon icon-diff-renamed', ''
        '''

      @section class: 'bordered', 'data-name': 'buttons', =>
        @h1 class: 'section-heading', 'Buttons'
        @p => @raw 'Buttons are similar to bootstrap buttons'

        @h2 'Standalone buttons'
        @exampleCode '''
          @p =>
            @button class: 'btn', 'Button'
          @p =>
            @button class: 'btn btn-sm', 'Small Button'
          @p =>
            @button class: 'btn btn-lg', 'Large Button'
        '''

        @h2 'Button Groups'
        @exampleCode '''
          @div =>
            @div class: 'btn-group', =>
              @button class: 'btn', 'One'
              @button class: 'btn', 'Two'
              @button class: 'btn', 'Three'
          @div =>
            @div class: 'btn-group btn-group-sm', =>
              @button class: 'btn', 'One'
              @button class: 'btn', 'Two'
              @button class: 'btn', 'Three'
          @div =>
            @div class: 'btn-group btn-group-lg', =>
              @button class: 'btn', 'One'
              @button class: 'btn', 'Two'
              @button class: 'btn', 'Three'
        '''

        @h2 'Button Toggle Groups'
        @exampleCode '''
          @div =>
            @div class: 'btn-group btn-group-toggle', =>
              @button class: 'btn selected', 'One'
              @button class: 'btn', 'Two'
              @button class: 'btn', 'Three'
          @div =>
            @div class: 'btn-group btn-group-toggle', =>
              @button class: 'btn', 'One'
              @button class: 'btn selected', 'Two'
              @button class: 'btn', 'Three'
          @div =>
            @div class: 'btn-group btn-group-toggle', =>
              @button class: 'btn', 'One'
              @button class: 'btn', 'Two'
              @button class: 'btn selected', 'Three'
          @div =>
            @div class: 'btn-group btn-group-toggle', =>
              @button class: 'btn selected', 'One'
              @button class: 'btn selected', 'Two'
              @button class: 'btn', 'Three'
        '''

      @section class: 'bordered', 'data-name': 'tool-panel', =>
