   render: ->
     footer = @renderFooterButtons?() or @renderGenericFooter()
     {pinned} = @props
-    <CardBody className={@state.classNames.join(' ')} footer={footer} pinned={pinned}>
+    classNames = 'task-step'
+    classNames += ' tutor-ui-banner' if @state?.hasBanner
+    <CardBody className={classNames} footer={footer} pinned={pinned}>
       {@renderBody()}
       {@renderGroup?()}
     </CardBody>

React = require 'react'
BS = require 'react-bootstrap'

{TaskActions} = require '../../flux/task'
{TaskStepActions, TaskStepStore} = require '../../flux/task-step'
LoadableItem = require '../loadable-item'
{CardBody} = require '../pinned-header-footer-card/sections'
_ = require 'underscore'

module.exports =

  getInitialState: ->
    classNames: ['task-step']

  renderGenericFooter: ->
    buttonClasses = '-continue'

  # If the rendered content has a matching element that will be used as the banner,
  # add a "with-ui-banner" css class.  This way the component can be styled to match
  setBannerClass: ->
    bannerMissing = not @state?.hasBanner
    if bannerMissing and this.getDOMNode().querySelector(".note:first-child[data-has-label]")
      @setState hasBanner: true
