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

Elemento
Elemento
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

Genérico

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

Genérico desactivado

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

Texto

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

Correo electrónico

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

Contraseña

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

Búsqueda

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

Dirección web

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

Teléfono

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

Número

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

Fecha

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

Hora

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

Color

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

Casilla

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

Casilla marcada

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

Casilla desactivada

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

Casilla marcada y desactivada

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

Botón de radio

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

Botón de radio marcado

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

Botón de radio desactivado

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

Botón de radio marcado y desactivado

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

Deslizador de rango

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

Selector de fichero

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

Botón

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

Botón desactivado

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

Botón de limpiar formulario

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

Botón de limpiar formulario desactivado

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

Grupo de campos

Una casilla

Otra casilla

<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>

Opciones

<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>

Opciones agrupadas

<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>

Área de texto

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

Botón (tipo button)

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

última actualización: 16/12/2017

Guía de Estilo