diff --git a/.travis.yml b/.travis.yml
index 652a7e0a41d..d0716ba9391 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -21,7 +21,7 @@ script:
   - |
     if [ ${TRAVIS_NODE_VERSION} = "10" ]
     then
-      cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | ${TRAVIS_BUILD_DIR}/node_modules/.bin/coveralls
+      cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | ${TRAVIS_BUILD_DIR}/node_modules/.bin/coveralls || exit 0
     fi
 
 jobs:
diff --git a/package.json b/package.json
index bacb4dd03ad..ec67bf4c188 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,10 @@
     "build": "node ./scripts/rollup/build.js",
     "build:storybook": "build-storybook -c packages/docs/.storybook -o .out",
     "pretest": "node scripts/test/clean.js",
-    "test": "npm-run-all --sequential test:jest test:karma test:combineCoverage",
-    "test:coveralls": "npm run test && cat ./coverage/lcov.info | coveralls",
+    "test": "npm-run-all --sequential test:jest test:karma",
     "test:karma": "karma start ./config/karma.conf.js --coverage",
     "test:jest": "jest --config=config/jest.config.js --coverage",
-    "test:combineCoverage": "nyc report -r text -r lcov",
+    "posttest": "nyc report -r text -r lcov || exit 0",
     "clean": "lerna clean --yes && node scripts/clean.js",
     "postversion": "node ./scripts/postversion/index.js",
     "prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{ts,tsx}\""
diff --git a/packages/main/__karma_snapshots__/AnalyticalCard.md b/packages/main/__karma_snapshots__/AnalyticalCard.md
index d4716f9b2e4..3e325c27b95 100644
--- a/packages/main/__karma_snapshots__/AnalyticalCard.md
+++ b/packages/main/__karma_snapshots__/AnalyticalCard.md
@@ -6,83 +6,86 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(AnalyticalCard) renderHeader={[Function: renderHeader]}>
-        <AnalyticalCard renderHeader={[Function: renderHeader]} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div className="AnalyticalCard-card---" style={[undefined]} title={[undefined]}>
-            <WithStyles(AnalyticalCardHeader) title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}}>
-              <AnalyticalCardHeader title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                <div onClick={[Function]} className="AnalyticalCardHeader-cardHeader---" title={[undefined]} style={[undefined]}>
-                  <div className="AnalyticalCardHeader-headerContent---">
-                    <div className="AnalyticalCardHeader-headerText---">
-                      <span>
+      <AnalyticalCard header={{...}} width="20rem">
+        <div className="AnalyticalCard--card---" style={{...}} title={[undefined]}>
+          <AnalyticalCardHeader title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" showIndicator={true} description="Description" onHeaderPress={{...}} counter={{...}} counterState="None" currency={{...}}>
+            <div onClick={[Function]} className="AnalyticalCardHeader--cardHeader---" title={[undefined]} style={[undefined]}>
+              <div className="AnalyticalCardHeader--headerContent---">
+                <div className="AnalyticalCardHeader--headerTitles---">
+                  <FlexBox justifyContent="SpaceBetween" wrap="NoWrap" alignItems="Stretch" direction="Row" displayInline={false} height="" width="">
+                    <div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentSpaceBetween--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap---" style={{...}} title={[undefined]} slot={[undefined]}>
+                      <div className="AnalyticalCardHeader--headerText---">
                         Title
-                      </span>
-                      <div className="AnalyticalCardHeader-subHeaderText---">
-                        Subtitle
                       </div>
+                      <WithStyles(Component) className="AnalyticalCardHeader--counter---" state="None" showDefaultIcon={false} icon={{...}}>
+                        <Component className="AnalyticalCardHeader--counter---" state="None" showDefaultIcon={false} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
+                          <div className="Component-objectStatus--- AnalyticalCardHeader--counter---" style={[undefined]} title={[undefined]} slot={[undefined]} />
+                        </Component>
+                      </WithStyles(Component)>
                     </div>
