Font and theme export

Cards

Materialize is a modern responsive CSS framework based on Material Design by Google.

Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Basic Card

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link This is a link 
<div class="card">
  <div class="card-content">
    <span class="card-title">Card Title</span>
    <p>I am a very simple card. I am good at containing small bits of information.
    I am convenient because I require little markup to use effectively.</p>
  </div>
  <div class="card-action">
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>
  </div>
</div>

Image Card

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link

Here is the standard card with an image thumbnail. 

<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg">
    <span class="card-title">Card Title</span>
  </div>
  <div class="card-content">
    <p>I am a very simple card. I am good at containing small bits of information.
    I am convenient because I require little markup to use effectively.</p>
  </div>
  <div class="card-action">
    <a href="#">This is a link</a>
  </div>
</div>

Image Only

Use only card-image inside the card to display an image with an optional title. Omit card-content and card-action when no description or footer is needed.

Mountain landscape Card Title 
<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg" alt="Mountain landscape">
    <span class="card-title">Card Title</span>
  </div>
</div>

Background Image Card

Add card-image-alt to card to cover the whole card with a background image. A dark overlay keeps the light text and text buttons visible. An optional card-action footer sits at the bottom on a theme-colored surface.

Mountain escape

Find your next destination.

Learn more

Ready when you are
Open skies

Take a moment to explore.

Learn more

A different view

Discover something new.

Learn more

Your workspace

Make room for good ideas.

Learn more

<div class="card card-image-alt" style="background-image: url('images/sample-1.jpg');">
  <div class="card-content">
    <span class="card-title">Mountain escape</span>
    <p>Find your next destination.</p>
    <p>
      <a href="#image" class="btn btn-small text icon-left waves-effect waves-light">
        <i class="material-icons" aria-hidden="true">cloud</i>Learn more
      </a>
    </p>
  </div>
  <div class="card-action">Ready when you are</div>
</div>

The overlay is automatic. Existing markup with <div class="overlay"></div> directly inside the card also works. Background images are decorative; include meaningful information in the card text.

Cards start at a minimum height of 186px and grow with their content. Set --card-image-alt-height to change that minimum, --card-image-position to adjust the crop, or --card-image-alt-overlay to replace the overlay color or gradient. Use small, medium, or large for a fixed-height card with scrollable content.

<div class="card card-image-alt" style="background-image: url('images/sample-1.jpg'); --card-image-alt-height: 240px; --card-image-position: center top; --card-image-alt-overlay: linear-gradient(transparent, var(--md-sys-color-scrim));">
  ...
</div>

Background Image Card with Gradient

Add gradient to the card itself: card card-image-alt gradient. The image fades from clear at the top to dark at the bottom, with the content aligned over the darker area. This also supports an explicit overlay element and the --card-image-alt-overlay customization.

Explore the lake

A clear view above, a soft fade behind the text.

Explore

Discover the city

The gradient also works with a bottom action area.

View destination
<div class="card card-image-alt gradient small" style="background-image: url('images/sample-1.jpg');">
  <div class="card-content">
    <span class="card-title">Explore the lake</span>
    <p>A clear view above, a soft fade behind the text.</p>
    <p><a href="#image-alt" class="btn btn-small text">Explore</a></p>
  </div>
</div>

The optional small class gives these examples a 300px height. Long content remains scrollable. On regular image cards, continue to put gradient on card-title, as shown below.

Image Card Gradient

Add gradient to an image's card-title for a dark fade behind the title, inspired by Card Gradients. The fade spans the image width and keeps the text light in both themes.

Sunlit landscape Explore the outdoors

A soft gradient helps the title stand out from the photograph.

Sunlit landscape A longer title for your next adventure

Use the same class on sized cards. Add truncate when you want a single-line title with an ellipsis.

Card sizes
<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg" alt="Sunlit landscape">
    <span class="card-title gradient">Explore the outdoors</span>
  </div>
  <div class="card-content">
    <p>A soft gradient helps the title stand out from the photograph.</p>
  </div>
</div>

The gradient needs no JavaScript. Titles wrap by default. Decorative titles allow clicks through to the image; title links and activator titles remain interactive.

Card Badges

Place a card-badges group inside card-image to display custom labels above the image. Badges sit in the top-right corner by default; add left to move the group to the top-left. Multiple badges wrap when space is limited.

Mountain lake surrounded by trees Lakeside escape
Featured New

Combine custom labels and colors without changing the card layout.

Mountain lake surrounded by trees Weekend adventure
Recommended 3

Use icons and the existing data-badge-caption attribute for extra context.

<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg" alt="Mountain lake surrounded by trees">
    <span class="card-title gradient">Lakeside escape</span>
    <div class="card-badges">
      <span class="badge">Featured</span>
      <span class="badge" style="--card-badge-background: var(--md-sys-color-tertiary-container); --card-badge-color: var(--md-sys-color-on-tertiary-container);">New</span>
    </div>
  </div>
  <div class="card-content"><p>Discover your next destination.</p></div>
</div>

Set --card-badge-background and --card-badge-color on a badge, group, or card to customize its colors. Use paired theme tokens so they adapt to light and dark mode. The badges also work with small, medium, and large image cards.

Labels allow clicks through to the image. For an interactive badge, use <a class="badge" href="…">Featured</a> with a descriptive label. No JavaScript is required.

FABs in Cards

Card Title add

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Here is an image card with a Floating Action Button.

add
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Here is an image card with a large Floating Action Button. 

<div class="row">
  <div class="col s12 m6">
    <div class="card">
      <div class="card-image">
        <img src="images/sample-1.jpg">
        <span class="card-title">Card Title</span>
        <a class="btn-floating halfway-fab waves-effect waves-light"><i class="material-icons">add</i></a>
      </div>
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
    </div>
  </div>
</div>

Horizontal Card

I am a very simple card. I am good at containing small bits of information.

This is a link

Here is the standard card with a horizontal image. 

<div>
  <h2 class="header">Horizontal Card</h2>
  <div class="card horizontal">
    <div class="card-image">
      <img src="images/placeholder/80x200_a.jpg">
    </div>
    <div class="card-stacked">
      <div class="card-content">
        <p>I am a very simple card. I am good at containing small bits of information.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>
      </div>
    </div>
  </div>
</div>

Card Reveal

Card Titlemore_vert

This is a link

closeCard Title

Here is some more information about this product that is only revealed once clicked on.

Here you can add a card that reveals more information once clicked. Just add the card-reveal div with a span.card-title inside to make this work. Add the class activator to an element inside the card to allow it to open the card reveal. 

<div class="card">
  <div class="card-image">
    <img src="images/office.jpg">
    <div class="activator waves-effect waves-light" style="position:absolute;top:0;bottom:0;right:0;left:0;"></div>
  </div>
  <div class="card-content">
    <span class="card-title activator">Card Title<i class="material-icons right">more_vert</i></span>
    <p><a href="#">This is a link</a></p>
  </div>
  <div class="card-reveal">
    <span class="card-title"><i class="material-icons right">close</i></i>Card Title</span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
</div>
Card Action Options
Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

This is a link This is a link

The default state is having the card-reveal go over the card-action.

Card Titlemore_vert

This is a link

This is a link This is a link
Card Titleclose

Here is some more information about this product that is only revealed once clicked on.

You can make your card-action always visible by adding the class sticky-action to the overall card. 

<div class="card sticky-action">
  ...
  <div class="card-action">...</div>
  <div class="card-reveal">...</div>
</div>

Tabs in Cards

You can add tabs to your cards by putting a .tabs element inbetween your header content and your tab content, directly inside the card - there's no separate wrapper div for it in v2. 

<div class="card">
  <div class="card-content">
    <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
  </div>
  <ul class="tabs tabs-fixed-width">
    <li class="tab"><a href="#test4">Test 1</a></li>
    <li class="tab"><a class="active" href="#test5">Test 2</a></li>
    <li class="tab"><a href="#test6">Test 3</a></li>
  </ul>
  <div class="card-content">
    <div id="test4">Test 1</div>
    <div id="test5">Test 2</div>
    <div id="test6">Test 3</div>
  </div>
</div>
White

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Test 1
Test 2
Test 3

Basic white background card with tabs.

Colored

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Test 1
Test 2
Test 3

Colored or dark background card with tabs.

Card Sizes

Add small, medium, or large to card for heights of 300px, 400px, and 500px. The grid controls the width.

Like the image-sizing example, each image fills a consistent 180px area using object-fit: cover. Landscape, portrait, and square images crop without stretching. The content uses the remaining space and scrolls when needed; actions stay visible at the bottom.

Small · 300px
Landscape photograph cropped to fill the card image area

A compact card for a short introduction. This landscape image uses the same crop height as the other examples. Scroll this content area to read the full description while the action remains visible.

Explore
Medium · 400px
Tall portrait image cropped to fill a wide card image area
More room

A portrait source does not make this image taller than its neighbors. The fixed crop leaves more space for details in a medium card. Longer descriptions remain available by scrolling this region.

Explore
Large · 500px
Portrait photograph cropped to the same image height as the other cards
Space for detail

The large card keeps the same image height and dedicates the extra space to its content. Use it for a richer description, product details, or supporting information. The action stays below the text, with no overlap.

Explore
<div class="card medium">
  <div class="card-image">
    <img src="photo.jpg" alt="A description of the photograph">
  </div>
  <div class="card-content" tabindex="0" role="region" aria-label="Card details">
    <span class="card-title">Card title</span>
    <p>Content can scroll when it exceeds the available space.</p>
  </div>
  <div class="card-action"><a href="details.html">Read more</a></div>
</div>

The classes also work without images or actions. For horizontal cards, combine horizontal with a size class and use the usual card-stacked wrapper; the image fills the card height and 40% of its width.

To adjust a vertical card’s image height or crop position, set --card-image-height or --card-image-position. Cards without a size class retain their natural image and content sizing. No JavaScript is needed.

<div class="card large" style="--card-image-height: 220px; --card-image-position: center top;">
  …
</div>

Card Panel

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.

For a simpler card with less markup, try using a card panel which just has padding and a shadow effect 

<div class="row">
  <div class="col s12 m5">
    <div class="card-panel teal">
      <span class="white-text">I am a very simple card. I am good at containing small bits of information.
      I am convenient because I require little markup to use effectively. I am similar to what is called a panel in other frameworks.
      </span>
    </div>
  </div>
</div>