diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 8d3ef7ada6..7e604444a0 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,4 +1,4 @@
-import { Component } from '../index';
+import { Component, h, Ionic } from '../index';
 
 
 @Component({
@@ -9,4 +9,10 @@ import { Component } from '../index';
     wp: 'badge.wp.scss'
   }
 })
-export class Badge {}
+export class Badge {
+  render() {
+    return h(this, Ionic.theme(this, 'badge'),
+      h('slot')
+    );
+  }
+}
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 39a5bbc6b6..b80070aa4c 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,4 +1,4 @@
-import { Component, h, Ionic, Prop } from '../index';
+import { Component, h, Prop } from '../index';
 type CssClassObject = { [className: string]: boolean };
 
 /**
@@ -71,6 +71,13 @@ type CssClassObject = { [className: string]: boolean };
 })
 export class Button {
 
+
+  /**
+   * @Prop {boolean} If true, activates the large button size.
+   * Type: size
+   */
+  @Prop() role: string = 'button';
+
   /**
    * @Prop {boolean} If true, activates the large button size.
    * Type: size
@@ -211,8 +218,6 @@ export class Button {
   }
 
   render() {
-    var role = 'button';
-
     var size =
       (this.large ? 'large' : null) ||
       (this.small ? 'small' : null) ||
@@ -228,12 +233,12 @@ export class Button {
 
     var buttonClasses: CssClassObject = []
       .concat(
-        this.getElementClassList(role, this.mode),
-        this.getClassList(role, shape, this.mode),
-        this.getClassList(role, display, this.mode),
-        this.getClassList(role, size, this.mode),
-        this.getClassList(role, decorator, this.mode),
-        this.getStyleClassList(role)
+        this.getElementClassList(this.role, this.mode),
+        this.getClassList(this.role, shape, this.mode),
+        this.getClassList(this.role, display, this.mode),
+        this.getClassList(this.role, size, this.mode),
+        this.getClassList(this.role, decorator, this.mode),
+        this.getStyleClassList(this.role)
       )
       .reduce((prevValue, cssClass) => {
         prevValue[cssClass] = true;
diff --git a/src/components/card-content/card-content.ts b/src/components/card-content/card-content.ts
index 1e43b6ae5c..4c85e2b82a 100644
--- a/src/components/card-content/card-content.ts
+++ b/src/components/card-content/card-content.ts
@@ -1,4 +1,4 @@
-import { Component } from '../index';
+import { Component, h, Ionic } from '../index';
 
 
 @Component({
@@ -9,4 +9,10 @@ import { Component } from '../index';
     wp: 'card-content.wp.scss'
   }
 })
-export class CardContent {}
+export class CardContent {
+  render() {
+    return h(this, Ionic.theme(this, 'card-content'),
+      h('slot')
+    );
+  }
+}
diff --git a/src/components/card-header/card-header.ts b/src/components/card-header/card-header.ts
index de6326a81a..db89db1726 100644
--- a/src/components/card-header/card-header.ts
+++ b/src/components/card-header/card-header.ts
@@ -1,4 +1,4 @@
-import { Component } from '../index';
+import { Component, h, Ionic } from '../index';
 
 
 @Component({
@@ -9,4 +9,10 @@ import { Component } from '../index';
     wp: 'card-header.wp.scss'
   }
 })
-export class CardHeader {}
+export class CardHeader {
+  render() {
+    return h(this, Ionic.theme(this, 'card-header'),
+      h('slot')
+    );
+  }
+}
diff --git a/src/components/card-title/card-title.ts b/src/components/card-title/card-title.ts
index 2f98f31bc6..8e6b461dfb 100644
--- a/src/components/card-title/card-title.ts
+++ b/src/components/card-title/card-title.ts
@@ -1,4 +1,4 @@
-import { Component } from '../index';
+import { Component, h, Ionic } from '../index';
 
 
 @Component({
@@ -9,4 +9,10 @@ import { Component } from '../index';
     wp: 'card-title.wp.scss'
   }
 })
-export class CardTitle {}
+export class CardTitle {
+  render() {
+    return h(this, Ionic.theme(this, 'card-title'),
+      h('slot')
+    );
+  }
+}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 0b35759fef..a9006db4b1 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -1,4 +1,4 @@
-import { Component } from '../index';
+import { Component, h, Ionic } from '../index';
 
 
 @Component({
@@ -9,4 +9,10 @@ import { Component } from '../index';
     wp: 'card.wp.scss'
   }
 })
-export class Card {}
+export class Card {
+  render() {
+    return h(this, Ionic.theme(this, 'card'),
+      h('slot')
+    );
+  }
+}
diff --git a/src/themes/ionic.scss b/src/themes/ionic.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/util/interfaces.ts b/src/util/interfaces.ts
index 0653d4731d..70cd05e7fb 100644
--- a/src/util/interfaces.ts
+++ b/src/util/interfaces.ts
@@ -70,7 +70,7 @@ export interface ScrollDetail extends GestureDetail {
   contentWidth?: number;
   contentTop?: number;
   contentBottom?: number;
-  domWrite?: RequestAnimationFrame;
+  domWrite?: DomControllerCallback;
   contentElement?: HTMLElement;
   fixedElement?: HTMLElement;
   scrollElement?: HTMLElement;
@@ -103,8 +103,8 @@ export interface ContentDimensions {
 export interface IonicGlobal {
   staticDir?: string;
   components?: LoadComponents;
-  loadComponents?: {(bundleId: string): void};
-  eventNamePrefix?: string;
+  loadComponents?: {(bundleId: string, modulesImporterFn: ModulesImporterFn, cmp0?: ComponentModeData, cmp1?: ComponentModeData, cmp2?: ComponentModeData): void};
+  eventNameFn?: {(eventName: string): string};
   config?: Object;
   ConfigCtrl?: ConfigApi;
   DomCtrl?: DomControllerApi;
@@ -123,9 +123,9 @@ export interface NextTick {
 
 
 export interface DomControllerApi {
-  read: RequestAnimationFrame;
-  write: RequestAnimationFrame;
-  raf: RequestAnimationFrame;
+  read: DomControllerCallback;
+  write: DomControllerCallback;
+  raf: DomControllerCallback;
 }
 
 export interface RafCallback {
@@ -133,7 +133,7 @@ export interface RafCallback {
 }
 
 
-export interface RequestAnimationFrame {
+export interface DomControllerCallback {
   (cb: RafCallback): void;
 }
 
@@ -178,11 +178,6 @@ export interface ComponentModeData {
    * component mode styles
    */
   [6]: string;
