Documentación de Brancam
Quick guide for frontenders +
Content that can be added to a page
<!--
Element Text & Images on the right
--------------------------------------------------
-->
<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 -->
<!--
Element Text & Images on the left
----------------------------------------------------
-->
<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 -->
<!--
Element Text & Gallery of images
------------------------------------------------
-->
<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 -->
<!--
Element Text & big Images
---------------------------------------------
-->
<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 -->
<!--
Attachments
--------------------------
-->
<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>
<!--
Gallery of images
----------------------------
-->
<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>
<!--
List of items (news)
-----------------------
-->
<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>
<!--
List of items (events)
-----------------------
-->
<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>
<!--
Child pages menu
-----------------------------------
-->
<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>
<!--
Form element
-------------------
-->
<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