Galería de Componentes

Clases útiles Web COPM

.c-green

Color primario del COPM (#01616a)

Este texto usa el color primario verde del COPM

<p class="c-green">Texto verde</p>

231 usos en el análisis

.c-neutral

Color neutral para estados hover (#01828e)

Este texto usa el color neutral del COPM

<p class="c-neutral">Texto neutral</p>

Tipografía

.u-bold

Negrita (font-weight: 700)

Texto normal vs Texto en negrita

<span class="u-bold">Texto en negrita</span>

209 usos en el análisis

.text-uppercase

Transforma texto a mayúsculas

Este texto está en mayúsculas

<p class="text-uppercase">mayúsculas</p>

84 usos en el análisis

Alineación de Texto

.text-left | .text-center | .text-right

Texto alineado a la izquierda

Texto centrado

Texto alineado a la derecha

<p class="text-center">Centrado</p>

📦 Espaciado (Margins & Paddings)

Sistema de espaciado:

xxs = 4px
xs = 8px
sm = 16px
md = 24px
lg = 32px

Margins

Formato: .u-margin-(dirección)-(tamaño)

margin-bottom-lg (32px)

margin-bottom-md (24px)

margin-bottom-sm (16px)

margin-bottom-xs (8px)

margin-bottom-xxs (4px)

<div class="u-margin-bottom-md">...</div>

Más usados: u-margin-right-xs (175), u-margin-bottom-xs (125), u-margin-top-xs (46)

Paddings

Formato: .u-padding-(dirección)-(tamaño)

padding-bottom-sm (16px)

padding-top-xs (8px)

padding-left-sm + padding-right-sm

<div class="u-padding-top-xs u-padding-bottom-xs">...</div>

Reset Spacing

.no-margin | .no-padding

Párrafo sin margin

Div sin padding

📐 Flexbox Utilities

.u-flex

Activa display flex

Item 1

Item 2

Item 3

<div class="u-flex">...</div>

138 usos en el análisis

.u-ai-center

Alinea items verticalmente al centro

Item centrado

Item alto

Item centrado

<div class="u-flex u-ai-center">...</div>

102 usos en el análisis

.u-jc-space-between

Distribuye items con espacio entre ellos

Izquierda

Centro

Derecha

<div class="u-flex u-jc-space-between">...</div>

Combinaciones Comunes

Ejemplos de uso combinado

Centrado vertical y horizontal

Inicio

Centrado verticalmente

<div class="u-flex u-ai-center u-jc-center">...</div>

u-jc-flex-start: 79 usos

Imágenes

.img-responsive

Imagen responsive (max-width: 100%, height: auto)

<img src="..." class="img-responsive" alt="..." />

99 usos en el análisis

.center-block

Centra una imagen horizontalmente

<img src="..." class="img-responsive center-block" />

.icons

Iconos inline (32x32px)

Texto con icono inline

<img src="..." class="icons" alt="..." />

🔗 Enlaces y Botones

.btn-green

Botón principal con el color verde COPM

Descargar PDF Ver Más Información

<a href="#" class="btn-green">Descargar PDF</a>

.btn-dropdown

Botón estilo dropdown

<button class="btn-dropdown">Seleccionar</button>

.w-icon

Enlace con icono inline

Ver más información

<a href="#" class="w-icon">[icono] Texto</a>

Tablas

.table

Tabla estándar con estilos base

Nombre	Cargo	Departamento
Ana García	Psicóloga Clínica	Clínica
Juan López	Psicólogo Educativo	Educación
María Pérez	Psicóloga Social	Social

<table class="table">...</table>

.green-stripes

Tabla con rayas verdes alternadas

Servicio	Horario	Ubicación
Atención al Colegiado	9:00 - 14:00	Planta Baja
Orientación Profesional	10:00 - 13:00	Primera Planta
Formación Continua	15:00 - 19:00	Aula 2
Biblioteca	9:00 - 20:00	Segunda Planta

<table class="green-stripes">...</table>

.table-responsive

Wrapper para tablas con scroll horizontal en móvil

Col 1	Col 2	Col 3	Col 4	Col 5	Col 6
Dato 1	Dato 2	Dato 3	Dato 4	Dato 5	Dato 6

<div class="table-responsive"><table>...</table></div>

Listas

.triangle-list

Lista con bullets triangulares

Primer elemento de la lista
Segundo elemento de la lista
Tercer elemento de la lista
Cuarto elemento de la lista

<ul class="triangle-list"><li>...</li></ul>

.green-squared-list

Lista con bullets cuadrados verdes

Requisitos para colegiación
Documentación necesaria
Proceso de validación
Confirmación y alta

<ul class="green-squared-list"><li>...</li></ul>

.social

Lista de iconos de redes sociales

<ul class="social"><li><a href="#">F</a></li></ul>

.inline

Lista horizontal inline

Elemento 1
•
Elemento 2
•
Elemento 3
•
Elemento 4

<ul class="inline"><li>...</li></ul>

.column

Lista en 2 columnas (responsive a 1 columna en móvil)

Terapia Cognitivo-Conductual
Psicología Clínica
Psicología Educativa
Psicología Social
Neuropsicología
Psicología del Deporte
Psicología Organizacional
Psicología Forense

<ul class="column"><li>...</li></ul>

5 usos en el análisis (legacy)

.dash

Lista con bullets de guiones

Primer punto con guion
Segundo punto con guion
Tercer punto con guion
Cuarto punto con guion

<ul class="dash"><li>...</li></ul>

3 usos en el análisis (legacy)

.ul

Lista genérica con bullets disc estándar

Elemento estándar con bullet disc
Segundo elemento estándar
Tercer elemento estándar

<ul class="ul"><li>...</li></ul>

3 usos en el análisis (legacy)

🎬 Embeds y Multimedia

.embed-responsive + .embed-responsive-16by9

Contenedor responsive para iframes (ratio 16:9)

 <div class="embed-responsive embed-responsive-16by9">
  <iframe
            src="..."></iframe>
</div> 

Contenedores y Cajas

.heading

Encabezado de sección con borde inferior

Título de la Sección

<div class="heading"><h2>Título</h2></div>

.box-pdf

Caja para enlaces de descarga de PDFs

Descargar Documento Informativo.pdf

<div class="box-pdf"><a href="...">PDF</a></div>

.box-title-iframe

Título para contenido embed (va antes del iframe)

Vídeo: Conferencia sobre Psicología Clínica

[Aquí iría el iframe del video]

<div class="box-title-iframe"><h3>Título</h3></div>

Componentes Específicos COPM

.item-departamento

Card para mostrar información de departamentos

Departamento de Psicología Clínica

Atención especializada a colegiados en el ámbito de la psicología clínica y de la salud. Ofrecemos orientación, formación y recursos profesionales.

<div class="item-departamento"><h3>...</h3></div>

.item_inst

Item institucional con borde lateral verde

Sede del Colegio

Cuesta de San Vicente, 4, 5ª Planta - 28008 Madrid

Horario de Atención

Lunes a Viernes: 9:00 - 14:00 y 16:00 - 19:00

<div class="item_inst"><h4>...</h4></div>

Responsive Utilities

.hidden-mobile

Oculta elementos en dispositivos móviles (< 640px)

Este contenido solo es visible en tablet y desktop

Este contenido es visible en todos los tamaños

<div class="hidden-mobile">Solo tablet+</div>

.visible-mobile

Muestra elementos solo en móviles (< 640px)

Este contenido solo es visible en móvil