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