-                    <div className="AnalyticalCardHeader-kpiContent---">
-                      <div className="AnalyticalCardHeader-leftContent---">
-                        <div className="AnalyticalCardHeader-valueAndUnit--- AnalyticalCardHeader-good---">
-                          <div className="AnalyticalCardHeader-value---">
+                  </FlexBox>
+                  <div className="AnalyticalCardHeader--subHeaderText---">
+                    Subtitle
+                  </div>
+                </div>
+                <FlexBox direction="Row" className="AnalyticalCardHeader--kpiContent---" alignItems="End" displayInline={false} height="" justifyContent="Start" width="" wrap="NoWrap">
+                  <div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsEnd--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--kpiContent---" style={{...}} title={[undefined]} slot={[undefined]}>
+                    <FlexBox direction="Row" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="" wrap="NoWrap">
+                      <div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap---" style={{...}} title={[undefined]} slot={[undefined]}>
+                        <div className="AnalyticalCardHeader--valueAndUnit--- AnalyticalCardHeader--good---">
+                          <div className="AnalyticalCardHeader--value---">
                             Value
                           </div>
-                          <div className="AnalyticalCardHeader-indicatorAndUnit---">
-                            <div className="AnalyticalCardHeader-arrowIndicatorShape--- AnalyticalCardHeader-arrowDown--- AnalyticalCardHeader-good---" />
-                            <div className="AnalyticalCardHeader-unit---">
+                          <div className="AnalyticalCardHeader--indicatorAndUnit---">
+                            <div className="AnalyticalCardHeader--arrowIndicatorShape--- AnalyticalCardHeader--arrowDown--- AnalyticalCardHeader--good---" />
+                            <div className="AnalyticalCardHeader--unit---">
                               Unit
                             </div>
                           </div>
                         </div>
                       </div>
-                      <div className="AnalyticalCardHeader-targetAndDeviation---">
-                        <div>
-                          <Label for="">
-                            <ui5-label for="" class="">
+                    </FlexBox>
+                    <FlexBox direction="Row" wrap="NoWrap" className="AnalyticalCardHeader--targetAndDeviation---" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
+                      <div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--targetAndDeviation---" style={{...}} title={[undefined]} slot={[undefined]}>
+                        <FlexBox direction="Column" className="AnalyticalCardHeader--targetAndDeviationColumn---" wrap="NoWrap" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
+                          <div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionColumn--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--targetAndDeviationColumn---" style={{...}} title={[undefined]} slot={[undefined]}>
+                            <span>
                               Target
-                            </ui5-label>
-                          </Label>
-                          <div>
-                            <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
-                                Target
-                              </span>
-                            </Text>
+                            </span>
+                            <span className="AnalyticalCardHeader--targetAndDeviationValue---">
+                              Target
+                            </span>
                           </div>
-                        </div>
-                        <div className="AnalyticalCardHeader-deviation---">
-                          <Label for="">
-                            <ui5-label for="" class="">
+                        </FlexBox>
+                        <FlexBox direction="Column" className="AnalyticalCardHeader--targetAndDeviationColumn---" wrap="NoWrap" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
+                          <div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionColumn--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--targetAndDeviationColumn---" style={{...}} title={[undefined]} slot={[undefined]}>
+                            <span>
                               Deviation
-                            </ui5-label>
-                          </Label>
-                          <div>
-                            <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
-                                Deviation
-                              </span>
-                            </Text>
+                            </span>
+                            <span className="AnalyticalCardHeader--targetAndDeviationValue---">
+                              Deviation
+                            </span>
                           </div>
-                        </div>
+                        </FlexBox>
                       </div>
-                    </div>
-                    <div className="AnalyticalCardHeader-subHeaderText---">
-                      Description
-                    </div>
+                    </FlexBox>
                   </div>
+                </FlexBox>
+                <div className="AnalyticalCardHeader--description---">
+                  Description
                 </div>
-              </AnalyticalCardHeader>
-            </WithStyles(AnalyticalCardHeader)>
-            <div style={{...}}>
-              <Text renderWhitespace={false} wrapping={true} width={{...}}>
-                <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
-                  I&#39;m a content!
-                </span>
-              </Text>
+              </div>
             </div>
+          </AnalyticalCardHeader>
+          <div className="AnalyticalCard--content---">
+            <Text renderWhitespace={false} wrapping={true} width={{...}}>
+              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                I&#39;m a content!
+              </span>
+            </Text>
           </div>
