16. three-line.html - Listas con elementos three-line

Las listas de Material Design usan un ul con la clase md-list.
Las listas pueden usar li con las clases one-line, two-line o three-line
Si el elemento es un hipervínculo, el elemento li no lleva clases y en su interior se pone una a con la clase one-line, two-line o three-line
Los elementos de la clase three-line, tienen el siguiente contenido:
- Un encabezado con un elemento span class="headline" que muestra texto resaltado truncado a un renglón.
- Un elemento span class="supporting" que muestra texto mas pequeño y truncado 2 renglones.
- Opcionalmente muestran una imagen a la izquierda, que puede ser:
  Un pequeño ícono cuadrado
  - Se añade la clase icon junto a la clase three-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase three-line.
  Una imagen cuadrada
  - Se añade la clase image junto a la clase three-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase three-line.
  Una imagen rectangular
  - Se añade la clase video junto a la clase three-line.
  - Se añade un img dentro del elemento con la clase three-line.
  El avatar de un usuario (se muestra dentro de un círculo)
  - Se añade la clase avatar junto a la clase three-line.
  - Se añade un img, un label con las iniciales del usuario o un span class="material-symbols-outlined" dentro del elemento con la clase three-line.

Salida


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Listas tree-line - 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 headline="headline">
26
27	<h1>tree-line</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Listas tree-line</h1>
34
35	<main>
36
37	<ul class="md-list">
38
39	<li class="md-three-line">
40	<span class="headline">
41	Ciudad de México 3
42	</span>
43	<span class="supporting">
44	Lorem ipsum dolor sit amet consectetur adipisicing elit.
45	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
46	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
47	alias!
48	</span>
49	</li>
50
51	<li class="md-three-line icon">
52	<span class="material-symbols-outlined">account_balance</span>
53	<span class="headline">
54	Atenas 3
55	</span>
56	<span class="supporting">
57	Lorem ipsum dolor sit amet consectetur adipisicing elit.
58	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
59	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
60	alias!
61	</span>
62	</li>
63
64	<li class="md-three-line avatar">
65	<img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
66	<span class="headline">
67	Ana 3
68	</span>
69	<span class="supporting">
70	Lorem ipsum dolor sit amet consectetur adipisicing elit.
71	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
72	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
73	alias!
74	</span>
75	</li>
76
77	<li class="md-three-line image">
78	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
79	<span class="headline">
80	Neza 3
81	</span>
82	<span class="supporting">
83	Lorem ipsum dolor sit amet consectetur adipisicing elit.
84	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
85	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
86	alias!
87	</span>
88	</li>
89
90	<li class="md-three-line video">
91	<img alt="Ciudad de San Francisco"
92	src="img/pexels-craig-dennis-3701822.jpg">
93	<span class="headline">
94	San Francisco 3
95	</span>
96	<span class="supporting">
97	Lorem ipsum dolor sit amet consectetur adipisicing elit.
98	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
99	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
100	alias!
101	</span>
102	</li>
103
104	<li>
105	<a class="md-three-line image" target="_blank" rel=”noreferrer”
106	href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
107	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
108	<span class="headline">
109	Neza Link 3
110	</span>
111	<span class="supporting">
112	Lorem ipsum dolor sit amet consectetur adipisicing elit.
113	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
114	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
115	alias!
116	</span>
117	</a>
118	</li>
119
120	</ul>
121
122	<footer>
123	<ul>
124	<li>
125	<p>
126	<small>
127	<a target="_blank" rel=”noreferrer”
128	href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
129	La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
130	Haz clic en este hipervínculo para más información.
131	</a>
132	</small>
133	</p>
134	</li>
135	<li>
136	<p>
137	<small>
138	<a target="_blank" rel=”noreferrer”
139	href="https://www.pinterest.com.mx/ludresi/">
140	La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
141	Pinterest. Haz clic en este hipervínculo para más información.
142	</a>
143	</small>
144	</p>
145	</li>
146	<li>
147	<p>
148	<small>
149	<a target="_blank" rel=”noreferrer”
150	href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
151	La foto del puente de San Francisco es de Craig Dennis, publicada en el
152	sitio Pexels. Haz clic en este hipervínculo para más información.
153	</a>
154	</small>
155	</p>
156	</li>
157	</ul>
158	</footer>
159
160	</main>
161
162	<nav-drw></nav-drw>
163
164	</body>
165
166	</html>

Solo para los más rudos

Las listas están definida en https://m3.material.io/components/lists/overview.

skip_previous skip_next