-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implements initial cards, sans expansion and side-placed media.
- Loading branch information
Sérgio Gomes
committed
Aug 5, 2016
1 parent
009d148
commit d898284
Showing
10 changed files
with
461 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
<!DOCTYPE html> | ||
<!-- | ||
Copyright 2016 Google Inc. All rights reserved. | ||
Licensed under the Apache License, Version 2.0 (the "License"); | ||
you may not use this file except in compliance with the License. | ||
You may obtain a copy of the License at | ||
https://www.apache.org/licenses/LICENSE-2.0 | ||
Unless required by applicable law or agreed to in writing, software | ||
distributed under the License is distributed on an "AS IS" BASIS, | ||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
See the License for the specific language governing permissions and | ||
limitations under the License | ||
--> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>MDL Card Demo</title> | ||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> | ||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
<script src="assets/material-design-lite.css.js" charset="utf-8"></script> | ||
<style> | ||
.demo-card { | ||
max-width: 21.875rem; /* 350sp */ | ||
margin-bottom: 24px; | ||
} | ||
|
||
.demo-card--with-avatar .mdl-card__primary { | ||
position: relative; | ||
} | ||
|
||
.demo-card--with-avatar .demo-card__avatar { | ||
position: absolute; | ||
background: #bdbdbd; | ||
height: 2.5rem; /* 40sp */ | ||
width: 2.5rem; /* 40sp */ | ||
border-radius: 50%; | ||
} | ||
|
||
.demo-card--with-avatar .mdl-card__title, | ||
.demo-card--with-avatar .mdl-card__subtitle { | ||
margin-left: 56px; | ||
} | ||
|
||
.demo-card__16-9-media { | ||
background-image: url("images/16-9.jpg"); | ||
background-size: cover; | ||
background-repeat: no-repeat; | ||
height: 12.313rem; /* 197sp, for 16:9 ratio with 350sp demo card width */ | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<main> | ||
<h1>MDL Cards</h1> | ||
<section class="demo-typography--section mdl-typography"> | ||
<div class="mdl-card demo-card"> | ||
<section class="mdl-card__media demo-card__16-9-media"></section> | ||
<section class="mdl-card__supporting-text"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. | ||
</section> | ||
</div> | ||
|
||
<div class="mdl-card demo-card demo-card--with-avatar"> | ||
<section class="mdl-card__primary"> | ||
<div class="demo-card__avatar"></div> | ||
<h1 class="mdl-card__title">Title</h1> | ||
<h2 class="mdl-card__subtitle">Subhead</h2> | ||
</section> | ||
<section class="mdl-card__media demo-card__16-9-media"></section> | ||
<section class="mdl-card__supporting-text"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. | ||
</section> | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
</div> | ||
|
||
<div class="mdl-card demo-card demo-card--with-avatar"> | ||
<section class="mdl-card__primary"> | ||
<div class="demo-card__avatar"></div> | ||
<h1 class="mdl-card__title">Title</h1> | ||
<h2 class="mdl-card__subtitle">Subhead</h2> | ||
</section> | ||
<section class="mdl-card__media demo-card__16-9-media"></section> | ||
<section class="mdl-card__actions mdl-card__actions--vertical"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
</div> | ||
|
||
<div class="mdl-card demo-card"> | ||
<section class="mdl-card__media demo-card__16-9-media"></section> | ||
<section class="mdl-card__primary"> | ||
<h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1> | ||
<h2 class="mdl-card__subtitle">Subtitle here</h2> | ||
</section> | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
</div> | ||
|
||
<div class="mdl-card demo-card"> | ||
<section class="mdl-card__primary"> | ||
<h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1> | ||
<h2 class="mdl-card__subtitle">Subtitle here</h2> | ||
</section> | ||
<section class="mdl-card__supporting-text"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing 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. | ||
</section> | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
</div> | ||
|
||
<style> | ||
.demo-card--bg-demo { | ||
height: 21.875rem; /* 350sp */ | ||
background-image: url("images/1-1.jpg"); | ||
background-size: cover; | ||
background-repeat: no-repeat; | ||
} | ||
|
||
.demo-card--bg-demo .mdl-card__primary, | ||
.demo-card--bg-demo .mdl-card__actions { | ||
background: rgba(0, 0, 0, .4); | ||
} | ||
</style> | ||
<div class="mdl-card mdl-card--dark-theme demo-card demo-card--bg-demo"> | ||
<section class="mdl-card__primary"> | ||
<h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1> | ||
<h2 class="mdl-card__subtitle">Subtitle here</h2> | ||
</section> | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button mdl-button--dark-theme">Action 1</button> | ||
<button class="mdl-button mdl-button--dark-theme">Action 2</button> | ||
</section> | ||
</div> | ||
|
||
<style> | ||
.demo-card--small { | ||
max-width: 10.938rem; /* 175sp */ | ||
} | ||
|
||
.demo-card--small .mdl-card__media { | ||
background-image: url("images/1-1.jpg"); | ||
background-size: cover; | ||
background-repeat: no-repeat; | ||
height: 10.938rem; /* 175sp, for 1:1 ratio with 175sp demo card width */ | ||
} | ||
</style> | ||
<div class="mdl-card demo-card demo-card--small"> | ||
<section class="mdl-card__media"> | ||
<h1 class="mdl-card__title mdl-card__title--large">Title</h1> | ||
</section> | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button">Action 1</button> | ||
</section> | ||
</div> | ||
</section> | ||
</main> | ||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
# mdl-card | ||
|
||
MDL card is a component that implements the | ||
[Material Design card component](https://material.google.com/components/cards.html), and makes it available to | ||
developers as a set of CSS classes. | ||
|
||
## Installation | ||
|
||
> Note: Installation via the npm registry will be available after alpha. | ||
|
||
## Usage | ||
|
||
```html | ||
<div class="mdl-card demo-card"> | ||
<section class="mdl-card__primary"> | ||
<h1 class="mdl-card--large-title">Title goes here</h1> | ||
<h2 class="mdl-card--subtitle">Subtitle here</h2> | ||
</section> | ||
<section class="mdl-card__supporting-text"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing 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. | ||
</section> | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
</div> | ||
``` | ||
|
||
Cards don't come with a predefined width or height. They expand horizontally to fill all available space, and vertically | ||
to fit their contents. | ||
|
||
If you'd like to maintain a consistent height and width across cards, you'll need to set it in your styles: | ||
|
||
```css | ||
.my-card-container .mdl-card { | ||
height: 350px; | ||
width: 350px; | ||
} | ||
``` | ||
|
||
Content will be bottom-aligned if it's smaller than the height of the card. | ||
|
||
|
||
### Content blocks | ||
|
||
Cards are composed of different content blocks, which are typically laid out in vertical succession. | ||
|
||
|
||
#### Rich media | ||
|
||
```css | ||
#example .mdl-card__media { | ||
background-image: url("pretty.jpg"); | ||
background-size: cover; | ||
background-repeat: no-repeat; | ||
height: 90px; | ||
} | ||
``` | ||
|
||
```html | ||
<section class="mdl-card__media"></section> | ||
``` | ||
|
||
This area is used for showing rich media in cards. Use the `mdl-card__media` CSS class. | ||
|
||
|
||
#### Actions | ||
|
||
```html | ||
<section class="mdl-card__actions"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
``` | ||
|
||
This area is used for showing different actions the user can take. It's typically used with buttons, as in the example | ||
above, or with icon buttons, as below: | ||
|
||
> TODO(sgomes): Add icon button support and example. | ||
You can use the `mdl-card__actions--vertical` option to lay actions out vertically instead of horizontally: | ||
|
||
```html | ||
<section class="mdl-card__actions mdl-card__actions--vertical"> | ||
<button class="mdl-button">Action 1</button> | ||
<button class="mdl-button">Action 2</button> | ||
</section> | ||
``` | ||
|
||
#### Primary title / text | ||
|
||
```html | ||
<section class="mdl-card__primary"> | ||
<h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1> | ||
<h2 class="mdl-card__subtitle">Subtitle here</h2> | ||
</section> | ||
``` | ||
|
||
This area is used for titles and subtitles: | ||
|
||
| Class | Description | | ||
| ------------------------ | ----------------------------------------------- | | ||
| `mdl-card__primary` | Defines the primary text / title content block. | | ||
| `mdl-card__title` | A title block. | | ||
| `mdl-card__title--large` | An option for the title, to make it larger. | | ||
| `mdl-card--subtitle` | A subtitle block. | | ||
|
||
Note that the title and subtitle classes can also be used outside of the primary title / text content block. | ||
|
||
|
||
#### Supporting text | ||
|
||
```html | ||
<section class="mdl-card__supporting-text"> | ||
Lorem ipsum dolor sit amet, consectetur adipisicing 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. | ||
</section> | ||
``` | ||
|
||
This area is used for displaying the bulk of the textual content of the card. Use the `mdl-card__supporting-text` CSS | ||
class. |
Oops, something went wrong.