Inicio Guía de Estilo

Guía de Estilo

Esta guía de estilo define los elementos de interfaz de usuario, lineamientos y estilos que los editores de contenido del sitio deben emplear para mantener su homogeneidad.

General

Esta guía está diseñada de modo que le sea fácil examinar, copiar y pegar los elementos aquí descritos en las páginas de contenido del sitio Web. Para el máximo aprovechamiento, los editores deben estar familiarizados con la gestión de contenido en WordPress y con la edición en lenguaje HTML y hojas de estilo CSS.

Apegarse a esta guía facilitará la modernización completa del sitio en el futuro y ahorrará tiempo de mantenimiento posterior. En caso de duda o quiere realizar un aporte, por favor contactar a webmaster@recope.go.cr.

Párrafos

Esto es un párrafo de muestra, no requiere que agregue manualmente saltos de línea u otro tipo de espaciados, ya que el estilo del sitio mantendrá la separación, alineación, tamaño de letra, familia y resaltado adecuado.

Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.

Tablas

Las tablas son elementos complejos. A continuación algunos lineamientos por seguir:

  • No use anchos o altos fijos para la tabla, filas, columnas o celdas. Las tablas se ajustan al contenido automáticamente. Emplee anchos fijos únicamente para casos muy particulares.
  • Evite agregar estilos particulares al contenido de la tabla para mantener la homogeneidad de estos elementos en todo el sitio. Emplee estilos particulares sólo cuando se estrictamente necesario.
  • Procure que el ancho de la tabla sea el menor para facilitar su visualización ante dispositivos de pantalla pequeña, como smartphones o tablets. El sitio hará su mejor intento para visualizar la tabla.
Encabezado Encabezado Encabezado
Celda Celda Celda
Celda Celda Celda
Celda Celda Celda
<div class="tabla">
<table>
	<thead>
<tr>
	<th>Encabezado</th>
	<th>Encabezado</th>
	<th>Encabezado</th>
</tr>
	</thead>
	<tbody>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
	</tbody>
</table>
</div>
Encabezado Encabezado Encabezado
Celda Celda Celda
Celda Celda Celda
Celda Celda Celda
<div class="tabla">
<table class="tabla-roja">
	<thead>
<tr>
	<th>Encabezado</th>
	<th>Encabezado</th>
	<th>Encabezado</th>
</tr>
	</thead>
	<tbody>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
	</tbody>
</table>
</div>
Encabezado Encabezado Encabezado
Celda Celda Celda
Celda Celda Celda
Celda Celda Celda
<div class="tabla">
<table class="tabla-gris">
	<thead>
<tr>
	<th>Encabezado</th>
	<th>Encabezado</th>
	<th>Encabezado</th>
</tr>
	</thead>
	<tbody>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
<tr>
	<td>Celda</td>
	<td>Celda</td>
	<td>Celda</td>
</tr>
	</tbody>
</table>

Títulos

Título 1

<h1>Título 1</h1>

Título 2

<h2>Título 2</h2>

Título 3

<h3>Título 3</h3>

Título 4

<h4>Título 4</h4>

Listas

Sin numeración con Flecha

  • Elemento
  • Elemento
  • Elemento
<ul>
	<li>Elemento</li>
	<li>Elemento</li>
	<li>Elemento</li>
</ul>

Sin numeración con Círculo

  • Elemento
  • Elemento
  • Elemento
<ul class="bullet-circle">
	<li>Elemento</li>
	<li>Elemento</li>
	<li>Elemento</li>
</ul>

Con numeración

  1. Elemento
  2. Elemento
  3. Elemento
<ol>
	<li>Elemento</li>
	<li>Elemento</li>
	<li>Elemento</li>
</ol>

Definiciones

Término
Descripción.
Descripción.
Término
Descripción.
<dl>
	<dt>Término</dt>
	<dd>Descripción.</dd>
	<dd>Descripción.</dd>
	<dt>Término</dt>
	<dd>Descripción.</dd>
</dl>

Botones

Ver formularios.

Iconos

Colores

Primarios

  • Azul normal: #002F87
  • Rojo normal: #D70036
  • Gris normal: #6F6F6E
  • Azul oscuro: #002365
  • Rojo oscuro: #A10029
  • Gris oscuro: #535353
  • Azul claro: #3E539F
  • Rojo claro: #E74B59
  • Gris claro: #8C8C8B

Secundarios

  • Correcto: #63A131
  • Alerta: #F9B500
  • Error: #D70036
  • Información: #0080BE
  • Desactivado: #D9D9D9

Citas

Bloque de texto citado.

<blockquote>Bloque de texto citado.</blockquote>

Texto citado en línea: línea de texto citado.

Texto citado en línea: <q>línea de texto citado</q>.

Bloque de texto citado

<cite>Bloque de texto citado</cite>

Negrita y cursiva

Texto en negrita

<strong>Texto en negrita</strong>

Texto en cursiva

<em>Texto en cursiva</em>

Enlaces

Enlace al sitio web de RECOPE

Enlace al <a href="https://www.recope.go.cr">Sitio web de RECOPE</a>

