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

Solo para los más rudos

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

skip_previous skip_next