diff --git a/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json
new file mode 100644
index 0000000000000..c5587144f9f9f
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/inateeg-0302card_2018-03-21-20-56.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": ",",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "inateeg@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/last-install.flag b/common/last-install.flag
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/common/npm-local/last-install.flag b/common/npm-local/last-install.flag
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index f04b8bc98f117..67bc5368b99ca 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -274,7 +274,6 @@ $ms-DocumentCardActivity-personaTextGutter: 8px;
   font-size: $ms-font-size-s;
 }
 
-
 /** Title **/
 $DocumentCard-title-lineHeight: 21px;
 .title {
@@ -286,4 +285,30 @@ $DocumentCard-title-lineHeight: 21px;
   line-height: $DocumentCard-title-lineHeight;
   overflow: hidden;
   word-wrap: break-word;
-}
\ No newline at end of file
+}
+
+.secondaryTitle {
+  padding: 8px 16px;
+  display: block;
+  @include ms-font-m;
+  color: $ms-color-neutralSecondary;
+  line-height: 18px;
+  overflow: hidden;
+  word-wrap: break-word;
+  height: 45px;
+}
+
+.logo {
+  font-size: 32px;
+  color: $ms-color-themePrimary;
+  display: block;
+  @include ms-padding(16px, 16px, 0, 16px);
+}
+
+.status {
+  @include ms-margin(8px, 16px, 8px, 16px);
+  @include ms-font-m;
+  color: $ms-color-neutralPrimary;
+  background-color: $ms-color-neutralLighter;
+  height: 32px;
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
index 8c6cc15d49aa1..3aaa585623568 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.types.ts
@@ -5,6 +5,8 @@ import { DocumentCardPreview } from './DocumentCardPreview';
 import { DocumentCardLocation } from './DocumentCardLocation';
 import { DocumentCardActivity } from './DocumentCardActivity';
 import { DocumentCardActions } from './DocumentCardActions';
+import { DocumentCardLogo } from './DocumentCardLogo';
+import { DocumentCardStatus } from './DocumentCardStatus';
 import { PersonaInitialsColor } from '../../Persona';
 import { ImageFit } from '../../Image';
 import { IButtonProps } from '../../Button';
@@ -144,6 +146,12 @@ export interface IDocumentCardPreviewImage {
    * If provided, icon will be rendered instead of image.
    */
   previewIconProps?: IIconProps;
+
+  /**
+   * The props for the preview icon container classname.
+   * If provided, icon container classname will be used..
+   */
+  previewIconContainerClass?: string;
 }
 
 export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle> {
@@ -162,6 +170,12 @@ export interface IDocumentCardTitleProps extends React.Props<DocumentCardTitle>
    * @defaultvalue true
    */
   shouldTruncate?: boolean;
+
+  /**
+   * Whether show as title as secondary title style such as smaller font and lighter color.
+   * @defaultvalue false
+   */
+  showAsSecondaryTitle?: boolean;
 }
 
 export interface IDocumentCardLocationProps extends React.Props<DocumentCardLocation> {
@@ -247,3 +261,35 @@ export interface IDocumentCardActionsProps extends React.Props<DocumentCardActio
    */
   views?: Number;
 }
+
+export interface IDocumentCardLogoProps extends React.Props<DocumentCardLogo> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: () => void;
+  /**
+   * Describes DocumentCard Logo badge.
+   */
+  logoIcon: string;
+
+  /**
+   * Describe Logo name, optional.
+   */
+  logoName?: string;
+}
+
+export interface IDocumentCardStatusProps extends React.Props<DocumentCardStatus> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: () => void;
+  /**
+   * Describes DocumentCard status icon.
+   */
+  statusIcon?: string;
+
+  /**
+   * Describe status information. Required field.
+   */
+  status: string;
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx
new file mode 100644
index 0000000000000..2824683bcd295
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLogo.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { BaseComponent, css } from '../../Utilities';
+import { IDocumentCardLogoProps } from './DocumentCard.types';
+import { Icon } from '../../Icon';
+import * as stylesImport from './DocumentCard.scss';
+const styles: any = stylesImport;
+
+export class DocumentCardLogo extends BaseComponent<IDocumentCardLogoProps, any> {
+  public render() {
+    const { logoIcon } = this.props;
+
+    return (
+      <div className={ css('ms-DocumentCardLogo', styles.logo) }>
+        <Icon iconName={ logoIcon } />
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
index 0a875ffa7f05e..11dd49b7b1862 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.tsx
@@ -33,6 +33,9 @@ export class DocumentCardPage extends React.Component<IComponentDemoPageProps, {
               <p>
                 This example shows a couple of optional abilities, including being able to have a card represent multiple items, being able to expose up to three relevant commands, and showing the number of views in the bottom right corner.
               </p>
+              <p>
+                Also show a card with Logo, text preview and status that is used for Conversation card.
+              </p>
               <DocumentCardCompleteExample />
             </ExampleCard>
             <ExampleCard title='DocumentCard with compact layout ' code={ DocumentCardCompactExampleCode }>
@@ -80,7 +83,7 @@ export class DocumentCardPage extends React.Component<IComponentDemoPageProps, {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DocumentCardStatus}
+            { ...DocumentCardStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index 36e1c3dd3214d..704d3fed94dd9 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -44,11 +44,12 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
   }
 
   private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    const { width, height, imageFit, previewIconProps } = previewImage;
+    const { width, height, imageFit, previewIconProps, previewIconContainerClass } = previewImage;
+    const iconContainerClass = previewIconContainerClass ? previewIconContainerClass : 'ms-DocumentCardPreview-iconContainer';
 
     if (previewIconProps) {
       return (
-        <div className={ css('ms-DocumentCardPreview-iconContainer', styles.previewIconContainer) } style={ { width: width, height: height } } >
+        <div className={ css(iconContainerClass, styles.previewIconContainer) } style={ { width: width, height: height } } >
           <Icon { ...previewIconProps } />
         </div>
       );
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
new file mode 100644
index 0000000000000..127222419f41f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardStatus.tsx
@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import {
+  BaseComponent,
+  autobind,
+  css
+} from '../../Utilities';
+import { IDocumentCardStatusProps } from './DocumentCard.types';
+import * as stylesImport from './DocumentCard.scss';
+import { Icon } from '../../Icon';
+const styles: any = stylesImport;
+
+export class DocumentCardStatus extends BaseComponent<IDocumentCardStatusProps, any> {
+  constructor(props: IDocumentCardStatusProps) {
+    super(props);
+  }
+
+  public render() {
+    const { statusIcon, status } = this.props;
+    const iconProps = {
+      iconName: statusIcon, styles: {
+        root: { padding: '8px' }
+      }
+    };
+    return (
+      <div className={ css('ms-DocumentCardStatus', styles.status) }>
+        { statusIcon && <Icon { ...iconProps } /> }
+        { status }
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index cdc913066fd40..05891cd4f58a5 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -9,6 +9,7 @@ import {
 } from '../../Utilities';
 import { IDocumentCardTitleProps } from './DocumentCard.types';
 import * as stylesImport from './DocumentCard.scss';
+
 const styles: any = stylesImport;
 
 export interface IDocumentCardTitleState {
@@ -19,6 +20,10 @@ export interface IDocumentCardTitleState {
 const TRUNCATION_SEPARATOR = '&hellip;';
 const TRUNCATION_MINIMUM_LENGTH = 40; // This is the length we know can fit into the min width of DocumentCard.
 const TRUNCATION_MAXIMUM_LENGTH = 90 - TRUNCATION_SEPARATOR.length;
+
+// This is the length we know can fit into the min width 2 lines of DocumentCard.
+const TRUNCATION_MINI_LENGTH_SECONDARY = 80;
+const TRUNCATION_MAX_LENGTH_SECONDARY = 130 - TRUNCATION_SEPARATOR.length;
 const TRUNCATION_FIRST_PIECE_LONGER_BY = 10;
 const TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;
 
@@ -38,8 +43,9 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public componentDidMount() {
-    const { title, shouldTruncate } = this.props;
-    if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) {
+    const { title, shouldTruncate, showAsSecondaryTitle } = this.props;
+    const miniLength = showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
+    if (shouldTruncate && title && title.length > miniLength) {
       if (this._doesTitleOverflow()) {
         this._startTruncation(this.props);
       }
@@ -51,7 +57,8 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
     this._events.off(window, 'resize');
     this._isTruncated = false;
 
-    if (newProps.shouldTruncate && newProps.title && newProps.title.length > TRUNCATION_MINIMUM_LENGTH) {
+    const miniLength = newProps.showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
+    if (newProps.shouldTruncate && newProps.title && newProps.title.length > miniLength) {
       this._startTruncation(newProps);
       this._events.on(window, 'resize', this._updateTruncation);
     }
@@ -65,37 +72,42 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public render() {
-    const { title, shouldTruncate } = this.props;
+    const { title, shouldTruncate, showAsSecondaryTitle } = this.props;
     const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
 
     let documentCardTitle;
     if (shouldTruncate && this._isTruncated) {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._titleElement } title={ title }>{ truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }</div>
+        <div className={ css('ms-DocumentCardTitle', showAsSecondaryTitle ? styles.secondaryTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+          { truncatedTitleFirstPiece }&hellip;{ truncatedTitleSecondPiece }
+        </div>
       );
     } else {
       documentCardTitle = (
-        <div className={ css('ms-DocumentCardTitle', styles.title) } ref={ this._titleElement } title={ title }>{ title }</div>
+        <div className={ css('ms-DocumentCardTitle', showAsSecondaryTitle ? styles.secondaryTitle : styles.title) } ref={ this._resolveRef('_titleElement') } title={ title }>
+          { title }
+        </div>
       );
     }
-
     return documentCardTitle;
   }
 
   private _startTruncation = (props: IDocumentCardTitleProps): void => {
     const originalTitle = props.title;
     this._isTruncated = false;
+    const miniLength = props.showAsSecondaryTitle ? TRUNCATION_MINI_LENGTH_SECONDARY : TRUNCATION_MINIMUM_LENGTH;
+    const maxLength = props.showAsSecondaryTitle ? TRUNCATION_MAX_LENGTH_SECONDARY : TRUNCATION_MAXIMUM_LENGTH;
 
     // If the title is really short, there's no need to truncate it
-    if (originalTitle && originalTitle.length >= TRUNCATION_MINIMUM_LENGTH) {
+    if (originalTitle && originalTitle.length >= miniLength) {
 
       // Break the text into two pieces for assembly later
-      if (originalTitle.length > TRUNCATION_MAXIMUM_LENGTH) {
+      if (originalTitle.length > maxLength) {
         // The text is really long, so we can take a chunk out of the middle so the two pieces combine for the maximum length
         this._isTruncated = true;
         this.setState({
-          truncatedTitleFirstPiece: originalTitle.slice(0, TRUNCATION_MAXIMUM_LENGTH / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
-          truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (TRUNCATION_MAXIMUM_LENGTH / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
+          truncatedTitleFirstPiece: originalTitle.slice(0, maxLength / 2 + TRUNCATION_FIRST_PIECE_LONGER_BY),
+          truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - (maxLength / 2 - TRUNCATION_FIRST_PIECE_LONGER_BY))
         });
       } else {
         // The text is not so long, so we'll just break it into two pieces
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
index 2645db4b70d70..dd04ff54c3fac 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
@@ -54,6 +54,16 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
       ]
     };
 
+    const previewOutlookUsingIcon: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          previewIconProps: { iconName: 'OutlookLogo', styles: { root: { fontSize: 42, color: '#0078d7' } } },
+          previewIconContainerClass: 'ms-DocumentCardPreview-iconContainer2',
+          width: 144
+        }
+      ]
+    };
+
     return (
       <div>
         <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com'>
@@ -109,6 +119,24 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
             />
           </div>
         </DocumentCard>
+        <p />
+        <DocumentCard type={ DocumentCardType.compact } onClickHref='http://bing.com'>
+          <DocumentCardPreview { ...previewOutlookUsingIcon } />
+          <div className='ms-DocumentCard-details'>
+            <DocumentCardTitle
+              title='Conversation about anual report from SharePoint conference'
+              shouldTruncate={ true }
+            />
+            <DocumentCardActivity
+              activity='Sent a few minutes ago'
+              people={
+                [
+                  { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale }
+                ]
+              }
+            />
+          </div>
+        </DocumentCard>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index 73b2356cb87f6..494caa0a604a9 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -6,7 +6,10 @@ import {
   DocumentCardLocation,
   DocumentCardPreview,
   DocumentCardTitle,
-  IDocumentCardPreviewProps
+  DocumentCardLogo,
+  DocumentCardStatus,
+  IDocumentCardPreviewProps,
+  IDocumentCardLogoProps
 } from 'office-ui-fabric-react/lib/DocumentCard';
 import { ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { TestImages } from '../../../common/TestImages';
@@ -84,6 +87,10 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
       ]
     };
 
+    const logoProps: IDocumentCardLogoProps = {
+      logoIcon: 'OutlookLogo'
+    };
+
     return (
       <div>
         <DocumentCard
@@ -137,6 +144,62 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
             views={ 432 }
           />
         </DocumentCard>
+        <p />Card Logo, Text Preview CardStatus are used on below examples.<p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <div className='ms-ConversationTile-TitlePreviewArea' >
+            <DocumentCardTitle title='Conversation about anual report a very long long name, Title should be truncated on the long name.' shouldTruncate={ true } />
+            <DocumentCardTitle title='This is the email content preview, please feel free to give feedback. SharePoint Site Acitivity add conversation card! This is the last.' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+            <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          </div>
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
+        <p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <div className='ms-ConversationTile-TitlePreviewArea' >
+            <DocumentCardTitle title='Conversation about anual Report' />
+            <DocumentCardTitle title='This is the email content preview, help.' showAsSecondaryTitle={ true } />
+            <DocumentCardStatus statusIcon='attach' status=' 3 Attachments' />
+          </div>
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
+        <p />
+        <DocumentCard onClickHref='http://bing.com'>
+          <DocumentCardLogo { ...logoProps } />
+          <div className='ms-ConversationTile-TitlePreviewArea' >
+            <DocumentCardTitle title='Conversation about anual report' shouldTruncate={ true } />
+            <DocumentCardTitle title='This is the email content preview, please feel free to give!' shouldTruncate={ true } showAsSecondaryTitle={ true } />
+          </div>
+          <DocumentCardActivity
+            activity='Sent March 13, 2018'
+            people={
+              [
+                { name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale },
+                { name: 'Roko Kolar', profileImageSrc: '', initials: 'JH' },
+                { name: 'Greta Lundberg', profileImageSrc: TestImages.personaFemale }
+              ]
+            }
+          />
+        </DocumentCard>
         <p />
         <DocumentCard onClickHref='http://bing.com'>
           <DocumentCardPreview { ...previewPropsUsingIcon } />
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
index f150ec2e88415..8e7118a890d0a 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Example.scss
@@ -4,4 +4,12 @@
   .ms-DocumentCardPreview-iconContainer {
     background-color: $ms-color-themePrimary;
   }
+
+  .ms-DocumentCardPreview-iconContainer2 {
+    background-color: $ms-color-neutralLighterAlt;
+  }
+
+  .ms-ConversationTile-TitlePreviewArea {
+    height: 182px;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
index c8b71737fb487..88e75b458727e 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/index.ts
@@ -5,3 +5,5 @@ export * from './DocumentCardActivity';
 export * from './DocumentCardLocation';
 export * from './DocumentCardPreview';
 export * from './DocumentCardTitle';
+export * from './DocumentCardLogo';
+export * from './DocumentCardStatus';