14.0.0 • Published 12 months ago

@material/card v14.0.0

Weekly downloads
43,132
License
MIT
Repository
github
Last release
12 months ago

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">Action 1</button>
      <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
    </div>
    <div class="mdc-card__action-icons">
      <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="Share">share</i>
      <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="More options">more_vert</i>
    </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;
}

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">Action 1</button>
  <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</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">
  <i class="mdc-icon-toggle material-icons mdc-card__action mdc-card__action--icon"
     tabindex="0"
     role="button"
     aria-pressed="false"
     aria-label="Add to favorites"
     title="Add to favorites"
     data-toggle-on='{"content": "favorite", "label": "Remove from favorites"}'
     data-toggle-off='{"content": "favorite_border", "label": "Add to favorites"}'>
    favorite_border
  </i>
  <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="Share">share</i>
  <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="More options">more_vert</i>
</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="#">
    All Business Headlines
    <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">Read</button>
    <button class="mdc-button mdc-card__action mdc-card__action--button">Bookmark</button>
  </div>
  <div class="mdc-card__action-icons">
    <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="Share">share</i>
    <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="More options">more_vert</i>
  </div>
</div>

CSS Classes

CSS ClassDescription
mdc-cardMandatory, for the card element
mdc-card--outlinedRemoves the shadow and displays a hairline outline instead
mdc-card__primary-actionThe 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__mediaMedia area that displays a custom background-image with background-size: cover
mdc-card__media--squareAutomatically scales the media area's height to equal its width
mdc-card__media--16-9Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio
mdc-card__media-contentAn absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image
mdc-card__actionsRow containing action buttons and/or icons
mdc-card__actions--full-bleedRemoves 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-buttonsA group of action buttons, displayed on the left side of the card (in LTR), adjacent to mdc-card__action-icons
mdc-card__action-iconsA group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to __action-buttons
mdc-card__actionAn individual action button or icon
mdc-card__action--buttonAn action button with text
mdc-card__action--iconAn action icon with no text

Sass Mixins

MixinDescription
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-corner-radius($radius)Sets the corner radius of a card
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
playtwo-core-cms-sections@frannca/ngx-admin@zentek/accordion@zentek/cardpwa-test-hpwa-test1pwa-test2sot-incubatormdwrapper@beezydev/cardmrcw@everything-registry/sub-chunk-584svmdsvelterialwhateverrrrrrtest-rsmdcsvelte-arcadiavue-compostuui-componentsvoyager-components@detachhead/smui-card@cpangular/ng-material-theme@blackpurl/web-componentsjsonresume-theme-material-designqpilot-delivery-datenextime-delivery-date-web-componentsstencil-timerstencil-todo-liststencil-track-list@arterial/card@authentic/mwc-card@aurelia-mdc-web/card@aurelia-material-components/card@aurelia2-mdc-web/card@betazuul/card@betsybot/betsy-web-components@budibase/materialdesign-componentsvue-material-design-componentsvegatro@finastra/card@finastra/base-card@gmvdev/materials@infinitebrahmanuniverse/nolb-_mate@inovex.de/elements@lcap-ui/card@lucasecdb/rmdc@maicol07/material-web-additions@maicol07/mwa-card@maicol07/mwc-card@mhamrah/svelte-material-ui@marcoparrone/react-nodes@material/react-card@emuanalytics/flow-rdf@mcwv/card@materialr/card@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@mdc-stencil/card@morioh/material@react-mdc/card@plonquo/ember-material-components@preact-material-components/card@rmwc/card@pitaya-components/accordion@pitaya-components/card@o-rango/orango-material-design@smui/card@robertkern/vue-materialmetaexplorer-react-componentsreact-mdcreact-material-web-componentspreact-material-componentspreact-material-components-mgrnextime-delivery-datesnabbdom-material-componentsinner-growthlogik-config-componentmaterial-imbamaterial-components-webmaterial-toolbox@vue-cruder/ui@worm425/betsy-web-componentsadit-demo-libcollectiveone-webcomponentscomponents-library-v1closure-react-carddemo-stencil-track-listaurelia-mdc-uiaurelia-material-uibw-materialelectron-test-uiember-cli-mdc-cardember-material-componentsflicktrip-webcomponentsgesdisc-components
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

3.2.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago

3.1.0

6 years ago

3.1.0-alpha.0

6 years ago

3.0.0

6 years ago

3.0.0-alpha.1

6 years ago

3.0.0-alpha.0

6 years ago

2.3.0

6 years ago

2.1.1

6 years ago

2.0.0

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.44.1

6 years ago

0.44.0

6 years ago

0.43.0

6 years ago

0.42.0

7 years ago

0.41.1

7 years ago

0.41.0

7 years ago

0.40.1

7 years ago

0.40.0

7 years ago

0.39.3

7 years ago

0.39.2

7 years ago

0.39.1

7 years ago

0.39.0

7 years ago

0.38.1

7 years ago

0.38.0

7 years ago

0.37.1

7 years ago

0.37.0

7 years ago

0.36.1

7 years ago

0.36.0

7 years ago

0.36.0-0

7 years ago

0.35.0

7 years ago

0.34.1

7 years ago

0.34.0

7 years ago

0.33.0

7 years ago

0.32.0

7 years ago

0.31.0

7 years ago

0.30.0

7 years ago

0.29.0

7 years ago

0.28.0

7 years ago

0.27.0

8 years ago

0.25.0

8 years ago

0.24.0

8 years ago

0.2.10

8 years ago

0.2.9

8 years ago

0.2.8

8 years ago

0.2.7

8 years ago

0.2.6

8 years ago

0.2.5

8 years ago

0.2.4

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.8

8 years ago

0.1.7

8 years ago

0.1.6

8 years ago

0.1.5

8 years ago

0.1.4

8 years ago

0.1.3

8 years ago

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago