Menu
I need to add an icon before the title of an MDC card as shown in the diagram (label 2). However, I do not know the correct HTML for this according to the MDC design. This is HTML code I have so far for the card:
<div class="mdc-card demo-card undefined">
<div class="demo-card__primary">
<h1 class="demo-card__title mdc-typography--headline6">Some Title</h1>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
Button 1
</button>
<button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
Button 2
</button>
</div>
</div>
</div>
</div>
Can somebody point me to the correct HTML to add? The MDC documentation is not very clear.
978
According to the Material Design card component documentation, there are not really any "standard" layouts for card content. You can accomplish a layout like the one in your image in a variety of different ways. See a working example below that is similar to the design image in your question.
.mdc-card {
height: 350px;
width: 350px;
}
.card-header {
margin: 1.25rem 0;
padding: 16px;
display: flex;
align-items: center;
}
.card-header h2,
.card-header h3 {
margin: 0;
}
.card-icon {
padding-right: 8px;
}
.mdc-card__media {
background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px), url(https://via.placeholder.com/100)
}
.card-body {
padding: 16px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Card Example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div class="mdc-card">
<div class="mdc-card__primary-action" tabindex="0">
<div class="card-header">
<div class="card-icon material-icons">android</div>
<div class="card-title">
<h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2">Secondary text</h3>
</div>
</div>
<div class="mdc-card__media mdc-card__media--square">
<div class="mdc-card__media-content">Placeholder Image</div>
</div>
</div>
<div class="card-body mdc-typography--body2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<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>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
