diff --git a/src/components/card/README.md b/src/components/card/README.md new file mode 100644 index 00000000000..ef62bd4429f --- /dev/null +++ b/src/components/card/README.md @@ -0,0 +1,111 @@ +# md-card + +`md-card` is a content container component that conforms to the spec of a Material Design card. + +See plunker example [here](http://plnkr.co/edit/pkUNGMXPcf8RXKapXNXQ?p=preview). + +## Usage + +Simply add your content between `md-card` tags to consume basic card styles like box-shadow and default padding. + +```html + + Basic card. + +``` + +Output: + + + +### Preset sections + +We also provide a number of preset sections that you can mix and match within the `md-card` tags. + + * ``: adds styles for a title + * ``: adds styles for a subtitle + * ``: main content section, intended for blocks of text + * ``: stretches image to container width + * ``: wraps and styles buttons + * ``: anchors section to bottom of card + +Example markup for a card with section presets: + +```html + + Subtitle first + Card with title + +

This is supporting text.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

+
+ + + + +
+``` + +Output: + + + +### Preset layouts + +You can also leverage preset layouts that format some of the sections together. + +#### `` + +Formats the following sections into a header: + + * ``: title to format within header + * ``: subtitle to format within header + * ``: image to use for avatar + +Example markup for a card with a header: + +```html + + + + Header title + Header subtitle + + + +

Here is some more content

+
+
+``` + +Output: + + + +#### `` + +Groups the following sections together: + + * ``: title to format within group + * ``: subtitle to format within group + * One of the following image sizes: + * `` + * `` + * `` + +Example markup for a card with title-group layout: + +```html + + + + Card with title + Subtitle + + +``` + +Output: + + \ No newline at end of file