14.0.0 • Published 5 months ago

@material/card v14.0.0

Weekly downloads
43,132
License
MIT
Repository
github
Last release
5 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/cardmrcwmaterial-components-web@everything-registry/sub-chunk-584react-mdcdemo-stencil-track-listsnabbdom-material-componentsstencil-timerstencil-todo-liststencil-track-listreact-material-web-componentsember-cli-mdc-cardelectron-test-uiember-material-componentsbw-material@betsybot/betsy-web-components@betazuul/cardclosure-react-card@budibase/materialdesign-componentscollectiveone-webcomponentscomponents-library-v1preact-material-componentspreact-material-components-mgr@blackpurl/web-componentsaurelia-material-uiaurelia-mdc-ui@arterial/card@aurelia2-mdc-web/card@aurelia-mdc-web/card@aurelia-material-components/card@authentic/mwc-card@detachhead/smui-cardqpilot-delivery-date@angular/material-experimental@angular/materialflicktrip-webcomponentssvelte-arcadiatest-rsmdc@finastra/base-card@finastra/card@emuanalytics/flow-rdf@lucasecdb/rmdc@preact-material-components/card@plonquo/ember-material-components@pitaya-components/accordion@pitaya-components/card@mhamrah/svelte-material-ui@materialr/card@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@maicol07/material-web-additions@maicol07/mwa-card@maicol07/mwc-card@marcoparrone/react-nodes@react-mdc/card@rmwc/card@robertkern/vue-material@o-rango/orango-material-design@lcap-ui/card@mcwv/card@mdc-stencil/card@material/react-card@morioh/material@worm425/betsy-web-components@smui/card@vue-cruder/uisvmdsvelterialvegatrovue-compostvue-material-design-componentsvoyager-componentsgesdisc-componentsuui-componentsjsonresume-theme-material-designwhateverrrrrrmaterial-toolboxmaterial-imba@gmvdev/materialslogik-config-component@inovex.de/elements@infinitebrahmanuniverse/nolb-_matemetaexplorer-react-components
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

2.1.1

5 years ago

2.0.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.0

5 years ago

0.41.1

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.38.1

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.37.0

6 years ago

0.36.1

6 years ago

0.36.0

6 years ago

0.36.0-0

6 years ago

0.35.0

6 years ago

0.34.1

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.0

6 years ago

0.28.0

6 years ago

0.27.0

6 years ago

0.25.0

6 years ago

0.24.0

6 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.8

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago