Documentación de Brancam
Guía rápida para maquetadores +
Contenidos que se pueden añadir a una página
<!--
Elemento Texto y fotos (con imágenes a la derecha)
--------------------------------------------------
-->
<div class="brcm-generic-element-with-images-on-the-right">
<div class="brcm-group-of-images">
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=270"></div>
<div style="width:270px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=270"></div>
<div style="width:270px" class="brcm-caption">Pie de foto</div>
</div>
</div>
<div class="brcm-body">
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
<p> </p>
</div>
<div class="brcm-clear"></div>
</div> <!-- /brcm-generic-element-with-images-on-the-right -->
<!--
Elemento Texto y fotos (con imágenes a la izquierda)
----------------------------------------------------
-->
<div class="brcm-generic-element-with-images-on-the-left">
<div class="brcm-group-of-images">
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=270"></div>
<div style="width:270px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=270"></div>
<div style="width:270px" class="brcm-caption">Pie de foto</div>
</div>
</div>
<div class="brcm-body">
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
<p> </p>
</div>
<div class="brcm-clear"></div>
</div> <!-- /brcm-generic-element-with-images-on-the-left -->
<!--
Elemento Texto y fotos (con imágenes en galería)
------------------------------------------------
-->
<div class="brcm-generic-element-with-image-gallery">
<div class="brcm-body">
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
</div>
<div class="brcm-group-of-images">
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
</div>
<div class="brcm-clear"></div>
</div> <!-- /brcm-generic-element-with-image-gallery -->
<!--
Elemento Texto y fotos (con imágenes grandes)
---------------------------------------------
-->
<div class="brcm-generic-element-with-big-images">
<div class="brcm-body">
<p>Texto normal. Texto normal. Texto normal con vínculo. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal. Texto normal.</p>
</div>
<div class="brcm-group-of-images">
<div class="brcm-image-and-caption">
<div class="brcm-image"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=850"></div>
<div style="width:850px" class="brcm-caption">Pie de foto</div>
</div>
</div>
<div class="brcm-clear"></div>
</div> <!-- /brcm-generic-element-with-big-images -->
<!--
Elemento Ficheros adjuntos
--------------------------
-->
<ul class="brcm-list-of-attachments">
<li>
<div class="brcm-attachment brcm-others"> <a href="http://demo-clubtennis.brancam.com/fitxer/13/tennis.jpg" target="_blank" class="brcm-title">Título del fichero</a> <span class="brcm-size">(35 <abbr title="kilobyte">kB</abbr>)</span>
<div class="brcm-description">Descripción del fichero</div>
</div>
</li>
<li>
<div class="brcm-attachment brcm-others"> <a href="http://demo-clubtennis.brancam.com/fitxer/26/foto-1.jpg" target="_blank" class="brcm-title">Título del fichero</a> <span class="brcm-size">(9 <abbr title="kilobyte">kB</abbr>)</span>
<div class="brcm-description">Descripción del fichero</div>
</div>
</li>
<li>
<div class="brcm-attachment brcm-others"> <a href="http://demo-clubtennis.brancam.com/fitxer/27/433568_kedutaan.jpg" target="_blank" class="brcm-title">Título del fichero</a> <span class="brcm-size">(194 <abbr title="kilobyte">kB</abbr>)</span>
<div class="brcm-description">Descripción del fichero</div>
</div>
</li>
<li>
<div class="brcm-attachment brcm-others"> <a href="http://demo-clubtennis.brancam.com/fitxer/28/foto1.jpg" target="_blank" class="brcm-title">Título del fichero</a> <span class="brcm-size">(43 <abbr title="kilobyte">kB</abbr>)</span>
<div class="brcm-description">Descripción del fichero</div>
</div>
</li>
</ul>
<!--
Elemento Galería de imágenes
----------------------------
-->
<div class="brcm-gallery-of-images">
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a rel="brcm-group-images" class="brcm-view-image" title="Ampliar imagen" href="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=750"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a rel="brcm-group-images" class="brcm-view-image" title="Ampliar imagen" href="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=750"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a rel="brcm-group-images" class="brcm-view-image" title="Ampliar imagen" href="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=750"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a rel="brcm-group-images" class="brcm-view-image" title="Ampliar imagen" href="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=750"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a rel="brcm-group-images" class="brcm-view-image" title="Ampliar imagen" href="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=750"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
<div style="width:135px" class="brcm-caption">Pie de foto</div>
</div>
<div class="brcm-clear"></div>
</div>
<!--
Elemento Lista de ítems (noticias)
-----------------------
-->
<div class="brcm-list-of-news">
<ol>
<li>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a title="Detalle de la noticia" href="http://demo-clubtennis.brancam.com/es/noticias/2011/09/14/porta-est-pulvinar-pellentesque-tristique-eu-habitasse-elit-sit-nisl"><img alt="" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
</div>
<div class="brcm-date">14/09/2011</div>
<div class="brcm-title"><a href="http://demo-clubtennis.brancam.com/es/noticias/2011/09/14/porta-est-pulvinar-pellentesque-tristique-eu-habitasse-elit-sit-nisl">Porta est. pulvinar Pellentesque tristique eu, habitasse elit. sit nisl.</a></div>
<div class="brcm-summary">blandit ipsum lacus. suscipit et facilisis fermentum nec, posuere Ut Aliquam orci, ac rhoncus. rhoncus. tincidunt risus. ante condimentum. Cras tortor.</div>
<div class="brcm-category">Archivado en: General</div>
</li>
<li>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a title="Detalle de la noticia" href="http://demo-clubtennis.brancam.com/es/noticias/2011/09/14/suspendisse-massa-justo-volutpat-pellentesque-ultrices-senectus-eget-purus-netus"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
</div>
<div class="brcm-date">14/09/2011</div>
<div class="brcm-title"><a href="http://demo-clubtennis.brancam.com/es/noticias/2011/09/14/suspendisse-massa-justo-volutpat-pellentesque-ultrices-senectus-eget-purus-netus">Suspendisse massa. justo volutpat. Pellentesque ultrices senectus eget purus netus</a></div>
<div class="brcm-summary">Non Nullam dolor odio odio pede, purus blandit felis urna at Donec platea sagittis leo. quis dapibus a eu faucibus eu ultrices</div>
<div class="brcm-category">Archivado en: General</div>
</li>
<li>
<div class="brcm-image-and-caption">
<div class="brcm-image"> <a title="Detalle de la noticia" href="http://demo-clubtennis.brancam.com/es/noticias/2011/09/14/ultrices-nunc-sed-donec-duis-adipiscing-posuere-non-lacus-nec"><img alt="Descripción del fichero" src="http://demo-clubtennis.brancam.com/imatge/7/433568_kedutaan-509c811c6bf557c5e4cbbda6c273869e.jpg?amplada-maxima=135"></a> </div>
</div>
<div class="brcm-date">14/09/2011</div>
<div class="brcm-title"><a href="http://demo-clubtennis.brancam.com/es/noticias/2011/09/14/ultrices-nunc-sed-donec-duis-adipiscing-posuere-non-lacus-nec">Ultrices nunc Sed Donec Duis adipiscing posuere, non lacus nec</a></div>
<div class="brcm-summary">Mauris posuere fermentum gravida. Quisque a lacus dolor, eget ultricies elit. Pellentesque sit amet lorem lorem, faucibus hendrerit erat. Quisque vestibulum sodales elit a eleifend. Quisque tortor …</div>
<div class="brcm-category">Archivado en: General</div>
</li>
</ol>
</div>
<!--
Elemento Lista de ítems (actos)
-----------------------
-->
<div class="brcm-list-of-events">
<ol>
<li class="brcm-first-item"> <a href="http://demo-clubtennis.brancam.com/es/agenda/2015/02/14/torneo-local-de-tennis" class="brcm-title">Torneo local de Tennis</a>
<div class="brcm-date"> <strong>Día y hora:</strong> sábado 14/02/2015 de las 2:00 a las 16:00 </div>
<div class="brcm-location"> <strong>Lugar:</strong> Les Franqueses del Vallès </div>
<div class="brcm-organizer"> <strong>Organiza:</strong> Perception </div>
</li>
<li class=""> <a href="http://demo-clubtennis.brancam.com/es/agenda/2020/10/10/copa-catalunya-de-clubs" class="brcm-title">Copa catalunya de clubs </a>
<div class="brcm-date"> <strong>Día y hora:</strong> sábado 10/10/2020 de las 8:00 a las 10:00 </div>
<div class="brcm-location"> <strong>Lugar:</strong> Barcelona </div>
<div class="brcm-organizer"> <strong>Organiza:</strong> Club tennis </div>
</li>
<li class="brcm-last-item"> <a href="http://demo-clubtennis.brancam.com/es/agenda/2030/09/14/lorem-ipsum-dolor-sit-amet-adipiscing-elit" class="brcm-title">Lorem ipsum dolor</a>
<div class="brcm-date"> <strong>Día y hora:</strong> sábado 14/09/2030 de las 2:00 a las 08:00 </div>
<div class="brcm-location"> <strong>Lugar:</strong> Les Franqueses del Vallès </div>
<div class="brcm-organizer"> <strong>Organiza:</strong> Brancam </div>
</li>
</ol>
</div>
<!--
Elemento Navegador de páginas hijas
-----------------------------------
-->
<ul class="brcm-list-of-subpages">
<li><a href="http://demo-clubtennis.brancam.com/es/elementos-que-se-pueden-introducir-en-una-pagina/subpagina-1">Subpágina 1</a></li>
<li><a href="http://demo-clubtennis.brancam.com/es/elementos-que-se-pueden-introducir-en-una-pagina/subpagina-2">Subpágina 2</a></li>
<li><a href="http://demo-clubtennis.brancam.com/es/elementos-que-se-pueden-introducir-en-una-pagina/subpagina-3">Subpágina 3</a></li>
</ul>
<!--
Elemento Formulario
-------------------
-->
<div class="brcm-form">
<div class="brcm-explanation">Explicación del formulario.</div>
<form enctype="multipart/form-data" method="post" action="#">
<input type="hidden" value="1" name="formulari_enviat_id">
<div class="brcm-field">
<div class="brcm-title"> Campo de texto simple </div>
<div class="brcm-description"> </div>
<div class="brcm-value">
<input type="text" value="" size="60" name="respostes[1]" class="field-1">
</div>
<div class="brcm-errors"> </div>
</div>
<div class="brcm-field">
<div class="brcm-title"> Campo de texto multi línea </div>
<div class="brcm-description"> </div>
<div class="brcm-value">
<textarea rows="4" cols="60" name="respostes[2]" class="field-2"></textarea>
</div>
<div class="brcm-errors"> </div>
</div>
<div class="brcm-field">
<div class="brcm-title"> Casillas de selección múltiple </div>
<div class="brcm-description"> </div>
<div class="brcm-value">
<div class="brcm-option">
<label>
<input type="checkbox" value="1" name="respostes[3][]">
Opción 1 </label>
</div>
<div class="brcm-option">
<label>
<input type="checkbox" value="2" name="respostes[3][]">
Opción 2 </label>
</div>
<div class="brcm-option">
<label>
<input type="checkbox" value="3" name="respostes[3][]">
Opción 3 </label>
</div>
</div>
<div class="brcm-errors"> </div>
</div>
<div class="brcm-field">
<div class="brcm-title"> Casillas de selección única </div>
<div class="brcm-description"> </div>
<div class="brcm-value">
<div class="brcm-option">
<label>
<input type="radio" value="4" name="respostes[4]" class="field-4">
Opción 1 </label>
</div>
<div class="brcm-option">
<label>
<input type="radio" value="5" name="respostes[4]" class="field-4">
Opción 2 </label>
</div>
<div class="brcm-option">
<label>
<input type="radio" value="6" name="respostes[4]" class="field-4">
Opción 3 </label>
</div>
</div>
<div class="brcm-errors"> </div>
</div>
<div class="brcm-field">
<div class="brcm-title"> Lista desplegable </div>
<div class="brcm-description"> </div>
<div class="brcm-value">
<select name="respostes[5]">
<option value=""></option>
<option value="7">Opción 1</option>
<option value="8">Opción 2</option>
<option value="9">Opción 3</option>
</select>
</div>
<div class="brcm-errors"> </div>
</div>
<div class="brcm-actions">
<input type="submit" value="Enviar">
</div>
</form>
</div>
Crea, gestiona y difunde. Haz crecer tu web.
Alojamiento incluido.E-commerce.Multidioma.Analytics.Dominio configurable.RSS, Newsletter.TemplatesDiseño personalizableServicio técnico.
¡Prueba Brancam!30 DIAS DE PRUEBA GRATISContacta con nosotrosINFORMACIÓN SIN COMPROMISO