diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss
index 36a8529129..405c977d4a 100644
--- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss
@@ -1,6 +1,7 @@
 @import "wagtailadmin/scss/variables.scss";
 @import "wagtailadmin/scss/mixins.scss";
 @import "wagtailadmin/scss/grid.scss";
+@import "wagtailadmin/scss/components/streamfield.scss";
 
 .page-editor {
     .content-wrapper{
@@ -186,364 +187,27 @@
         }
     }
 
+    /* cursory styling for streamfield. Main styling in components/streamfield.scss */
     &.stream-field {
-        padding:0;
-
-        label{
-            white-space: nowrap;
-        }
+        padding-left:0;
+        padding-right:0;
 
         &.required .field > label:after{
             display:none;
         }
 
+        /* Undo column widths usually applied to the contents of a field panel */
         > fieldset{
-            @include column(12);
+            width:100%;
             max-width:none;
-            padding-left:0;
-            padding-right:0;
-        }
-        
-        .fields > li > .field > label{
-            display:none;
         }
 
-        /* Despite "BlockField" being generic and available for use outside StreamField,
-        this is the most unique handle available to undo the width set on .field-content 
-        everywhere else in wagtail. If other types of field become available for use as 
-        a direct child of Streamfield, this will need updating */
         .block_field > .field-content{ 
             width:100%;
             display:block;
         }
-
-        .sequence{
-            position:relative;
-            @include clearfix;
-        }
-
-        .sequence-member{
-            @include clearfix;
-            position:relative;
-
-            .sequence-member-inner{
-                @include clearfix;
-                position:relative;
-                padding:1.5em 50px;
-
-                > .sequence .sequence-inner{
-                    @include column(10);
-                    padding-left:0;
-                    padding-right:0;
-                }
-
-                > .struct-block > label,
-                > .char_field > label,
-                .sequence > label{
-                    /* TODO: tidy this */
-                    /*
-                    @include transition(opacity 0.2s ease);
-                    opacity:0;
-                    display:block;
-                    font-style:italic;
-                    font-weight:normal;                    
-                    position:absolute;
-                    top:1em; right:4em;
-                    float:none;
-                    width:auto;
-                    padding:0;
-                    color:$color-grey-2;
-                    line-height:2.2em;
-                    */
-                    display:none;
-                }
-            }
-
-            &:hover{
-                background-color:$color-input-focus;
-            }
-
-            &:hover .sequence-member-inner{
-                > .struct-block > label,
-                > .char_field > label,
-                .sequence > label{
-                    opacity:1;
-                }
-            }
-        }       
-
-        .struct-block > ul > li{ /* duplicates forms.scss ln.568 */
-            @include clearfix();
-            padding-top:0.5em;
-            padding-bottom:1.2em;
-        }
-
-        .struct-block .widget-text_input > label,
-        .struct-block .widget-textarea > label,
-        .struct-block .widget-admin_auto_height_text_input > label{
-            display:none;
-        }
-
-        .widget-admin_image_chooser{
-            label{
-                display:none;
-            }
-            .field-content{
-                display:block;
-                float:none;
-                width:100%;
-                text-align:center;
-                max-width:500px;
-                margin:auto;
-                border:1px solid $color-grey-4;
-                padding:1em;
-            }
-            .chooser{
-                .chosen{
-                    padding:0;
-                }
-                .unchosen{
-                    &:before{
-                        float:none;
-                        font-size:4em;
-                        margin:0;
-                    }
-                }
-                .preview-image{
-                    float:none;
-                    margin:0;
-                }
-            }
-        }
-
-        /*
-        Text inputs, rich text fields and textareas that are direct children of streamfield
-        should be borderless and full-width
-        */
-        .stream-member-inner > .widget-text_input > .field-content > .input > input,
-        .stream-member-inner > .field > .field-content > .input > .richtext,
-        .stream-member-inner > .field > .field-content > .input > textarea{
-            border:0;
-            padding:0;
-            background-color:transparent;
-            max-width:1024px;
-        }
-
     }
 
