Switch branches/tags
chore/all/remove-event-handlers-from-adapters chore/button/alternates chore/checkbox/no-more-importants chore/image-list-screenshot chore/infra/high-contrast-rtl-screenshots chore/infra/not-old-ios chore/infrastructure/remove-normalize-css chore/license chore/list/list-item chore/package/update-sass-variables-to-default chore/select/update-adapter-value-methods chore/webpack/building-demos debugging-dumb-ios-tests docs/deploy-site docs/icon-button-meta-36 docs/survey-link-readmes-style docs/40 docs/41 drcampbell-fix/select-height experiment/drawer experimental/advorak/karma-cbt-runner experimental/browser-compat experimental/button-no-line-height experimental/card/ripple-surface experimental/drawer/ios-animation experimental/fab-mixins-kgf experimental_feat_extendedfab_issue2043 experimental_feat_extendedfab_transform experimental_feat_switch_colorscheme experimental/feature-targeting experimental/handlebars experimental/ie10-compat experimental/infra/button-flakiness experimental/lynnjepsen/screenshot-test experimental/m2-card-prototype experimental/menues1 experimental/outline-text-field experimental/ripple-cleanup-kgf experimental/ripple-ie-js-focus experimental/ripple-unbounded experimental/sassdoc experimental/screenshot-testing/cbt experimental/shape-ripple-ms experimental_shapes_system_mvp_single_radius experimental_shapes_system_mvp experimental/sliders/arrow-motions experimental/sliders/continuous experimental/sliders/discrete experimental/sliders/eventhandlers experimental/sliders/mixins experimental/sliders/ripple-states experimental/states-kgf experimental/states-nofocusripple-kgf experimental/states/selected experimental/text-field-outlined-flex experimental/textfield-improvements-prototype experimental_textfield_error_state_proposed experimental/theme/demo experimental/theme/disabled experimental/typescript-definitions feat/card/states-ripple-surface feat/chips/elevation-mixin feat/dialog feat_extendedfab_issue2043_roboto_font feat/invalid-input-label feat/list_toggle_tabindex feat/navigation-drawer-dismissible-foundation-update feat/navigation-drawer-modal feat/navigation-drawer-new feat/navigation-drawer-sass-improve feat/navigation-drawer-water feat/navigation-drawer feat/new-switch feat/rail-drawer feat/side-sheet-scss-cleanup feat/side-sheet feat/slider feat/sliders/arrow-motion feat/sliders/disabled feat/sliders/discrete feat/sliders/tick-mark-coloring feat/snackbar--prototype feat/tabs/tab-bar feat/tabs/tab-compute-dimensions feat/tabs/tab-handlers feat/tabs/tab-indicator-content feat/tabs/tab-indicator-in-tab feat/tabs/tab-scroller feat/tabs/tab feat/tabs/tabs-params-matching feat/test/button-assets-2-gcs feat/theme-emphasis fix/button/stroke-lineheight fix/checkbox/css-background-fade fix/chips/select fix/dialog-spec fix/drawer/fixture-js fix/drawer/page-scroll-issue fix/infrastructure/closure-module-declarations fix/list_checkbox_selectedindex fix/menu-surface-z-index fix/menu-surface/move-event-registration fix/menu/selection-group-styles fix/node-version-travisci fix/notched-outline/fix-overflow fix/outlined-shape-radius fix/slider/center fix/text-field/outline-color fix/textarea-center greenkeeper/autoprefixer-9.2.0 greenkeeper/autoprefixer-9.2.1 greenkeeper/autoprefixer-9.3.0 greenkeeper/autoprefixer-9.3.1 greenkeeper/autoprefixer-9.4.0 greenkeeper/autoprefixer-9.4.1 greenkeeper/autoprefixer-9.4.2 greenkeeper/babel-loader-8.0.0 greenkeeper/babel-loader-8.0.1 greenkeeper/babel-loader-8.0.2 greenkeeper/babel-loader-8.0.3 greenkeeper/babel-loader-8.0.4 greenkeeper/colors-1.3.3 greenkeeper/conventional-commits-parser-3.0.1 greenkeeper/css-loader-2.0.1 greenkeeper/dart-sass-1.15.0 greenkeeper/dart-sass-1.15.1 greenkeeper/dart-sass-1.15.2 greenkeeper/detect-port-1.3.0 greenkeeper/fibers-3.1.0 greenkeeper/fibers-3.1.1 greenkeeper/fs-extra-7.0.1 greenkeeper/google-closure-compiler-20181028.0.0 greenkeeper/google-closure-compiler-20181028.0.1 greenkeeper/google-closure-compiler-20181125.0.1 greenkeeper/google-closure-compiler-20181125.1.0 greenkeeper/google-closure-compiler-20181210.0.0 greenkeeper/husky-1.1.2 greenkeeper/husky-1.1.3 greenkeeper/husky-1.1.4 greenkeeper/husky-1.2.0 greenkeeper/husky-1.2.1 greenkeeper/karma-3.1.0 greenkeeper/karma-3.1.1 greenkeeper/karma-3.1.2 greenkeeper/karma-3.1.3 greenkeeper/karma-sauce-launcher-2.0.0 greenkeeper/karma-sauce-launcher-2.0.1 greenkeeper/karma-sauce-launcher-2.0.2 greenkeeper/karma-webpack-3.0.5 greenkeeper/lerna-2.10.1 greenkeeper/lerna-3.0.0 greenkeeper/lerna-3.0.1 greenkeeper/lerna-3.0.2 greenkeeper/lerna-3.0.3 greenkeeper/lerna-3.0.4 greenkeeper/lerna-3.0.5 greenkeeper/lerna-3.0.6 greenkeeper/lerna-3.1.0 greenkeeper/lerna-3.1.1 greenkeeper/lerna-3.1.2 greenkeeper/lerna-3.2.0 greenkeeper/lerna-3.2.1 greenkeeper/lerna-3.3.0 greenkeeper/lerna-3.3.1 greenkeeper/lerna-3.3.2 greenkeeper/lerna-3.4.0 greenkeeper/lerna-3.4.1 greenkeeper/lerna-3.4.2 greenkeeper/lerna-3.4.3 greenkeeper/lerna-3.5.0 greenkeeper/lerna-3.5.1 greenkeeper/lerna-3.6.0 greenkeeper/npm-run-all-4.1.4 greenkeeper/npm-run-all-4.1.5 greenkeeper/@octokit/rest-16.2.0 greenkeeper/recast-0.16.1 greenkeeper/semver-5.6.0 greenkeeper/simple-git-1.98.0 greenkeeper/simple-git-1.99.0 greenkeeper/simple-git-1.100.0 greenkeeper/simple-git-1.101.0 greenkeeper/simple-git-1.102.0 greenkeeper/simple-git-1.103.0 greenkeeper/simple-git-1.104.0 greenkeeper/simple-git-1.105.0 greenkeeper/simple-git-1.106.0 greenkeeper/simple-git-1.107.0 greenkeeper/standard-changelog-2.0.3 greenkeeper/standard-changelog-2.0.4 greenkeeper/standard-changelog-2.0.5 greenkeeper/standard-changelog-2.0.6 greenkeeper/stylelint-9.6.0 greenkeeper/stylelint-9.7.0 greenkeeper/stylelint-9.7.1 greenkeeper/stylelint-9.8.0 greenkeeper/stylelint-9.9.0 greenkeeper/stylelint-scss-3.3.1 greenkeeper/stylelint-scss-3.3.2 greenkeeper/stylelint-scss-3.4.0 greenkeeper/stylelint-scss-3.4.1 greenkeeper/stylelint-selector-bem-pattern-2.0.0 greenkeeper/testdouble-3.8.2 greenkeeper/testdouble-3.9.0 greenkeeper/testdouble-3.9.1 greenkeeper/webpack-4.0.0 greenkeeper/webpack-4.0.1 greenkeeper/webpack-4.1.0 greenkeeper/webpack-4.1.1 greenkeeper/webpack-4.2.0 greenkeeper/webpack-4.3.0 greenkeeper/webpack-4.4.0 greenkeeper/webpack-4.5.0 greenkeeper/webpack-4.6.0 greenkeeper/webpack-4.7.0 greenkeeper/webpack-4.8.2 greenkeeper/webpack-4.8.3 greenkeeper/webpack-4.9.0 greenkeeper/webpack-4.9.1 greenkeeper/webpack-4.9.2 greenkeeper/webpack-4.10.0 greenkeeper/webpack-4.10.1 greenkeeper/webpack-4.10.2 greenkeeper/webpack-4.11.0 greenkeeper/webpack-4.11.1 greenkeeper/webpack-4.12.0 greenkeeper/webpack-4.12.1 greenkeeper/webpack-4.12.2 greenkeeper/webpack-4.13.0 greenkeeper/webpack-4.14.0 greenkeeper/webpack-4.15.0 greenkeeper/webpack-4.15.1 greenkeeper/webpack-4.16.0 greenkeeper/webpack-4.16.1 greenkeeper/webpack-4.16.2 greenkeeper/webpack-4.16.3 greenkeeper/webpack-4.16.4 greenkeeper/webpack-4.16.5 greenkeeper/webpack-4.17.0 greenkeeper/webpack-4.17.1 greenkeeper/webpack-4.17.2 greenkeeper/webpack-4.17.3 greenkeeper/webpack-4.18.0 greenkeeper/webpack-4.18.1 greenkeeper/webpack-4.19.0 greenkeeper/webpack-4.19.1 greenkeeper/webpack-4.20.0 greenkeeper/webpack-4.20.1 greenkeeper/webpack-4.20.2 greenkeeper/webpack-4.21.0 greenkeeper/webpack-4.22.0 greenkeeper/webpack-4.23.0 greenkeeper/webpack-4.23.1 greenkeeper/webpack-4.24.0 greenkeeper/webpack-4.25.0 greenkeeper/webpack-4.25.1 greenkeeper/webpack-4.26.0 greenkeeper/webpack-4.26.1 greenkeeper/webpack-4.27.0 greenkeeper/webpack-4.27.1 greenkeeper/webpack-dev-server-3.0.0 greenkeeper/webpack-dev-server-3.1.0 greenkeeper/webpack-dev-server-3.1.1 greenkeeper/webpack-dev-server-3.1.2 greenkeeper/webpack-dev-server-3.1.3 greenkeeper/webpack-dev-server-3.1.4 greenkeeper/webpack-dev-server-3.1.5 greenkeeper/webpack-dev-server-3.1.6 greenkeeper/webpack-dev-server-3.1.7 greenkeeper/webpack-dev-server-3.1.8 greenkeeper/webpack-dev-server-3.1.9 greenkeeper/webpack-dev-server-3.1.10 latest-release list_custom_event_issue3481 list_custom_event_menu_update_issue3481 list_twolines_baseline_issue3038 maintenance/text-field master mock/crane origin/experimental/sliders patrickrodee-patch-1 patrickrodee-patch-2 refactor/text-field/opacity refactor/theme/color ripple/events ripple/prototype slider/mixins tabzzzzzzzzz test/switch-update textfields/verticalAlignment theme_alpha_variables_issue3066 typography_text_baseline
Nothing to show
Find file History
kfranqueiro feat(button): Add trailing icon support via label element (#4159)
BREAKING CHANGE: We recommend placing each button's text label within a mdc-button__label element. This does not immediately break existing MDC Button usage, but updating is recommended to future-proof against potential upcoming changes.
Latest commit fa41579 Dec 12, 2018

README.md

Cards

MDC Card is a component that implements the Material Design card component, and makes it available to developers as a set of CSS classes.

Design & API Documentation

Installation

npm install @material/card

Usage

HTML Structure

<div class="mdc-card">
  Simple
</div>

Fully-featured:

<div class="mdc-card">
  <div class="mdc-card__media mdc-card__media--square">
    <div class="mdc-card__media-content">Title</div>
  </div>
  <!-- ... content ... -->
  <div class="mdc-card__actions">
    <div class="mdc-card__action-buttons">
      <button class="mdc-button mdc-card__action mdc-card__action--button">
        <span class="mdc-button__label">Action 1</span>
      </button>
      <button class="mdc-button mdc-card__action mdc-card__action--button">
        <span class="mdc-button__label">Action 2</span>
      </button>
    </div>
    <div class="mdc-card__action-icons">
      <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
      <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
    </div>
  </div>
</div>

Cards don't come with a predefined width, height, padding, or margin. In its simplest form (just a single element with mdc-card), a card is basically just mdc-elevation + border-radius.

Cards expand horizontally to fill all available space, and vertically to fit their contents.

If you'd like to maintain a consistent width and height across cards, you'll need to set it in your styles:

.my-card {
  height: 350px;
  width: 350px;
}

Icons

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Content blocks

Cards are composed of different content blocks, which are typically laid out vertically.

Because every app is different, there are no "standard" layouts for card content; each app should define their own.

However, MDC Card does provide styles for two common card elements: rich media (images or video) and actions.

Rich media
.my-card__media {
  background-image: url("pretty.jpg");
}
<div class="my-card__media mdc-card__media mdc-card__media--16-9">
  <div class="mdc-card__media-content">Title</div>
</div>

This area is used for showing rich media in cards, and optionally as a container. Use the mdc-card__media CSS class and the optional modifier classes.

Actions
<div class="mdc-card__actions">
  <button class="mdc-button mdc-card__action mdc-card__action--button">
    <span class="mdc-button__label">Action 1</span>
  </button>
  <button class="mdc-button mdc-card__action mdc-card__action--button">
    <span class="mdc-button__label">Action 2</span>
  </button>
</div>

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:

<div class="mdc-card__actions">
  <button class="mdc-icon-button mdc-card__action mdc-card__action--icon"
     aria-pressed="false"
     aria-label="Add to favorites"
     title="Add to favorites">
   <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
   <i class="material-icons mdc-icon-button__icon">favorite_border</i>
  </button>
  <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
  <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
</div>

Be sure to include the mdc-card__action class on every action for correct positioning. In addition, button icons should use the mdc-card__action--button class, and icon actions should use the mdc-card__action--icon class.

To have a single action button take up the entire width of the action row, use the --full-bleed modifier on the row:

<div class="mdc-card__actions mdc-card__actions--full-bleed">
  <a class="mdc-button mdc-card__action mdc-card__action--button" href="#">
    <span class="mdc-button__label">All Business Headlines</span>
    <i class="material-icons" aria-hidden="true">arrow_forward</i>
  </a>
</div>

To display buttons and icons in the same row, wrap them in mdc-card__action-buttons and mdc-card__action-icons elements:

<div class="mdc-card__actions">
  <div class="mdc-card__action-buttons">
    <button class="mdc-button mdc-card__action mdc-card__action--button">
      <span class="mdc-button__label">Read</span>
    </button>
    <button class="mdc-button mdc-card__action mdc-card__action--button">
      <span class="mdc-button__label">Bookmark</span>
    </button>
  </div>
  <div class="mdc-card__action-icons">
   <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
    <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
  </div>
</div>

Styles

@import "@material/card/mdc-card";

CSS Classes

CSS Class Description
mdc-card Mandatory. The main card element.
mdc-card--outlined Optional. Removes the shadow and displays a hairline outline instead.
mdc-card__primary-action Optional. The main tappable area of the card. Typically contains most (or all) card content except mdc-card__actions. Only applicable to cards that have a primary action that the main surface should trigger.
mdc-card__media Optional. Media area that displays a custom background-image with background-size: cover.
mdc-card__media--square Optional. Automatically scales the media area's height to equal its width.
mdc-card__media--16-9 Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio.
mdc-card__media-content Optional. An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image.
mdc-card__actions Optional. Row containing action buttons and/or icons.
mdc-card__actions--full-bleed Optional. Removes the action area's padding and causes its only child (an mdc-card__action element) to consume 100% of the action area's width.
mdc-card__action-buttons Optional. A group of action buttons, displayed on the left side of the card (in LTR), adjacent to mdc-card__action-icons.
mdc-card__action-icons Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to __action-buttons.
mdc-card__action Optional. An individual action button or icon.
mdc-card__action--button Optional. An action button with text.
mdc-card__action--icon Optional. An action icon with no text. We recommend using Material Icons from Google Fonts.

Sass Mixins

Mixin Description
mdc-card-fill-color($color) Sets the fill color of a card.
mdc-card-outline($color, $thickness) Sets the color and thickness of a card's outline (but does not remove its shadow).
mdc-card-shape-radius($radius, $rtl-reflexive) Sets the rounded shape to card with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to false.
mdc-card-media-aspect-ratio($x, $y) Maintains the given aspect ratio on a mdc-card__media subelement by dynamically scaling its height relative to its width.