Avisos

Aviso de tipo correcto
Aviso de tipo alerta
Aviso de tipo error
Aviso de tipo información.
<div class="aviso correcto">Aviso de tipo correcto</div>
<div class="aviso alerta">Aviso de tipo alerta</div>
<div class="aviso error">Aviso de tipo error</div>
<div class="aviso informacion">Aviso de tipo información.</div>

Formularios


<label for="generico">Genérico</label>
<input id="generico" placeholder="Genérico">


<label for="generico-desactivado">Genérico desactivado</label>
<input id="generico-desactivado" placeholder="Genérico" disabled>


<label for="texto">Texto</label>
<input id="texto" type="text" placeholder="Texto">


<label for="correo">Correo electrónico</label>
<input id="correo" type="email" placeholder="correo@electronico.ejemplo">


<label for="clave">Contraseña</label>
<input id="clave" type="password" placeholder="Contraseña">


<label for="buscar">Búsqueda</label>
<input id="buscar" type="search" placeholder="Buscar">


<label for="direccion">Dirección web</label>
<input id="direccion" type="url" placeholder="https://www.recope.go.cr/">


<label for="telefono">Teléfono</label>
<input id="telefono" type="tel" placeholder="50689999999">


<label for="numero">Número</label>
<input id="numero" type="number" placeholder="Número">


<label for="fecha">Fecha</label>
<input id="fecha" type="date">


<label for="hora">Hora</label>
<input id="hora" type="time">


<label for="color">Color</label>
<input id="color" type="color">


<label for="casilla">Casilla</label>
<input id="casilla" type="checkbox">


<label for="casilla-marcada">Casilla marcada</label>
<input id="casilla-marcada" type="checkbox" checked>


<label for="casilla-desactivada">Casilla desactivada</label>
<input id="casilla-desactivada" type="checkbox" disabled>


<label for="casilla-marcada-desactivada">Casilla marcada y desactivada</label>
<input id="casilla-marcada-desactivada" type="checkbox" checked disabled>


<label for="boton-de-radio">Botón de radio</label>
<input id="boton-de-radio" type="radio">


<label for="boton-radio-marcado">Botón de radio marcado</label>
<input id="boton-radio-marcado" type="radio" checked>


<label for="boton-radio-desactivado">Botón de radio desactivado</label>
<input id="boton-radio-desactivado" type="radio" disabled>


<label for="boton-radio-marcado-desactivado">Botón de radio marcado y desactivado</label>
<input id="boton-radio-marcado-desactivado" type="radio" checked disabled>


<label for="rango">Deslizador de rango</label>
<input id="rango" type="range">


<label for="fichero">Selector de fichero</label>
<input id="fichero" type="file">


<label for="boton">Botón</label>
<input id="boton" type="button" value="Botón">


<label for="boton-desactivado">Botón desactivado</label>
<input id="boton-desactivado" type="button" value="Botón" disabled>


<label for="limpiar">Botón de limpiar formulario</label>
<input id="limpiar" type="reset" value="Limpiar">


<label for="limpiar-desactivado">Botón de limpiar formulario desactivado</label>
<input id="limpiar" type="reset" value="Limpiar" disabled>
Grupo de campos




<fieldset>
	<legend>Grupo de campos</legend>
	<label for="casilla1">Una casilla</label>
	<input id="casilla1" type="checkbox">
	<label for="casilla2">Otra casilla</label>
	<input id="casilla2" type="checkbox">
</fieldset>


<label for="opciones">Opciones</label>>
<select id="opciones">
		<option value="1">Opción 1</option>
		<option value="2" selected>Opción 2 (preseleccionada)</option>
		<option value="3" disabled>Opción 3 (desactivada)</option>
		<option value="4">Opción 4</option>
	</optgroup>
</select>

<label for="opciones-agrupadas">Opciones agrupadas</label>
<select id="opciones-agrupadas">
	<optgroup label="Grupo 1">
		<option value="1.1">Opción 1.1</option>
		<option value="1.2" selected>Opción 1.2 (preseleccionada)</option>
	</optgroup>
	<optgroup label="Grupo 2 (desactivado)" disabled>
		<option value="2.1">Opción 2.1</option>
		<option value="2.2">Opción 2.2</option>
	</optgroup>
	<optgroup label="Group 3">
		<option value="3.1">Opción 3.1</option>
		<option value="3.2" disabled>Opción 3.2 (desactivada)</option>
		<option value="3.3">Opción 3.3</option>
	</optgroup>
</select>


<label for="area-texto">Área de texto</label>
<textarea id="area-texto" placeholder="Texto"></textarea>


<label for="boton-button">Botón (tipo button)</label>
<button id="boton-button">Botón</button>

Menú Principal

Explore el contenido del sitio.

Herramienta de Búsqueda

Realice búsquedas en todo el contenido.

Menú de Contactos

Envíe sugerencias o contacte alguna dependencia.

Elegir Perfil

Personalice su experiencia de usuario.

Navegar en Portada

Desplácese por las secciones de la portada.

Share to

Ir a la barra de herramientas