vue-material/card.f44ed15c.js

webpackJsonp([24,37],{806:function(t,e,a){function d(t){a(897)}var n=a(1)(null,a(932),d,"data-v-2b6a83fc",null);t.exports=n.exports},864:function(t,e,a){e=t.exports=a(795)(),e.push([t.i,".card-holder .md-card[data-v-2b6a83fc]{width:100%;max-width:320px;margin:0 4px 16px;display:inline-block;vertical-align:top}.card-example .md-subhead .md-icon[data-v-2b6a83fc]{width:16px;min-width:16px;height:16px;min-height:16px;font-size:16px;line-height:16px}.card-example .md-subhead span[data-v-2b6a83fc]{vertical-align:middle}.card-example .card-reservation[data-v-2b6a83fc]{margin-top:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.card-example .card-reservation .md-icon[data-v-2b6a83fc]{margin:8px;color:rgba(0,0,0,.54)!important}.card-example .card-reservation .md-button[data-v-2b6a83fc]{border-radius:2px!important}",""])},897:function(t,e,a){var d=a(864);"string"==typeof d&&(d=[[t.i,d,""]]),d.locals&&(t.exports=d.locals);a(796)("203f36e9",d,!0)},932:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("page-content",{attrs:{"page-title":"Components - Card"}},[a("docs-component",[a("div",{slot:"description"},[a("p",[t._v("Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.")]),t._v(" "),a("p",[t._v("The card components are very granular. Every single part of a card is a component. You can combine them in any order that you want, following the same logic of the examples.")]),t._v(" "),a("p",[t._v('You can also use other Material components inside the card, like the "Complete Example".')]),t._v(" "),a("p",[t._v("The following classes can be applied to change the color palette:")]),t._v(" "),a("ul",{staticClass:"md-body-2"},[a("li",[a("code",[t._v("md-primary")])]),t._v(" "),a("li",[a("code",[t._v("md-accent")])]),t._v(" "),a("li",[a("code",[t._v("md-warn")])])])]),t._v(" "),a("div",{slot:"api"},[a("api-table",{attrs:{name:"md-card"}},[a("md-table",{slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Type")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[t._v("md-with-hover")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Enable full hover elevation in card. Default "),a("code",[t._v("false")])])],1)],1)],1)],1),t._v(" "),a("api-table",{attrs:{name:"md-card-header"}},[a("p",[t._v("Can display titles, subheads, medias and avatars in a header.")]),t._v(" "),a("p",[t._v("No options available")])]),t._v(" "),a("api-table",{attrs:{name:"md-card-header-text"}},[a("p",[t._v('Used inside a card header to group the title and the subhead. Useful to align with an action (like a overflow button) or a media inside headers, like on the "Media" example.')]),t._v(" "),a("p",[t._v("No options available")])]),t._v(" "),a("api-table",{attrs:{name:"md-card-content"}},[a("p",[t._v("Display the content of the card. Most used with plain text or with simple HTML content, like bold and italic tags.")]),t._v(" "),a("p",[t._v("No options available")])]),t._v(" "),a("api-table",{attrs:{name:"md-card-actions"}},[a("p",[t._v("Hold the actions of a card align them on the right. Here you can add "),a("code",[t._v("<md-button>")]),t._v(" with or without icons.")]),t._v(" "),a("p",[t._v("No options available")])]),t._v(" "),a("api-table",{attrs:{name:"md-card-area"}},[a("div",{slot:"properties"},[a("p",[t._v("A card area create a division inside the card. This will apply a border on the bottom (only works if the card area is not the last element).")]),t._v(" "),a("p",[t._v('You can see an example of use on the "Complete example".')]),t._v(" "),a("md-table",[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Type")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[t._v("md-inset")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Apply a inset border. Default "),a("code",[t._v("false")])])],1)],1)],1)],1)]),t._v(" "),a("api-table",{attrs:{name:"md-card-media"}},[a("div",{slot:"properties"},[a("p",[t._v("The card media display images (and other types of media) inside cards. Can be used inside and outsite a card header.")]),t._v(" "),a("md-table",[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Type")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[t._v("md-ratio")]),t._v(" "),a("md-table-cell",[a("code",[t._v("String")])]),t._v(" "),a("md-table-cell",[t._v("Resize or clip the image automatically based on the following options: "),a("br"),t._v("1:1 or 1/1, 4:3 or 4/3 and 16:9 or 16/9.")])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-medium")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Applies medium size to the media. Works only inside md-card-header. Default "),a("code",[t._v("false")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-big")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Applies big size to the media. Works only inside md-card-header. Default "),a("code",[t._v("false")])])],1)],1)],1)],1)]),t._v(" "),a("api-table",{attrs:{name:"md-card-media-actions"}},[a("p",[t._v("Used to align a media and actions side by side.")]),t._v(" "),a("p",[t._v("No options available")])]),t._v(" "),a("api-table",{attrs:{name:"md-card-media-cover"}},[a("div",{slot:"properties"},[a("p",[t._v("You will need to give a "),a("code",[t._v("<md-card-media>")]),t._v(" inside this component and a "),a("code",[t._v("<md-card-area>")]),t._v(". The media and the area will be automatically be placed in order inside the card.")]),t._v(" "),a("p",[t._v('Take a look at the example: "Image cover with predefined aspect ratio".')]),t._v(" "),a("md-table",[a("md-table-header",[a("md-table-row",[a("md-table-head",[t._v("Name")]),t._v(" "),a("md-table-head",[t._v("Type")]),t._v(" "),a("md-table-head",[t._v("Description")])],1)],1),t._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[t._v("md-text-scrim")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Apply a gradient background based on the image. This option increase the legibility of the text applying background colors by extracting the amount of lightness on the image. If the image is dark so the background of the text will be lighter. If it's not dark then the background will be darker. This will be calculated automatically. Default "),a("code",[t._v("false")])])],1),t._v(" "),a("md-table-row",[a("md-table-cell",[t._v("md-solid")]),t._v(" "),a("md-table-cell",[a("code",[t._v("Boolean")])]),t._v(" "),a("md-table-cell",[t._v("Applies a solid background with the same calculation logic of the md-text-scrim. Default "),a("code",[t._v("false")])])],1)],1)],1)],1)]),t._v(" "),a("api-table",{attrs:{name:"md-card-expand"}},[a("p",[t._v('Create a expansible content area inside cards. Useful to "show more" content or load them on demand.')]),t._v(" "),a("p",[t._v("You will need a "),a("code",[t._v("<md-card-actions>")]),t._v(" with an element with a "),a("code",[t._v("md-expand-trigger")]),t._v(" attribute and a "),a("code",[t._v("<md-card-content>")]),t._v(" with the content that you want to show. The trigger will automatically toggle the content on click.")]),t._v(" "),a("p",[t._v("A simple HTML markup can be like that:")]),t._v(" "),a("code-block",{attrs:{lang:"xml"}},[t._v('\n          <md-card-expand>\n            <md-card-actions>\n              <md-button class="md-icon-button" md-expand-trigger>\n                <md-icon>keyboard_arrow_down</md-icon>\n              </md-button>\n            </md-card-actions>\n\n            <md-card-content>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n            </md-card-content>\n          </md-card-expand>\n        ')]),t._v(" "),a("p",[t._v("No options available")])],1)],1),t._v(" "),a("div",{slot:"example"},[a("example-box",{attrs:{"card-title":"Regular Cards"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n            ")])],1),t._v(" "),a("md-card",[a("md-card-header",[a("md-card-header-text",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-menu",{attrs:{"md-size":"4","md-direction":"bottom left"}},[a("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[a("md-icon",[t._v("more_vert")])],1),t._v(" "),a("md-menu-content",[a("md-menu-item",[a("span",[t._v("Call")]),t._v(" "),a("md-icon",[t._v("phone")])],1),t._v(" "),a("md-menu-item",[a("span",[t._v("Send a message")]),t._v(" "),a("md-icon",[t._v("message")])],1)],1)],1)],1),t._v(" "),a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n            ")])],1),t._v(" "),a("md-card",[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-2.jpg",alt:"People"}})]),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n            ")])],1),t._v(" "),a("md-card",[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-2.jpg",alt:"People"}})]),t._v(" "),a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card>\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-header>\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              </md-card-content>\n            </md-card>\n\n            <md-card>\n              <md-card-header>\n                <md-card-header-text>\n                  <div class="md-title">Title goes here</div>\n                  <div class="md-subhead">Subtitle here</div>\n                </md-card-header-text>\n\n                <md-menu md-size="4" md-direction="bottom left">\n                  <md-button class="md-icon-button" md-menu-trigger>\n                    <md-icon>more_vert</md-icon>\n                  </md-button>\n\n                  <md-menu-content>\n                    <md-menu-item>\n                      <span>Call</span>\n                      <md-icon>phone</md-icon>\n                    </md-menu-item>\n\n                    <md-menu-item>\n                      <span>Send a message</span>\n                      <md-icon>message</md-icon>\n                    </md-menu-item>\n                  </md-menu-content>\n                </md-menu>\n              </md-card-header>\n\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              </md-card-content>\n            </md-card>\n\n            <md-card>\n              <md-card-media>\n                <img src="assets/card-image-2.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n              </md-card-content>\n            </md-card>\n\n            <md-card>\n              <md-card-media>\n                <img src="assets/card-image-2.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-header>\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n          ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Hover Effect"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",{attrs:{"md-with-hover":""}},[a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n            ")]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1),t._v(" "),a("md-card",{attrs:{"md-with-hover":""}},[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}}),t._v(" "),a("md-ink-ripple")],1),t._v(" "),a("md-card-actions",[a("md-button",{staticClass:"md-icon-button"},[a("md-icon",[t._v("favorite")])],1),t._v(" "),a("md-button",{staticClass:"md-icon-button"},[a("md-icon",[t._v("bookmark")])],1),t._v(" "),a("md-button",{staticClass:"md-icon-button"},[a("md-icon",[t._v("share")])],1)],1)],1),t._v(" "),a("md-card",{attrs:{"md-with-hover":""}},[a("md-card-header",[a("md-avatar",[a("img",{attrs:{src:"assets/avatar.png",alt:"People"}})]),t._v(" "),a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])],1),t._v(" "),a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n            ")]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card md-with-hover>\n              <md-card-header>\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              </md-card-content>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n\n            <md-card md-with-hover>\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n\n                <md-ink-ripple></md-ink-ripple>\n              </md-card-media>\n\n              <md-card-actions>\n                <md-button class="md-icon-button">\n                  <md-icon>favorite</md-icon>\n                </md-button>\n\n                <md-button class="md-icon-button">\n                  <md-icon>bookmark</md-icon>\n                </md-button>\n\n                <md-button class="md-icon-button">\n                  <md-icon>share</md-icon>\n                </md-button>\n              </md-card-actions>\n            </md-card>\n\n            <md-card md-with-hover>\n              <md-card-header>\n                <md-avatar>\n                  <img src="assets/avatar.png" alt="People">\n                </md-avatar>\n\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.\n              </md-card-content>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n          ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Image cover with predefined aspect ratio"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",[a("md-card-media-cover",{attrs:{"md-text-scrim":""}},[a("md-card-media",{attrs:{"md-ratio":"16:9"}},[a("img",{attrs:{src:"assets/card-sky.jpg",alt:"Skyscraper"}})]),t._v(" "),a("md-card-area",[a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1)],1)],1),t._v(" "),a("md-card",[a("md-card-media-cover",{attrs:{"md-solid":""}},[a("md-card-media",{attrs:{"md-ratio":"1:1"}},[a("img",{attrs:{src:"assets/card-sky.jpg",alt:"Skyscraper"}})]),t._v(" "),a("md-card-area",[a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1)],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card>\n              <md-card-media-cover md-text-scrim>\n                <md-card-media md-ratio="16:9">\n                  <img src="assets/card-sky.jpg" alt="Skyscraper">\n                </md-card-media>\n\n                <md-card-area>\n                  <md-card-header>\n                    <div class="md-title">Title goes here</div>\n                    <div class="md-subhead">Subtitle here</div>\n                  </md-card-header>\n\n                  <md-card-actions>\n                    <md-button>Action</md-button>\n                    <md-button>Action</md-button>\n                  </md-card-actions>\n                </md-card-area>\n              </md-card-media-cover>\n            </md-card>\n\n            <md-card>\n              <md-card-media-cover md-solid>\n                <md-card-media md-ratio="1:1">\n                  <img src="assets/card-sky.jpg" alt="Skyscraper">\n                </md-card-media>\n\n                <md-card-area>\n                  <md-card-header>\n                    <div class="md-title">Title goes here</div>\n                    <div class="md-subhead">Subtitle here</div>\n                  </md-card-header>\n\n                  <md-card-actions>\n                    <md-button>Action</md-button>\n                    <md-button>Action</md-button>\n                  </md-card-actions>\n                </md-card-area>\n              </md-card-media-cover>\n            </md-card>\n          ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Media"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",[a("md-card-header",[a("md-card-header-text",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-media",[a("img",{attrs:{src:"assets/avatar-2.jpg",alt:"People"}})])],1),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1),t._v(" "),a("md-card",[a("md-card-header",[a("md-card-header-text",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-media",{attrs:{"md-medium":""}},[a("img",{attrs:{src:"assets/card-weather.png",alt:"People"}})])],1),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1),t._v(" "),a("md-card",[a("md-card-header",[a("md-card-header-text",[a("div",{staticClass:"md-title"},[t._v("Title goes")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-media",{attrs:{"md-big":""}},[a("img",{attrs:{src:"assets/card-weather.png",alt:"People"}})])],1),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1),t._v(" "),a("md-card",[a("md-card-media-actions",[a("md-card-media",[a("img",{attrs:{src:"assets/cover.png",alt:"Cover"}})]),t._v(" "),a("md-card-actions",[a("md-button",{staticClass:"md-icon-button"},[a("md-icon",[t._v("favorite")])],1),t._v(" "),a("md-button",{staticClass:"md-icon-button"},[a("md-icon",[t._v("bookmark")])],1),t._v(" "),a("md-button",{staticClass:"md-icon-button"},[a("md-icon",[t._v("share")])],1)],1)],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card>\n              <md-card-header>\n                <md-card-header-text>\n                  <div class="md-title">Title goes here</div>\n                  <div class="md-subhead">Subtitle here</div>\n                </md-card-header-text>\n\n                <md-card-media>\n                  <img src="assets/avatar-2.jpg" alt="People">\n                </md-card-media>\n              </md-card-header>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n\n            <md-card>\n              <md-card-header>\n                <md-card-header-text>\n                  <div class="md-title">Title goes here</div>\n                  <div class="md-subhead">Subtitle here</div>\n                </md-card-header-text>\n\n                <md-card-media md-medium>\n                  <img src="assets/card-weather.png" alt="People">\n                </md-card-media>\n              </md-card-header>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n\n            <md-card>\n              <md-card-header>\n                <md-card-header-text>\n                  <div class="md-title">Title goes</div>\n                  <div class="md-subhead">Subtitle here</div>\n                </md-card-header-text>\n\n                <md-card-media md-big>\n                  <img src="assets/card-weather.png" alt="People">\n                </md-card-media>\n              </md-card-header>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n\n            <md-card>\n              <md-card-media-actions>\n                <md-card-media>\n                  <img src="assets/cover.png" alt="Cover">\n                </md-card-media>\n\n                <md-card-actions>\n                  <md-button class="md-icon-button">\n                    <md-icon>favorite</md-icon>\n                  </md-button>\n\n                  <md-button class="md-icon-button">\n                    <md-icon>bookmark</md-icon>\n                  </md-button>\n\n                  <md-button class="md-icon-button">\n                    <md-icon>share</md-icon>\n                  </md-button>\n                </md-card-actions>\n              </md-card-media-actions>\n            </md-card>\n          ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Full Control"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",[a("md-card-area",[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-content",[t._v("\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              ")])],1),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1),t._v(" "),a("md-card",[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-expand",[a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")]),t._v(" "),a("span",{staticStyle:{flex:"1"}}),t._v(" "),a("md-button",{staticClass:"md-icon-button",attrs:{"md-expand-trigger":""}},[a("md-icon",[t._v("keyboard_arrow_down")])],1)],1),t._v(" "),a("md-card-content",[t._v("\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              ")])],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card>\n              <md-card-area>\n                <md-card-media>\n                  <img src="assets/card-image-1.jpg" alt="People">\n                </md-card-media>\n\n                <md-card-header>\n                  <div class="md-title">Title goes here</div>\n                  <div class="md-subhead">Subtitle here</div>\n                </md-card-header>\n\n                <md-card-content>\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n                </md-card-content>\n              </md-card-area>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n\n            <md-card>\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-header>\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-expand>\n                <md-card-actions>\n                  <md-button>Action</md-button>\n                  <md-button>Action</md-button>\n                  <span style="flex: 1"></span>\n                  <md-button class="md-icon-button" md-expand-trigger>\n                    <md-icon>keyboard_arrow_down</md-icon>\n                  </md-button>\n                </md-card-actions>\n\n                <md-card-content>\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n                </md-card-content>\n              </md-card-expand>\n            </md-card>\n          ')])],1)]),t._v(" "),a("example-box",{attrs:{"card-title":"Themes"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",{staticClass:"md-primary"},[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n            ")])],1),t._v(" "),a("md-card",{staticClass:"md-accent"},[a("md-card-header",[a("md-card-header-text",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-menu",{attrs:{"md-size":"4","md-direction":"bottom left"}},[a("md-button",{staticClass:"md-icon-button",attrs:{"md-menu-trigger":""}},[a("md-icon",[t._v("more_vert")])],1),t._v(" "),a("md-menu-content",[a("md-menu-item",[a("span",[t._v("Call")]),t._v(" "),a("md-icon",[t._v("phone")])],1),t._v(" "),a("md-menu-item",[a("span",[t._v("Send a message")]),t._v(" "),a("md-icon",[t._v("message")])],1)],1)],1)],1),t._v(" "),a("md-card-media",[a("img",{attrs:{src:"assets/card-image-1.jpg",alt:"People"}})]),t._v(" "),a("md-card-content",[t._v("\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n            ")])],1),t._v(" "),a("md-card",{staticClass:"md-warn"},[a("md-card-media",[a("img",{attrs:{src:"assets/card-image-2.jpg",alt:"People"}})]),t._v(" "),a("md-card-header",[a("div",{staticClass:"md-title"},[t._v("Title goes here")]),t._v(" "),a("div",{staticClass:"md-subhead"},[t._v("Subtitle here")])]),t._v(" "),a("md-card-actions",[a("md-button",[t._v("Action")]),t._v(" "),a("md-button",[t._v("Action")])],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card class="md-primary">\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-header>\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-actions>\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              </md-card-content>\n            </md-card>\n\n            <md-card class="md-accent">\n              <md-card-header>\n                <md-card-header-text>\n                  <div class="md-title">Title goes here</div>\n                  <div class="md-subhead">Subtitle here</div>\n                </md-card-header-text>\n\n                <md-menu md-size="4" md-direction="bottom left">\n                  <md-button class="md-icon-button" md-menu-trigger>\n                    <md-icon>more_vert</md-icon>\n                  </md-button>\n\n                  <md-menu-content>\n                    <md-menu-item>\n                      <span>Call</span>\n                      <md-icon>phone</md-icon>\n                    </md-menu-item>\n\n                    <md-menu-item>\n                      <span>Send a message</span>\n                      <md-icon>message</md-icon>\n                    </md-menu-item>\n                  </md-menu-content>\n                </md-menu>\n              </md-card-header>\n\n              <md-card-media>\n                <img src="assets/card-image-1.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-content>\n                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.\n              </md-card-content>\n            </md-card>\n\n            <md-card class="md-warn">\n              <md-card-media>\n                <img src="assets/card-image-2.jpg" alt="People">\n              </md-card-media>\n\n              <md-card-header>\n                <div class="md-title">Title goes here</div>\n                <div class="md-subhead">Subtitle here</div>\n              </md-card-header>\n\n              <md-card-actions >\n                <md-button>Action</md-button>\n                <md-button>Action</md-button>\n              </md-card-actions>\n            </md-card>\n          ')])],1)]),t._v(" "),a("example-box",{
attrs:{"card-title":"Complete Example"}},[a("div",{staticClass:"card-holder",slot:"demo"},[a("md-card",{staticClass:"card-example"},[a("md-card-area",{attrs:{"md-inset":""}},[a("md-card-media",{attrs:{"md-ratio":"16:9"}},[a("img",{attrs:{src:"assets/card-example.jpg",alt:"Coffee House"}})]),t._v(" "),a("md-card-header",[a("h2",{staticClass:"md-title"},[t._v("Coffee House")]),t._v(" "),a("div",{staticClass:"md-subhead"},[a("md-icon",[t._v("location_on")]),t._v(" "),a("span",[t._v("2 miles")])],1)]),t._v(" "),a("md-card-content",[t._v("\n                Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.\n              ")])],1),t._v(" "),a("md-card-content",[a("h3",{staticClass:"md-subheading"},[t._v("Today's availability")]),t._v(" "),a("div",{staticClass:"card-reservation"},[a("md-icon",[t._v("access_time")]),t._v(" "),a("md-button-toggle",{staticClass:"md-button-group",attrs:{"md-single":""}},[a("md-button",[t._v("5:30PM")]),t._v(" "),a("md-button",[t._v("7:30PM")]),t._v(" "),a("md-button",[t._v("9:00PM")])],1)],1)]),t._v(" "),a("md-card-actions",[a("md-button",{staticClass:"md-primary"},[t._v("Reserve")])],1)],1)],1),t._v(" "),a("div",{slot:"code"},[a("code-block",{attrs:{lang:"xml"}},[t._v('\n            <md-card class="card-example">\n              <md-card-area md-inset>\n                <md-card-media md-ratio="16:9">\n                  <img src="assets/card-example.jpg" alt="Coffee House">\n                </md-card-media>\n\n                <md-card-header>\n                  <h2 class="md-title">Coffee House</h2>\n                  <div class="md-subhead">\n                    <md-icon>location_on</md-icon>\n                    <span>2 miles</span>\n                  </div>\n                </md-card-header>\n\n                <md-card-content>\n                  Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.\n                </md-card-content>\n              </md-card-area>\n\n              <md-card-content>\n                <h3 class="md-subheading">Today\'s availability</h3>\n                <div class="card-reservation">\n                  <md-icon>access_time</md-icon>\n                  <md-button-toggle md-single class="md-button-group">\n                    <md-button>5:30PM</md-button>\n                    <md-button>7:30PM</md-button>\n                    <md-button>9:00PM</md-button>\n                  </md-button-toggle>\n                </div>\n              </md-card-content>\n\n              <md-card-actions>\n                <md-button class="md-primary">Reserve</md-button>\n              </md-card-actions>\n            </md-card>\n          ')]),t._v(" "),a("code-block",{attrs:{lang:"sass"}},[t._v("\n            .card-example {\n              .md-subhead {\n                .md-icon {\n                  $size: 16px;\n\n                  width: $size;\n                  min-width: $size;\n                  height: $size;\n                  min-height: $size;\n                  font-size: $size;\n                  line-height: $size;\n                }\n\n                span {\n                  vertical-align: middle;\n                }\n              }\n\n              .card-reservation {\n                margin-top: 8px;\n                display: flex;\n                align-items: center;\n                justify-content: space-around;\n\n                .md-icon {\n                  margin: 8px;\n                  color: rgba(#000, .54) !important;\n                }\n\n                .md-button {\n                  border-radius: 2px !important;\n                }\n              }\n            }\n          ")])],1)])],1)])],1)},staticRenderFns:[]}}});