Las listas de tarjetas deben usar un
div class="md-cards".
Los elementos de la lista de tarjetas pueden ser
div,
span
o
a
Pueden llevar multimedia, que debe colocarse dentro de un elemento de tipo
figure.
El texto de encabezado se marca con la class
headline.
El texto de soporte se marca con la class
supporting.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | |
| 4 | <head> |
| 5 | <meta charset="UTF-8"> |
| 6 | <meta name="viewport" content="width=device-width"> |
| 7 | |
| 8 | <title> |
| 9 | Tarjetas - PWA con MD |
| 10 | </title> |
| 11 | |
| 12 | <meta name="theme-color" content="#fffbfe"> |
| 13 | <link rel="icon" sizes="32x32" href="favicon.ico"> |
| 14 | <link rel="manifest" href="site.webmanifest"> |
| 15 | |
| 16 | <link rel="stylesheet" href="css/estilos.css"> |
| 17 | <script src="ungap/custom-elements.js"></script> |
| 18 | <script type="module" src="js/configura.js"></script> |
| 19 | |
| 20 | </head> |
| 21 | |
| 22 | <body> |
| 23 | |
| 24 | <md-top-app-bar> |
| 25 | <h1>Tarjetas</h1> |
| 26 | |
| 27 | <button is="md-menu-button" slot="navigation" onclick="nav.abre()"></button> |
| 28 | |
| 29 | </md-top-app-bar> |
| 30 | |
| 31 | <div class="md-cards"> |
| 32 | |
| 33 | <a target="_blank" rel=”noopener noreferrer” |
| 34 | href="https://www.pexels.com/es-es/foto/lobo-blanco-y-negro-397857/"> |
| 35 | <figure> |
| 36 | <img alt="Lobo" src="img/pexels-steve-397857.jpg"> |
| 37 | </figure> |
| 38 | <span class="headline"> |
| 39 | Lobo |
| 40 | </span> |
| 41 | <span class="supporting"> |
| 42 | Foto de Steve en Pexels. |
| 43 | </span> |
| 44 | </a> |
| 45 | |
| 46 | <a target="_blank" rel=”noopener noreferrer” |
| 47 | href="https://www.pexels.com/es-es/foto/foto-de-buho-ural-3732453/"> |
| 48 | <figure> |
| 49 | <img alt="Buho" src="img/pexels-erik-karits-3732453.jpg"> |
| 50 | </figure> |
| 51 | <span class="headline"> |
| 52 | Buho |
| 53 | </span> |
| 54 | <span class="supporting"> |
| 55 | Foto de Erik Karits en Pexels |
| 56 | </span> |
| 57 | </a> |
| 58 | |
| 59 | <a target="_blank" rel=”noopener noreferrer” |
| 60 | href="https://www.pexels.com/es-es/foto/perro-de-pelo-corto-marron-y-blanco-acostado-3978352/"> |
| 61 | <figure> |
| 62 | <img alt="Perro" src="img/pexels-creative-workshop-3978352.jpg"> |
| 63 | </figure> |
| 64 | <span class="headline"> |
| 65 | Perro |
| 66 | </span> |
| 67 | <span class="supporting"> |
| 68 | Foto de Creative Workshop en Pexels |
| 69 | </span> |
| 70 | </a> |
| 71 | |
| 72 | <a target="_blank" rel=”noopener noreferrer” |
| 73 | href="https://www.pexels.com/es-es/foto/gatito-gris-en-bolsa-de-papel-plateada-141496/"> |
| 74 | <figure> |
| 75 | <img alt="Gato" src="img/pexels-vadim-b-141496.jpg"> |
| 76 | </figure> |
| 77 | <span class="headline"> |
| 78 | Gato |
| 79 | </span> |
| 80 | <span class="supporting"> |
| 81 | Foto de Vadim B en Pexels |
| 82 | </span> |
| 83 | </a> |
| 84 | |
| 85 | <a target="_blank" rel=”noopener noreferrer” |
| 86 | href="https://www.pexels.com/es-es/foto/leon-marron-2270848/"> |
| 87 | <figure> |
| 88 | <img alt="León" src="img/pexels-ralph-2270848.jpg"> |
| 89 | </figure> |
| 90 | <span class="headline"> |
| 91 | León |
| 92 | </span> |
| 93 | <span class="supporting"> |
| 94 | Foto de Ralph en Pexels |
| 95 | </span> |
| 96 | </a> |
| 97 | |
| 98 | <a target="_blank" rel=”noopener noreferrer” |
| 99 | href="https://www.pexels.com/es-es/foto/oso-cafe-35435/"> |
| 100 | <figure> |
| 101 | <img alt="Oso" src="img/pexels-rasmus-svinding-35435.jpg"> |
| 102 | </figure> |
| 103 | <span class="headline"> |
| 104 | Oso |
| 105 | </span> |
| 106 | <span class="supporting"> |
| 107 | Foto de Rasmus Svinding en Pexels |
| 108 | </span> |
| 109 | </a> |
| 110 | |
| 111 | <a target="_blank" rel=”noopener noreferrer” |
| 112 | href="https://www.pexels.com/es-es/foto/animal-perro-mono-hierba-10226903/"> |
| 113 | <figure> |
| 114 | <img alt="Coyote" src="img/pexels-esteban-arango-10226903.jpg"> |
| 115 | </figure> |
| 116 | <span class="headline"> |
| 117 | Coyote |
| 118 | </span> |
| 119 | <span class="supporting"> |
| 120 | Foto de Esteban Arango en Pexels |
| 121 | </span> |
| 122 | </a> |
| 123 | |
| 124 | </div> |
| 125 | |
| 126 | <nav-drw id="nav"></nav-drw> |
| 127 | |
| 128 | </body> |
| 129 | |
| 130 | </html> |
Las tarjetas están definida en https://m3.material.io/components/cards/specs.