-        </AnalyticalCard>
-      </WithStyles(AnalyticalCard)>
+        </div>
+      </AnalyticalCard>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts b/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
index ce31849c1cb..40d4e109b1a 100644
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
+++ b/packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
@@ -1,18 +1,20 @@
-import { fonts } from '@ui5/webcomponents-react-base';
+import { fonts, spacing } from '@ui5/webcomponents-react-base';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 
-const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
+const styles = ({ parameters }: JSSTheme) => ({
   card: {
     backgroundColor: parameters.sapUiTileBackground,
-    border: `1px solid ${parameters.sapUiTileBorderColor}`,
-    boxShadow: '0 0 0 1px rgba(0,0,0,0.15)',
+    // TODO There is a border mentioned in the specs, but this one looks weird.
+    // border: `0.625rem solid ${parameters.sapUiTileBorderColor}`,
+    boxShadow: parameters.sapUiShadowLevel0,
     borderRadius: '0.25rem',
     textAlign: 'start',
     overflow: 'hidden',
     position: 'relative',
-    width: '20rem',
-    fontFamily: fonts.sapUiFontFamily
-  }
+    fontFamily: fonts.sapUiFontFamily,
+    boxSizing: 'border-box'
+  },
+  content: spacing.sapUiContentPadding
 });
 
 export default styles;
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.karma.tsx b/packages/main/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
index fd554f38e9b..14e2f307d2d 100644
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
+++ b/packages/main/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
@@ -10,30 +10,27 @@ import { ValueState } from '../../lib/ValueState';
 
 use(matchSnapshot);
 