-
-  /**
-   * import component function
-   */
-  [7]: ComponentModeImporterFn;
 }
 
 
@@ -219,7 +214,7 @@ export interface ComponentWatchersData {
 }
 
 
-export interface ComponentModeImporterFn {
+export interface ModulesImporterFn {
   (importer: any, h: Hyperscript, Ionic: Ionic): void;
 }
 
@@ -307,9 +302,9 @@ export interface ComponentMeta {
   watchers?: Watchers;
   shadow?: boolean;
   obsAttrs?: string[];
-  hostCss?: string;
   componentModule?: any;
   modes: {[modeName: string]: ComponentMode};
+  priority?: 'high'|'low';
 }
 
 
@@ -383,6 +378,9 @@ export interface ProxyElement extends HTMLElement {
 }
 
 
+export type Side = 'left' | 'right' | 'start' | 'end';
+
+
 export interface RendererApi {
   (oldVnode: VNode | Element, vnode: VNode, manualSlotProjection?: boolean): VNode;
 }
@@ -396,10 +394,10 @@ export interface Hyperscript {
   (sel: Node, data: VNodeData): VNode;
   (sel: any, data: VNodeData): VNode;
   (sel: any, text: string): VNode;
-  (sel: any, children: Array<any>): VNode;
+  (sel: any, children: Array<VNode | undefined | null>): VNode;
   (sel: any, data: VNodeData, text: string): VNode;
-  (sel: any, data: VNodeData, children: Array<any|string>): VNode;
-  (sel: any, data: VNodeData, children: any): VNode;
+  (sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
+  (sel: any, data: VNodeData, children: VNode): VNode;
 }
 
 
@@ -430,7 +428,7 @@ export interface VNodeData {
 export interface PlatformApi {
   registerComponent: (tag: string, data: any[]) => ComponentMeta;
   getComponentMeta: (tag: string) => ComponentMeta;
-  loadComponent: (bundleId: string, cb: Function) => void;
+  loadComponent: (bundleId: string, priority: string, cb: Function) => void;
   nextTick: NextTick;
 
   isElement: (node: Node) => node is Element;