Skip to content

Commit

Permalink
Update readme to have an inline demo & not include docs (#83)
Browse files Browse the repository at this point in the history
  • Loading branch information
samuelli authored Sep 30, 2016
1 parent e0c01ae commit de34746
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 53 deletions.
118 changes: 66 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,65 +1,79 @@

<!---
This README is automatically generated from the comments in these files:
paper-card.html
Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)
The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues
-->

[![Build status](https://travis-ci.org/PolymerElements/paper-card.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-card)

_[Demo and API docs](https://elements.polymer-project.org/elements/paper-card)_


##&lt;paper-card&gt;

Material design: [Cards](https://www.google.com/design/spec/components/cards.html)

`paper-card` is a container with a drop shadow.

Example:

<!---
```html
<paper-card heading="Card Title">
<div class="card-content">Some content</div>
<div class="card-actions">
<paper-button>Some action</paper-button>
</div>
</paper-card>
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/communication-icons.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="paper-card.html">
<style is="custom-style">
body {
display: flex;
align-items: center;
justify-content: center;
}
paper-card {
max-width: 500px;
}
.cafe-header { @apply(--paper-font-headline); }
.cafe-light { color: var(--paper-grey-600); }
.cafe-location {
float: right;
font-size: 15px;
vertical-align: middle;
}
.cafe-reserve { color: var(--google-blue-500); }
iron-icon.star {
--iron-icon-width: 16px;
--iron-icon-height: 16px;
color: var(--paper-amber-500);
}
iron-icon.star:last-of-type { color: var(--paper-grey-500); }
</style>
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```

Example - top card image:

-->
```html
<paper-card heading="Card Title" image="/path/to/image.png" alt="image">
...
<paper-card image="demo/donuts.png">
<div class="card-content">
<div class="cafe-header">Cafe Basilico
<div class="cafe-location cafe-light">
<iron-icon icon="communication:location-on"></iron-icon>
<span>250ft</span>
</div>
</div>
<div class="cafe-rating">
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
<iron-icon class="star" icon="star"></iron-icon>
</div>
<p>$・Italian, Cafe</p>
<p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting.</p>
</div>
<div class="card-actions">
<div class="horizontal justified">
<paper-icon-button icon="icons:event"></paper-icon-button>
<paper-button>5:30PM</paper-button>
<paper-button>7:30PM</paper-button>
<paper-button>9:00PM</paper-button>
<paper-button class="cafe-reserve">Reserve</paper-button>
</div>
</div>
</paper-card>
```

### Accessibility

By default, the `aria-label` will be set to the value of the `heading` attribute.

### Styling

The following custom properties and mixins are available for styling:

| Custom property | Description | Default |
| --- | --- | --- |
| `--paper-card-background-color` | The background color of the card | `--primary-background-color` |
| `--paper-card-header-color` | The color of the header text | `#000` |
| `--paper-card-header` | Mixin applied to the card header section | `{}` |
| `--paper-card-header-text` | Mixin applied to the title in the card header section | `{}` |
| `--paper-card-header-image` | Mixin applied to the image in the card header section | `{}` |
| `--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}` |
| `--paper-card-content` | Mixin applied to the card content section | `{}` |
| `--paper-card-actions` | Mixin applied to the card action section | `{}` |
| `--paper-card` | Mixin applied to the card | `{}` |


1 change: 0 additions & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
"card"
],
"main": "paper-card.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-card.git"
Expand Down

0 comments on commit de34746

Please sign in to comment.