-const renderHeader = () => {
-  return (
-    <AnalyticalCardHeader
-      title="Title"
-      subTitle="Subtitle"
-      arrowIndicator={DeviationIndicator.Down}
-      indicatorState={ValueState.Success}
-      value="Value"
-      valueState={ValueState.Success}
-      unit="Unit"
-      target="Target"
-      deviation="Deviation"
-      loading={false}
-      showIndicator
-      description="Description"
-    />
-  );
-};
+const Header = (
+  <AnalyticalCardHeader
+    title="Title"
+    subTitle="Subtitle"
+    arrowIndicator={DeviationIndicator.Down}
+    indicatorState={ValueState.Success}
+    value="Value"
+    valueState={ValueState.Success}
+    unit="Unit"
+    target="Target"
+    deviation="Deviation"
+    showIndicator
+    description="Description"
+  />
+);
 
 // TODO Add more tests
 describe('Analytical Card', () => {
   it('Render without Crashing', () => {
     const wrapper = mountThemedComponent(
-      <AnalyticalCard renderHeader={renderHeader}>
+      <AnalyticalCard header={Header}>
         <Text>I'm a content!</Text>
       </AnalyticalCard>
     );
diff --git a/packages/main/src/components/AnalyticalCard/demo.stories.tsx b/packages/main/src/components/AnalyticalCard/demo.stories.tsx
index 9987430ed60..3b7f8718408 100644
--- a/packages/main/src/components/AnalyticalCard/demo.stories.tsx
+++ b/packages/main/src/components/AnalyticalCard/demo.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
+import { boolean, select, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
 import React from 'react';
@@ -10,23 +10,26 @@ import { ValueState } from '../../lib/ValueState';
 
 storiesOf('Components | Analytical Card', module).add('default', () => (
   <AnalyticalCard
-    renderHeader={() => (
+    width={text('width', '20rem')}
+    header={
       <AnalyticalCardHeader
-        title="Title"
-        subTitle="Subtitle"
+        title={text('title', 'Title')}
+        subTitle={text('subTitle', 'Subtitle')}
         arrowIndicator={select('arrowIndicator', DeviationIndicator, DeviationIndicator.Down)}
         indicatorState={select('indicatorState', ValueState, ValueState.Success)}
-        value="Value"
+        value={text('value', 'Value')}
         valueState={select('valueState', ValueState, ValueState.Success)}
-        unit="Unit"
-        target="Target"
-        deviation="Deviation"
+        unit={text('unit', 'Unit')}
+        target={text('target', 'target')}
+        deviation={text('deviation', 'deviation')}
         onHeaderPress={action('Header pressed')}
-        loading={boolean('loading', false)}
-        showIndicator
-        description="Description"
+        showIndicator={boolean('showIndicator', true)}
+        description={text('description', 'Description')}
+        counter={text('counter', 'Counter')}
+        counterState={select('counterState', ValueState, ValueState.Success)}
+        currency={text('currency', 'EUR')}
       />
-    )}
+    }
   >
     <LineChart
       labels={[
diff --git a/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx b/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx
deleted file mode 100644
index e4c13a44b46..00000000000
--- a/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { Event, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { Fragment, PureComponent } from 'react';
-import { ClassProps } from '../../../interfaces/ClassProps';
-import { CommonProps } from '../../../interfaces/CommonProps';
-import { BusyIndicator } from '../../../lib/BusyIndicator';
-import { BusyIndicatorType } from '../../../lib/BusyIndicatorType';
-import { DeviationIndicator } from '../../../lib/DeviationIndicator';
-import { Label } from '../../../lib/Label';
-import { Text } from '../../../lib/Text';
-import { ValueState } from '../../../lib/ValueState';
-import styles from './AnalyticalCardHeader.jss';
-
-export interface AnalyticalCardHeaderPropTypes extends CommonProps {
-  title?: string;
-  subTitle?: string;
-  arrowIndicator?: DeviationIndicator;
-  showIndicator?: boolean;
-  indicatorState?: ValueState;
-  value?: string;
-  unit?: string;
-  valueState?: ValueState;
-  target?: string;
-  deviation?: string;
-  onHeaderPress?: (event: Event) => void;
-  loading?: boolean;
-  description?: string;
-}
-
-interface AnalyticalCardHeaderInternalProps extends AnalyticalCardHeaderPropTypes, ClassProps {}
-
-interface AnalyticalCardHeaderState {
-  helpVisible: boolean;
-}
-
-@withStyles(styles)
-export class AnalyticalCardHeader extends PureComponent<AnalyticalCardHeaderPropTypes, AnalyticalCardHeaderState> {
-  static defaultProps = {
-    title: null,
-    subTitle: null,
-    arrowIndicator: DeviationIndicator.None,
-    showIndicator: true,
-    indicatorState: ValueState.None,
-    value: null,
-    unit: null,
-    valueState: ValueState.None,
-    target: null,
-    deviation: null,
-    onHeaderPress: null,
-    loading: false,
-    description: null
-  };
-
-  state = {
-    helpVisible: false
-  };
-
-  private handleHelpPress = (e) => {
-    e.stopPropagation();
-    this.setState({ helpVisible: true });
-  };
-
-  private onCloseHelp = () => {
-    this.setState({ helpVisible: false });
-  };
-
-  private onClick = (e) => {
-    if (this.props.onHeaderPress) {
-      this.props.onHeaderPress(Event.of(this, e));
-    }
-  };
-
-  private getIndicatorIcon = () => {
-    const { indicatorState, arrowIndicator, classes } = this.props as AnalyticalCardHeaderInternalProps;
-
-    const arrowClasses = StyleClassHelper.of(classes.arrowIndicatorShape);
-
-    switch (arrowIndicator) {
-      case DeviationIndicator.Up:
-        arrowClasses.put(classes.arrowUp);
-        break;
-      case DeviationIndicator.Down:
-        arrowClasses.put(classes.arrowDown);
-        break;
-      default:
-        arrowClasses.put(classes.arrowRight);
-        break;
-    }
-
-    switch (indicatorState) {
-      case ValueState.Success:
-        arrowClasses.put(classes.good);
-        break;
-      case ValueState.Error:
-        arrowClasses.put(classes.error);
-        break;
-      case ValueState.Warning:
-        arrowClasses.put(classes.critical);
-        break;
-      default:
-        arrowClasses.put(classes.none);
-
-        break;
-    }
-    return <div className={arrowClasses.valueOf()} />;
-  };
-
-  render() {
-    const {
-      title,
-      subTitle,
-      value,
-      unit,
-      target,
-      deviation,
-      valueState,
-      onHeaderPress,
-      loading,
-      classes,
-      showIndicator,
-      tooltip,
-      className,
-      description,
-      style,
-      innerRef
-    } = this.props as AnalyticalCardHeaderInternalProps;
-
-    const headerClasses = StyleClassHelper.of(classes.cardHeader);
-    if (onHeaderPress) {
-      headerClasses.put(classes.cardHeaderClickable);
-    }
-
-    const valueAndUnitClasses = StyleClassHelper.of(classes.valueAndUnit);
-    if (valueState === ValueState.Error) {
-      valueAndUnitClasses.put(classes.error);
-    }
-    if (valueState === ValueState.Warning) {
-      valueAndUnitClasses.put(classes.critical);
-    }
-    if (valueState === ValueState.Success) {
-      valueAndUnitClasses.put(classes.good);
-    }
-
-    if (className) {
-      headerClasses.put(className);
-    }
-    const shouldRenderContent = [value, unit, deviation, target].some((v) => v !== null) || loading === true;
-
-    return (
-      <div ref={innerRef} onClick={this.onClick} className={headerClasses.valueOf()} title={tooltip} style={style}>
-        <div className={classes.headerContent}>
-          <div className={classes.headerText}>
-            <span>{title}</span>
-            <div className={classes.subHeaderText}>{subTitle}</div>
-          </div>
-          {shouldRenderContent && (
-            <div className={classes.kpiContent}>
-              <div className={classes.leftContent}>
-                <div className={valueAndUnitClasses.valueOf()}>
-                  <div className={classes.value}>{value}</div>
-                  <div className={classes.indicatorAndUnit}>
-                    {showIndicator && this.getIndicatorIcon()}
-                    <div className={classes.unit}>{unit}</div>
-                  </div>
-                  {loading && (
-                    <span style={{ verticalAlign: 'super', display: 'inline-block' }}>
-                      <BusyIndicator active size={BusyIndicatorType.Medium} />
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className={classes.targetAndDeviation}>
-                {target !== null && (
-                  <div>
-                    <Label>Target</Label>
-                    <div>
-                      <Text>{target}</Text>
-                    </div>
-                  </div>
-                )}
-                {deviation !== null && (
-                  <div className={classes.deviation}>
-                    <Label>Deviation</Label>
-                    <div>
-                      <Text>{deviation}</Text>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-          <div className={classes.subHeaderText}>{description}</div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/packages/main/src/components/AnalyticalCard/index.tsx b/packages/main/src/components/AnalyticalCard/index.tsx
index 292c77e01de..04d0bfcc57a 100644
--- a/packages/main/src/components/AnalyticalCard/index.tsx
+++ b/packages/main/src/components/AnalyticalCard/index.tsx
@@ -1,43 +1,48 @@
-import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { CSSProperties, FC, forwardRef, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
+import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
-import { ContentDensity } from '../../lib/ContentDensity';
-import { Themes } from '../../lib/Themes';
+
 import styles from './AnalyticalCard.jss';
 
 export interface AnalyticalCardTypes extends CommonProps {
   /**
-   * Render Function for Header Content
-   * This function will pass two parameters: theme and Content Density.
-   * Expect to return a CardHeader.
+   * The Card header Component, using the AnalyticalCardHeader is recommended.
    */
-  renderHeader: (theme: Themes, contentDensity: ContentDensity) => JSX.Element;
+  header?: ReactNode;
   /**
    * Expected one or more React Components
    */
-  children?: ReactNode | ReactNodeArray;
+  children: ReactNode | ReactNodeArray;
+  width?: CSSProperties['width'];
 }
 
-export interface AnalyticalCardPropsInternal extends AnalyticalCardTypes, ClassProps {
-  theme?: JSSTheme;
-}
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'AnalyticalCard' });
 
-@withStyles(styles)
-export class AnalyticalCard extends PureComponent<AnalyticalCardTypes> {
-  render() {
-    const { renderHeader, children, classes, theme, style, className, tooltip, innerRef } = this
-      .props as AnalyticalCardPropsInternal;
+export const AnalyticalCard: FC<AnalyticalCardTypes> = forwardRef(
+  (props: AnalyticalCardTypes, ref: Ref<HTMLDivElement>) => {
+    const { children, style, className, tooltip, header, width } = props;
+    const classes = useStyles();
     const classNameString = StyleClassHelper.of(classes.card);
     if (className) {
       classNameString.put(className);
     }
+
+    const analyticalCardStyles = useMemo(() => {
+      return {
+        width,
+        ...style
+      };
+    }, [style, width]);
     return (
-      <div ref={innerRef} className={classNameString.toString()} style={style} title={tooltip}>
-        {renderHeader(theme.theme, theme.contentDensity)}
-        <div style={{ padding: '1rem' }}>{children}</div>
+      <div ref={ref} className={classNameString.toString()} style={analyticalCardStyles} title={tooltip}>
+        {header}
+        <div className={classes.content}>{children}</div>
       </div>
     );
   }
-}
+);
+
+AnalyticalCard.displayName = 'AnalyticalCard';
+AnalyticalCard.defaultProps = { width: '20rem', header: null };
diff --git a/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts
similarity index 53%
rename from packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts
rename to packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts
index 02a985ec2b0..1615c01e398 100644
--- a/packages/main/src/components/AnalyticalCard/header/AnalyticalCardHeader.jss.ts
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.jss.ts
@@ -1,7 +1,7 @@
 import { fonts } from '@ui5/webcomponents-react-base';
-import { JSSTheme } from '../../../interfaces/JSSTheme';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 
-const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
+const styles = ({ parameters }: JSSTheme) => ({
   helpText: {
     fontFamily: fonts.sapUiFontFamily,
     fontSize: fonts.sapMFontMediumSize,
@@ -12,12 +12,14 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
     paddingTop: '1rem',
     paddingBottom: '1rem',
     outlineOffset: '-0.125rem',
-    boxSizing: 'border-box',
-    borderBottom: `1px solid ${parameters.sapUiListBorderColor}`,
+    borderBottom: `0.0625rem solid ${parameters.sapUiTileBackgroundDarken20}`,
     backgroundColor: parameters.sapUiTileBackground,
     fontFamily: fonts.sapUiFontHeaderFamily,
     '&:hover': {
-      backgroundColor: parameters.sapUiTileBackgroundDarken20
+      backgroundColor: parameters.sapUiListHoverBackground // TODO sapUiTileHoverBackground '#fafafa'
+    },
+    '&:active': {
+      backgroundColor: parameters.sapUiListHoverBackground // TODO sapUiTileHoverBackground '#fafafa'
     }
   },
   arrowIndicatorShape: {
@@ -39,7 +41,6 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
     borderTop: '8px solid transparent',
     borderBottom: '8px solid transparent'
   },
-
   cardHeaderClickable: {
     cursor: 'pointer'
   },
@@ -48,16 +49,23 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
     marginRight: '1rem',
     position: 'relative'
   },
-  headerText: {
+  headerTitles: {
     overflow: 'hidden',
+    textAlign: 'left',
+    whiteSpace: 'normal',
+    wordWrap: 'break-word'
+  },
+  headerText: {
     fontFamily: fonts.sapUiFontHeaderFamily,
     fontWeight: fonts.sapUiFontHeaderWeight,
     fontSize: fonts.sapMFontHeader5Size,
     color: parameters.sapUiTileTitleTextColor,
-    textAlign: 'left',
-    whiteSpace: 'normal',
-    wordWrap: 'break-word',
-    textOverflow: 'ellipsis'
+    overflow: 'hidden',
+    display: '-webkit-box',
+    lineHeight: '18px',
+    maxHeight: '54px' /* height * number of lines */,
+    WebkitLineClamp: '3' /* number of lines to show */,
+    WebkitBoxOrient: 'vertical'
   },
   subHeaderText: {
     overflow: 'hidden',
@@ -70,7 +78,27 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
     wordWrap: 'break-word',
     textOverflow: 'ellipsis',
     marginTop: '0.5rem',
-    width: '100%'
+    width: '100%',
+    display: '-webkit-box',
+    lineHeight: '16px',
+    maxHeight: '32px',
+    WebkitLineClamp: '2',
+    WebkitBoxOrient: 'vertical'
+  },
+  counter: {
+    fontSize: fonts.sapMFontSmallSize,
+    margin: '0.188rem 0  0 1rem',
+    lineHeight: 'normal',
+    textAlign: 'right'
+  },
+  currency: {
+    fontFamily: parameters.sapUiFontFamily,
+    fontSize: parameters.sapMFontMediumSize,
+    fontWeight: 'normal',
+    color: parameters.sapUiTileTextColor,
+    overflow: 'hidden',
+    marginLeft: '0.25rem',
+    textAlign: 'right'
   },
   helpIcon: {
     position: 'absolute',
@@ -79,26 +107,23 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
   },
   kpiContent: {
     fontWeight: 'normal',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end',
-    marginTop: '10px',
-    color: parameters.sapUiTileTextColor
-  },
-  leftContent: {
-    display: 'flex',
-    alignItems: 'baseline'
+    marginTop: '0.5rem',
+    color: parameters.sapUiTileTextColor,
+    width: '100%',
+    boxSizing: 'border-box'
   },
   valueAndUnit: {
     display: 'flex',
     alignItems: 'end',
-    marginLeft: '0.25rem',
     color: parameters.sapUiNeutralText
   },
   value: {
-    display: 'flex',
-    alignItems: 'flex-end',
-    fontSize: '2rem'
+    fontSize: '2rem',
+    maxWidth: '135px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'block'
   },
   unit: {
     marginLeft: '0.25rem',
@@ -112,12 +137,38 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
     justifyContent: 'flex-end'
   },
   targetAndDeviation: {
+    width: '60%',
+    paddingBottom: '0.25rem',
     textAlign: 'right',
-    fontSize: fonts.sapMFontSmallSize,
-    display: 'flex'
+    fontSize: parameters.sapMFontSmallSize,
+    color: parameters.sapUiTileTextColor
+  },
+  targetAndDeviationColumn: {
+    maxWidth: '45%',
+    marginLeft: '1rem'
   },
-  deviation: {
-    marginLeft: '0.5rem'
+  targetAndDeviationValue: {
+    color: parameters.sapUiTileTitleTextColor,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  description: {
+    fontFamily: parameters.sapUiFontFamily,
+    fontSize: parameters.sapMFontSmallSize,
+    fontWeight: 'normal',
+    color: parameters.sapUiTileTextColor,
+    whiteSpace: 'normal',
+    overflow: 'hidden',
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    marginTop: '0.25rem',
+    width: '100%',
+    display: '-webkit-box',
+    lineHeight: '14px',
+    maxHeight: '14px' /* height * number of lines */,
+    WebkitLineClamp: '1' /* number of lines to show */,
+    WebkitBoxOrient: 'vertical'
   },
   good: {
     color: parameters.sapUiPositiveText
diff --git a/packages/main/src/components/AnalyticalCardHeader/index.tsx b/packages/main/src/components/AnalyticalCardHeader/index.tsx
new file mode 100644
index 00000000000..9072f9ae7a7
--- /dev/null
+++ b/packages/main/src/components/AnalyticalCardHeader/index.tsx
@@ -0,0 +1,200 @@
+import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
+import { CommonProps } from '../../interfaces/CommonProps';
+import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';
+import { ObjectStatus } from '@ui5/webcomponents-react/lib/ObjectStatus';
+import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
+import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
+import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
+import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap';
+import styles from './AnalyticalCardHeader.jss';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { createUseStyles } from 'react-jss';
+
+export interface AnalyticalCardHeaderPropTypes extends CommonProps {
+  title?: string;
+  subTitle?: string;
+  arrowIndicator?: DeviationIndicator;
+  showIndicator?: boolean;
+  indicatorState?: ValueState;
+  value?: string;
+  unit?: string;
+  valueState?: ValueState;
+  target?: string;
+  deviation?: string;
+  onHeaderPress?: (event: Event) => void;
+  description?: string;
+  counter?: string;
+  counterState?: ValueState;
+  currency?: string;
+}
+
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, {
+  name: 'AnalyticalCardHeader'
+});
+
+export const AnalyticalCardHeader: FC<AnalyticalCardHeaderPropTypes> = forwardRef(
+  (props: AnalyticalCardHeaderPropTypes, ref: Ref<HTMLDivElement>) => {
+    const {
+      title,
+      subTitle,
+      value,
+      unit,
+      target,
+      deviation,
+      valueState,
+      onHeaderPress,
+      showIndicator,
+      tooltip,
+      className,
+      description,
+      counter,
+      counterState,
+      currency,
+      indicatorState,
+      arrowIndicator,
+      style
+    } = props;
+    const classes = useStyles(props);
+    const onClick = useCallback(
+      (e) => {
+        if (onHeaderPress) {
+          onHeaderPress(Event.of(null, e));
+        }
+      },
+      [onHeaderPress]
+    );
+    const indicatorIcon = useMemo(() => {
+      const arrowClasses = StyleClassHelper.of(classes.arrowIndicatorShape);
+      switch (arrowIndicator) {
+        case DeviationIndicator.Up:
+          arrowClasses.put(classes.arrowUp);
+          break;
+        case DeviationIndicator.Down:
+          arrowClasses.put(classes.arrowDown);
+          break;
+        default:
+          arrowClasses.put(classes.arrowRight);
+          break;
+      }
+
+      switch (indicatorState) {
+        case ValueState.Success:
+          arrowClasses.put(classes.good);
+          break;
+        case ValueState.Error:
+          arrowClasses.put(classes.error);
+          break;
+        case ValueState.Warning:
+          arrowClasses.put(classes.critical);
+          break;
+        default:
+          arrowClasses.put(classes.none);
+
+          break;
+      }
+      return <div className={arrowClasses.valueOf()} />;
+    }, [arrowIndicator, indicatorState, classes]);
+
+    const headerClasses = StyleClassHelper.of(classes.cardHeader);
+    if (onHeaderPress) {
+      headerClasses.put(classes.cardHeaderClickable);
+    }
+
+    const valueAndUnitClasses = StyleClassHelper.of(classes.valueAndUnit);
+    if (valueState === ValueState.Error) {
+      valueAndUnitClasses.put(classes.error);
+    }
+    if (valueState === ValueState.Warning) {
+      valueAndUnitClasses.put(classes.critical);
+    }
+    if (valueState === ValueState.Success) {
+      valueAndUnitClasses.put(classes.good);
+    }
+
+    if (className) {
+      headerClasses.put(className);
+    }
+    const shouldRenderContent = [value, unit, deviation, target].some((v) => v !== null);
+    return (
+      <div ref={ref} onClick={onClick} className={headerClasses.valueOf()} title={tooltip} style={style}>
+        <div className={classes.headerContent}>
+          <div className={classes.headerTitles}>
+            <FlexBox justifyContent={FlexBoxJustifyContent.SpaceBetween} wrap={FlexBoxWrap.NoWrap}>
+              <div className={classes.headerText}>{title}</div>
+              <ObjectStatus className={classes.counter} state={counterState}>
+                {counter}
+              </ObjectStatus>
+            </FlexBox>
+            <div className={classes.subHeaderText}>
+              {subTitle}
+              {currency && ` | ${currency}`}
+            </div>
+          </div>
+          {shouldRenderContent && (
+            <FlexBox direction={FlexBoxDirection.Row} className={classes.kpiContent} alignItems={FlexBoxAlignItems.End}>
+              <FlexBox direction={FlexBoxDirection.Row}>
+                <div className={valueAndUnitClasses.valueOf()}>
+                  <div className={classes.value}>{value}</div>
+                  <div className={classes.indicatorAndUnit}>
+                    {showIndicator && indicatorIcon}
+                    <div className={classes.unit}>{unit}</div>
+                  </div>
+                </div>
+              </FlexBox>
+              <FlexBox
+                direction={FlexBoxDirection.Row}
+                wrap={FlexBoxWrap.NoWrap}
+                className={classes.targetAndDeviation}
+              >
+                {target !== null && (
+                  <FlexBox
+                    direction={FlexBoxDirection.Column}
+                    className={classes.targetAndDeviationColumn}
+                    wrap={FlexBoxWrap.NoWrap}
+                  >
+                    <span>Target</span>
+                    <span className={classes.targetAndDeviationValue}>{target}</span>
+                  </FlexBox>
+                )}
+                {deviation !== null && (
+                  <FlexBox
+                    direction={FlexBoxDirection.Column}
+                    className={classes.targetAndDeviationColumn}
+                    wrap={FlexBoxWrap.NoWrap}
+                  >
+                    <span>Deviation</span>
+                    <span className={classes.targetAndDeviationValue}>{deviation}</span>
+                  </FlexBox>
+                )}
+              </FlexBox>
+            </FlexBox>
+          )}
+          <div className={classes.description}>{description}</div>
+        </div>
+      </div>
+    );
+  }
+);
+
+AnalyticalCardHeader.displayName = 'AnalyticalCardHeader';
+
+AnalyticalCardHeader.defaultProps = {
+  title: null,
+  subTitle: null,
+  arrowIndicator: DeviationIndicator.None,
+  showIndicator: true,
+  indicatorState: ValueState.None,
+  value: null,
+  unit: null,
+  valueState: ValueState.None,
+  target: null,
+  deviation: null,
+  onHeaderPress: null,
+  description: null,
+  counter: null,
+  counterState: ValueState.None,
+  currency: null
+};
diff --git a/packages/main/src/lib/AnalyticalCardHeader.ts b/packages/main/src/lib/AnalyticalCardHeader.ts
index f6e787958f6..f2e46a057cc 100644
--- a/packages/main/src/lib/AnalyticalCardHeader.ts
+++ b/packages/main/src/lib/AnalyticalCardHeader.ts
@@ -1,3 +1,3 @@
-import { AnalyticalCardHeader } from '../components/AnalyticalCard/header/AnalyticalCardHeader';
+import { AnalyticalCardHeader } from '../components/AnalyticalCardHeader';
 
 export { AnalyticalCardHeader };