tags)
+// or they'll incorrectly add to card's top padding
+.md-card > :first-child, md-card-content > :first-child {
+ margin-top: 0;
+}
+
+// last els in md-card-content and md-card can't have their default margin-bottoms (e.g.
tags)
+// or they'll incorrectly add to card's bottom padding
+.md-card > :last-child, md-card-content > :last-child {
+ margin-bottom: 0;
+}
+
+// if main image is on top, need to place it flush against top
+// (by stripping card's default 24px padding)
+[md-card-image]:first-child {
+ margin-top: -24px;
+}
+
+// actions panel on bottom should be 8px from bottom of card
+// so must strip 16px from default card padding of 24px
+.md-card > md-card-actions:last-child {
+ margin-bottom: -16px;
+ padding-bottom: 0;
+}
+
+// actions panel should always be 8px from sides,
+// so the first button in the actions panel can't add its own margins
+md-card-actions [md-button]:first-child,
+md-card-actions [md-raised-button]:first-child {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+// should be 12px space between titles and subtitles generally
+// default margin-bottom is 16px, so need to move lower title up 4px
+md-card-title:not(:first-child), md-card-subtitle:not(:first-child) {
+ margin-top: -4px;
+}
+
+// should be 8px space between titles and subtitles in header
+// default margin-bottom is 16px, so need to move subtitle in header up 4px
+md-card-header md-card-subtitle:not(:first-child) {
+ margin-top: -8px;
+}
+
+// xl image should always have 16px on top.
+// when it's the first el, it'll need to remove 8px from default card padding of 24px
+.md-card > [md-card-xl-image]:first-child{
+ margin-top: -8px;
+}
+
+// xl image should always have 16px on bottom
+// when it's the last el, it'll need to remove 8px from default card padding of 24px
+.md-card > [md-card-xl-image]:last-child {
+ margin-bottom: -8px;
+}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
new file mode 100644
index 00000000000..f8ea4b014f6
--- /dev/null
+++ b/src/components/card/card.ts
@@ -0,0 +1,71 @@
+import {Component, View, ViewEncapsulation} from 'angular2/core';
+import {CONST_EXPR, Type} from 'angular2/src/facade/lang';
+
+/*
+
+ is a basic content container component that adds the styles of a material design card.
+
+While you can use this component alone, it also provides a number of preset styles for common card sections, including:
+ - md-card-title
+ - md-card-subtitle
+ - md-card-content
+ - md-card-actions
+ - md-card-footer
+
+ You can see some examples of cards here:
+ http://embed.plnkr.co/s5O4YcyvbLhIApSrIhtj/
+
+ TODO(kara): update link to demo site when it exists
+
+*/
+
+@Component({
+ selector: 'md-card',
+ templateUrl: './components/card/card.html',
+ styleUrls: ['./components/card/card.css'],
+ encapsulation: ViewEncapsulation.None
+})
+export class MdCard {}
+
+
+/* The following components don't have any behavior. They simply use content projection to wrap user content
+ for flex layout purposes in (and thus allow a cleaner, boilerplate-free API).
+
+
+ is a component intended to be used within the component.
+It adds styles for a preset header section (i.e. a title, subtitle, and avatar layout).
+
+You can see an example of a card with a header here:
+http://embed.plnkr.co/tvJl19z3gZTQd6WmwkIa/
+
+TODO(kara): update link to demo site when it exists
+*/
+
+@Component({
+ selector: 'md-card-header',
+ templateUrl: '/components/card/card-header.html',
+ encapsulation: ViewEncapsulation.None
+})
+export class MdCardHeader {}
+
+/*
+
+ is a component intended to be used within the component.
+It adds styles for a preset layout that groups an image with a title section.
+
+You can see an example of a card with a title-group section here:
+http://embed.plnkr.co/EDfgCF9eKcXjini1WODm/
+
+TODO(kara): update link to demo site when it exists
+*/
+
+@Component({
+ selector: 'md-card-title-group',
+ templateUrl: './components/card/card-title-group.html',
+ encapsulation: ViewEncapsulation.None
+})
+export class MdCardTitleGroup {}
+
+export const MD_CARD_DIRECTIVES: Type[] =
+ CONST_EXPR([MdCard, MdCardHeader, MdCardTitleGroup]);
+
diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss
index 880a0091336..e54e70361ec 100644
--- a/src/core/style/_variables.scss
+++ b/src/core/style/_variables.scss
@@ -3,6 +3,10 @@
// Typography
$md-body-font-size-base: rem(1.400) !default;
+$font-family: Roboto, 'Helvetica Neue', sans-serif !default;
+
+// Media queries
+$md-xsmall: "max-width: 600px";
// z-index master list
$z-index-fab: 20 !default;
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index 8cfb86efe37..af29b899c40 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -1,7 +1,57 @@
material2 Works!
-
+
+
+
+
+ Card with title
+ Subtitle
+
+
+
+
+
+ Subtitle
+ Card with title
+
+
This is supporting text.
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+