Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities home apps Buttons palette Two
Materially
github-circle-black-transparent

Cards

Cards contain content and actions that relate information about a subject
Material Design Guidelines: Buttons

Example

There are three types of cards: elevated, filled, and outlined
Regular
card
Filled
card
Outlined
card
Actionable
ripple

Basic card

landscape
Headline
Subhead
Supporting text. Contrary to popular belief, Lorem Ipsum is not simply random text.
Some other content. Just add your content without specifying slots
Actionable
Ripple
Click to see ripple
<mc-card style="max-width: 320px">
  <img class="rounded medium" alt=landscape slot=image src=...>
  <div slot=headline>Headline</div>
  <div slot=subhead>Subhead</div>
  <div slot=supporting-text>Supporting text. Contrary to popular belief, Lorem Ipsum is not simply random text.</div>
  <div>Some other content. Just add your content without specifying slots</div>
</mc-card>

<mc-card onclick="console.log('action')" style="width: 220px; height: 120px;">
  <div slot=headline>Actionable</div>
  <div slot=subhead>Ripple</div>
  <div slot=supporting-text>Click to see ripple</div>
</mc-card>

Card types

Regular
card
Filled
card
Outlined
card
<mc-card>
  <div slot=headline>Regular</div>
  <div slot=subhead>card</div>
</mc-card>

<mc-card filled>
  <div slot=headline>Filled</div>
  <div slot=subhead>card</div>
</mc-card>

<mc-card outlined>
  <div slot=headline>Outlined</div>
  <div slot=subhead>card</div>
</mc-card>

Expanding card

landscape
Headline
Subhead
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
 landscape
Expanding with scroll
Subhead
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
<mc-card>
  <img class="medium rounded" alt=landscape slot=image src=...>

  <div slot=headline>Headline</div>
  <div slot=subhead>Subhead</div>

  <div slot=expanded>
    <div class=supporting-text>
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
      Latin literature
    </div>
  </div>
</mc-card>

<mc-card style="max-width: 320px">
  <img class="rounded medium" alt=landscape slot=image src=...>

  <div slot=headline>Expanding with scroll</div>
  <div slot=subhead>Subhead</div>

  <div slot=expanded>
    <div class=supporting-text>
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical
      Latin
    </div>
  </div>
</mc-card>

Grids and lists

By default the container will auto swap between grid and list based on screen size. You can for it to always be be one or the other by using classes: 'grid' 'mc-list'
landscape
Headline
Subhead
one two three four five six.
<div slot=supporting-text>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div> landscape
Headline
Subhead
one two three four five six.
 landscape
Headline
Subhead
one two three four five six.
 landscape
Headline
Subhead
one two three four five six.
 landscape
Headline
Subhead
one two three four five six.
<div slot=supporting-text>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</div> landscape
Headline
Subhead
one two three four five six.
 
<mc-card-group>
  
    <mc-card></mc-card>
  

    <mc-card></mc-card>
  

    <mc-card></mc-card>
  

    <mc-card></mc-card>
  

    <mc-card></mc-card>
  

    <mc-card></mc-card>
  
</mc-card-group>

Drag reorder - move item position

Press and hold on card to reorder
By default the container will auto swap between grid and list based on screen size. You can for it to always be be one or the other by using classes: 'grid' 'mc-list'
landscape
0
Subhead
one two three four five six.
 landscape
1
Subhead
one two three four five six.
 landscape
2
Subhead
one two three four five six.
 landscape
3
Subhead
one two three four five six.
 landscape
4
Subhead
one two three four five six.
 landscape
5
Subhead
one two three four five six.
 
<mc-card-group reorder>
  <mc-card></mc-card>
  <mc-card></mc-card>
  <mc-card></mc-card>
</mc-card-group>

Swipe actions

Only works on mobile
favorite
Favorite toggle
Subhead
one two three four five six.
delete
Remove
Subhead
one two three four five six.
 
<mc-card style="max-width: 320px;" onchange=console.log(event.detail) value=favorite>
  <mc-icon action=favorite slot=swipe-action toggle>favorite</mc-icon>
  <div slot=headline>Favorite toggle</div>
  <div slot=subhead>Subhead</div>
  <div slot=supporting-text>one two three four five six.</div>
</mc-card>

<mc-card style="max-width: 320px;" onchange=console.log(event.detail) value=favorite>
  <mc-icon action=remove action-remove slot=swipe-action>delete</mc-icon>
  <div slot=headline>Remove</div>
  <div slot=subhead>Subhead</div>
  <div slot=supporting-text>one two three four five six.</div>
</mc-card>

Style

CSS variables that allow you override default values
/* Optional variables for overriding */
  
--mc-card-shape: var(--mc-shape-medium);
--mc-card-container-color: var(--mc-surface-container-low);
--mc-card-text-color: var(--mc-on-surface);
--mc-card-container-color-outlined: var(--mc-surface);
--mc-card-container-color-filled: var(--mc-surface-container-highest);
--mc-card-text-color-filled: var(--mc-on-surface-variant);
--mc-card-header-text-color: var(--mc-on-surface);
--mc-card-subhead-text-color: var(--mc-on-surface-variant);
--mc-card-supporting-text-color: var(--mc-on-surface-variant);
menu home apps Get started