-    /* Object controls */
-    .stream-controls, 
-    .list-controls{
-        @include border-radius(5px);
-        @include transition(opacity 0.2s ease);
-        opacity:0;
-        visibility:hidden;
-        position:absolute;
-        top:-1.5em; right:1em;
-        z-index:1;
-        overflow:visible;
-        background-color:$color-input-focus;
-        padding:0.2rem 1em;
-
-        h3{
-            margin:0;
-            text-transform:uppercase;
-            font-size:0.7rem;
-            display:inline-block;
-            margin-right:1em;
-        }
-
-        .buttons{
-            display:inline-block;
-            opacity:0.4;  
-        }
-        &:hover .buttons{
-            opacity:1;
-        }
-
-        button.icon.text-replace{
-            @include border-radius(50%);
-            width:1.4rem;
-            height:1.4rem;
-
-            &:before{
-                line-height:1.3em;
-                font-size:0.9rem;
-            }
-        }
-       
-        .disabled{
-            display:none;
-        }       
-    }
-
-    /* Menu of other blocks to be added at each position */
-    .stream-menu{
-        @include transition(all 0.2s ease);
-        @include box-shadow(inset 0 0 45px rgba(0,0,0,0.3));
-        position:relative;
-        background-color:$color-grey-1;
-        opacity:1;
-        z-index:5;
-
-        .toggle{
-            @include transition(color 0.2s ease);
-            @include border-radius(50px);
-            position:absolute;
-            top:-0.5em;
-            left:0;
-            right:0;
-            margin:0 auto;
-            cursor:pointer;
-            font-size:1.7em;
-            width:1em;
-            height:1em;
-            display:block;
-            z-index:5;
-            color:$color-grey-1;
-            background-color:white;
-
-            span{
-                @include visuallyhidden();
-            }
-
-            &:before{
-                @include transform(rotate(-45deg));
-                position:absolute;
-                font-family:wagtail;
-                content:"B";
-                line-height:1em;
-                text-align:center;
-            }
-        }
-
-        .stream-menu-inner{
-            max-width:50em;
-            margin: auto;
-            overflow:hidden;
-        }
-
-        ul{
-            @include transition(all 0.2s ease);
-            @include transform(scale(1));
-            @include clearfix;
-            visibility:visible;
-            opacity:1;
-            padding:1em 1em 0 1em;
-            overflow:hidden;
-        }
-
-        li{
-            @include column(3);
-            padding-bottom:$grid-gutter-width;
-            padding-left:0;
-            padding-right:0;
-
-            &:nth-child(4n+1){
-                clear:left;
-            }
-        }
-        
-
-        button{
-            @include transition(all 0.2s ease);
-            background-color:transparent;
-            border:0;
-            color:darken($color-grey-3, 5%);
-            height:auto;
-            display:block;
-            width:100%;
-            padding:0 0 0.5em 0;
-            outline:$color-teal;
-
-            span{
-                text-transform:none;
-                white-space: pre-wrap;
-                width:100%;
-                display:block;
-                overflow:hidden;
-                padding:0 1em;
-                box-sizing: border-box;
-            }
-
-            &:before{
-                display:block;
-                font-family:wagtail;
-                font-size:2em;
-                width:100%;
-                height:2em;
-                line-height:2em;
-                text-align:center;
-            }
-
-            &:hover,
-            &:focus{
-                background-color:$color-teal;
-                color:white;
-            }
-        }
-
-
-        &.stream-menu-closed{
-            @include box-shadow(none);
-
-            .stream-menu-inner ul{
-                @include transform(scale(0.9));
-                opacity:0;
-            }
-
-            .toggle{
-                color:$color-grey-3;
-                background-color:white;
-                &:before{
-                    @include transform(rotate(0deg));
-                }
-                &:focus{
-                    color:$color-teal;
-                }
-            }        
-
-            &:hover{
-                border-top-color:$color-teal;
-
-                .toggle{
-                    color:$color-teal;
-                }
-            }   
-        }
-
-        @media screen and (min-width: $breakpoint-mobile){
-            li{
-                @include column(2);
-                &:nth-child(4n+1){
-                    clear:none;
-                }
-                &:nth-child(6n+1){
-                    clear:left;
-                }
-            }
-        }
-    }
-    .sequence-member .stream-menu{
-        margin:auto auto 0em auto;
-    }
-    .sequence-member .stream-menu-closed{
-        opacity:0;
-        visibility:hidden;
-    }
-    .sequence-member:hover{
-        .stream-controls, 
-        .list-controls{
-            visibility:visible;
-            opacity:1;
-        }
-        .stream-menu{
-            visibility:visible;
-            opacity:1;
-        }
-    }
-
-
     /* special panel for the publishing fields, requires a bit more pizzazz */
     &.publishing{
         h2:before{
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list.html
index dc53caf671..0049dc98e7 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list.html
@@ -1,6 +1,14 @@
 {% extends "wagtailadmin/block_forms/sequence.html" %}
 {% load i18n %}
 
+{% block sequence_type_class %}list{% endblock %}
+
+{% block header %}
+    {% if help_text %}
+        <div class="object-help help">{{ help_text }}</div>
+    {% endif %}
+{% endblock %}
+
 {% block footer %}
     <button type="button" id="{{ prefix }}-add">{% trans "Add another" %}</button>
 {% endblock %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
index 22447f9eae..c487592f84 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/list_member.html
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block header_controls %}
-    <div class="list-controls">
+    <div class="stream-controls list-controls">
         <button type="button" id="{{ prefix }}-moveup" title="{% trans 'Move up' %}" class="icon text-replace icon-order-up button-secondary button-nostroke">{% trans 'Move up' %}</button>
         <button type="button" id="{{ prefix }}-movedown" title="{% trans 'Move down' %}" class="icon text-replace icon-order-down button-secondary button-nostroke">{% trans 'Move down' %}</button>
         <button type="button" id="{{ prefix }}-delete" title="{% trans 'Delete' %}" class="icon text-replace no icon-bin button-secondary button-nostroke">{% trans 'Delete' %}</button>
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html
index a123832070..9be1681224 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/sequence.html
@@ -12,11 +12,11 @@
 
 
 {% endcomment %}
-<div class="sequence">
+<div class="sequence-container sequence-type-{% block sequence_type_class %}{% endblock %}">
     <input type="hidden" name="{{ prefix }}-count" id="{{ prefix }}-count" value="{{ list_members_html|length }}">
     
     {% block header %}{% endblock %}
-    <div class="sequence-inner">
+    <div class="sequence-container-inner">
         <ul id="{{ prefix }}-list" class="sequence">
             {% for list_member_html in list_members_html %}
                 {{ list_member_html }}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html
index 53fa382b21..7af90c1a30 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream.html
@@ -1,4 +1,7 @@
-{% extends "wagtailadmin/block_forms/sequence.html" %}
+{% extends "wagtailadmin/block_forms/sequence.html" %}]
+
+{% block sequence_type_class %}list{% endblock %}
+
 {% block header %}
     {% if list_members_html %}
         {% include "wagtailadmin/block_forms/stream_menu.html" with menu_id=prefix|add:"-prependmenu" state="closed" %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
index 89b4cfd66d..9c69f01aee 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/stream_member.html
@@ -16,8 +16,6 @@
     </div>
 {% endblock %}
 
-{% block sequence_member_inner_classes %}stream-member-inner{% endblock %}
-
 {% block footer_controls %}
     {% include "wagtailadmin/block_forms/stream_menu.html" with menu_id=prefix|add:"-appendmenu" state="closed" %}
 {% endblock %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/struct.html b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/struct.html
index e511d25f99..22ba58de52 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/struct.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/block_forms/struct.html
@@ -2,7 +2,8 @@
     {% if help_text %}
         <div class="object-help help">{{ help_text }}</div>
     {% endif %}
-    <ul>
+
+    <ul class="fields">
         {% for child in children.values %}
             <li>
                 {% if child.block.label %}
diff --git a/wagtail/wagtailcore/blocks/list_block.py b/wagtail/wagtailcore/blocks/list_block.py
index 5f7a9ea2f9..0da38c2bc5 100644
--- a/wagtail/wagtailcore/blocks/list_block.py
+++ b/wagtail/wagtailcore/blocks/list_block.py
@@ -86,6 +86,7 @@ class ListBlock(Block):
         ]
 
         return render_to_string('wagtailadmin/block_forms/list.html', {
+            'help_text': getattr(self.meta, 'help_text', None),
             'prefix': prefix,
             'list_members_html': list_members_html,
         })