Settings: add descriptions to settings sections

_inc/client/discussion/index.jsx

@@ -3,10 +3,12 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule, getModuleOverride } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode, isCurrentUserLinked } from 'state/connection';
@@ -44,6 +46,12 @@ export class Discussion extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Open your site to comments and invite subscribers to get alerts about your latest work.' ) }
+					className="jp-settings-description"
+				/>
+
 				<Comments
 					{ ...commonProps }
 					isModuleFound={ this.props.isModuleFound }

_inc/client/security/index.jsx

@@ -4,10 +4,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import get from 'lodash/get';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode } from 'state/connection';
@@ -82,6 +84,12 @@ export class Security extends Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Keep your site safe with state-of-the-art security and receive notifications of technical problems.' ) }
+					className="jp-settings-description"
+				/>
+
 				{ foundBackups && <BackupsScan { ...commonProps } /> }
 				{ foundMonitor && <Monitor { ...commonProps } /> }
 				{ foundAkismet &&

_inc/client/settings/index.jsx

@@ -8,12 +8,12 @@ import { translate as __ } from 'i18n-calypso';
  * Internal dependencies
  */
 import Discussion from 'discussion';
-import Security from 'security/index.jsx';
+import Security from 'security';
 import Traffic from 'traffic';
-import Writing from 'writing/index.jsx';
-import Sharing from 'sharing/index.jsx';
-import SearchableModules from 'searchable-modules/index.jsx';
-import Privacy from 'privacy/index.jsx';
+import Writing from 'writing';
+import Sharing from 'sharing';
+import SearchableModules from 'searchable-modules';
+import Privacy from 'privacy';
 
 export default class extends React.Component {
 	static displayName = 'SearchableSettings';

_inc/client/settings/style.scss

@@ -16,4 +16,11 @@
 	.dops-search.is-expanded-to-container {
 		height: 46px;
 	}
-}
+}
+
+.dops-card.jp-settings-description {
+	margin: 24px 0 8px;
+	padding: 0;
+	background: none;
+	box-shadow: none;
+}

_inc/client/sharing/index.jsx

@@ -3,10 +3,12 @@
  */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode, isCurrentUserLinked, getConnectUrl } from 'state/connection';
@@ -51,6 +53,12 @@ class Sharing extends Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Share your content on social media and increase audience engagement.' ) }
+					className="jp-settings-description"
+				/>
+
 				{
 					foundPublicize && (
 						<Publicize

_inc/client/traffic/index.jsx

@@ -3,10 +3,12 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule, getModuleOverride } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode } from 'state/connection';
@@ -64,6 +66,12 @@ export class Traffic extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Maximize your site’s visibility in search engines and view traffic stats in real time.' ) }
+					className="jp-settings-description"
+				/>
+
 				{
 					foundSearch && (
 						<Search

_inc/client/writing/index.jsx

@@ -4,11 +4,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { translate as __ } from 'i18n-calypso';
-import Card from 'components/card';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { userCanManageModules } from 'state/initial-state';
@@ -71,6 +71,12 @@ export class Writing extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Compose content the way you want to and streamline your publishing experience.' ) }
+					className="jp-settings-description"
+				/>
+
 				{
 					this.props.isModuleFound( 'masterbar' ) && ! this.props.masterbarIsAlwaysActive && (
 						<Masterbar connectUrl={ this.props.connectUrl } { ...commonProps } />