From 77be2df5634316d6bd8a7b78c124b03b88d66b12 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 25 Apr 2016 16:14:07 -0700
Subject: [PATCH] feat(card): add alignment shortcuts for md-card-actions

---
 src/components/card/README.md    | 5 +++++
 src/components/card/card.scss    | 5 +++++
 src/demo-app/card/card-demo.html | 4 ++++
 3 files changed, 14 insertions(+)

diff --git a/src/components/card/README.md b/src/components/card/README.md
index ef62bd4429f6..14c28409ac0c 100644
--- a/src/components/card/README.md
+++ b/src/components/card/README.md
@@ -51,6 +51,11 @@ Output:
 
 <img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
 
+#### Preset shortcuts
+
+`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
+the main axis (flex-end). The default is `align="start"` (flex-start).
+
 ### Preset layouts
 
 You can also leverage preset layouts that format some of the sections together.
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index f99a69d1fe31..02f9c60f5c66 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -55,6 +55,11 @@ md-card-actions {
   margin-left: -16px;
   margin-right: -16px;
   padding: 8px 0;
+
+  &[align='end'] {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 [md-card-image] {
diff --git a/src/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html
index a577da8565ba..12617c5f74d1 100644
--- a/src/demo-app/card/card-demo.html
+++ b/src/demo-app/card/card-demo.html
@@ -26,6 +26,10 @@
     <md-card-content>
       <p>Here is some content</p>
     </md-card-content>
+    <md-card-actions align="end">
+      <button md-button>LIKE</button>
+      <button md-button>SHARE</button>
+    </md-card-actions>
   </md-card>
 
   <md-card>