files/es/mdn/guidelines/content_blocks/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

---
title: Bloques de contenido
slug: MDN/Guidelines/Content_blocks
tags:
  - MDN
  - Meta
translation_of: MDN/Guidelines/CSS_style_guide
translation_of_original: MDN/Structures/Content_blocks
---
<div>{{MDNSidebar}}</div><div class="summary">
 <p>This pages lists reusable content blocks.</p>
</div>
<h2 id="Grilla_de_tarjetas">Grilla de tarjetas</h2>
<p>Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: <code>.card-grid </code>(L 751 - 824 in CustomCSS).</p>
<ul class="card-grid">
 <li><span>Refetencia CSS</span>
  <p>Una <a href="/en-US/docs/Web/CSS/Reference" title="en-US/docs/CSS/CSS_Reference">referencia exhaustiva</a> para <u>desarrolladores Web expertos</u> describiendo cada propiedad y concepto de CSS.</p>
 </li>
 <li><span>Tutorial CSS</span>
  <p>Una <a href="/en-US/docs/CSS/Getting_Started" title="en-US/docs/CSS/Getting_Started">introduccion paso a paso</a> para ayudar a los <u>principiantes</u>. Presenta todos los fundamentos necesarios.</p>
 </li>
 <li><span>CSS3 Demos</span>
  <p>A <a href="/en-US/demos/tag/tech:css3" title="https://developer.mozilla.org/en-US/demos/tag/tech:css3">collection of demos</a> showing the <u>latest CSS technologies</u> in action: a boost for the creativity.</p>
 </li>
</ul>
<h2 id="Dos_columnas">Dos columnas</h2>
<p>Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: <code>.topicpage-table</code> (L 830 - 837 &amp; 82-93 in CustomCSS).</p>
<div class="row topicpage-table">
 <div class="section">
  Columna 1</div>
 <div class="section">
  Columna 2</div>
</div>
<p> </p>
<h2 id="Columnas_con_la_misma_altura">Columnas con la misma altura</h2>
<p>Se usa en la página de destino de <a href="/en-US/Firefox_OS">Firefox OS</a> para envolver las columnas que deberían tener el mismo alto. Clase de CSS: <code>.equalColumnHeights</code> (L 25 - 38 in CustomCSS).</p>
<div class="equalColumnHeights">
 <div class="zone-callout">
  Un Texo<br>
  y nueva linea<br>
   </div>
 <div class="zone-callout">
  Otro texto<br>
  <br>
  aquí</div>
</div>
<p> </p>