TEXTO FLUIDO
Mayúsculas
text-capitalize
Texto en mayúsculas
text-uppercase
Texto en minúsculas
text-lowercase
Texto en cursiva
text-italic
Texto tachado
text-strike
Alineación a la izquierda
text-left
Alineación a la derecha
text-right
Alineación al centro
text-center
Justificado
text-justify
ESPACIADO DE LETRAS
Espaciado entre letras amplio
tracking-wide
Espaciado entre letras más amplio
tracking-wider
Espaciado entre letras estrecho
tracking-tight
TAMAÑOS DE TEXTO
Extra Small Text
text-xs
Small Text
text-s
Medium Text
text-m
Large Text
text-l
XLarge Text
text-xl
2XLarge Text
text-2xl
3XLarge Text
text-3xl
4XLarge Text
text-4xl
TÍTULOS PERSONALIZADOS
Small Heading
heading-s
Medium Heading
heading-m
Large Heading
heading-l
XLarge Heading
heading-xl
2XLarge Heading
heading-2xl
3XLarge Heading
heading-3xl
4XLarge Heading
heading-4xl
5XLarge Heading
heading-5xl
6XLarge Heading
heading-6xl
7XLarge Heading
heading-7xl
PESOS DE FUENTE
Ultra Light
font-100
Thin
font-200
Light
font-300
Regular
font-400
Medium
font-500
Semi-Bold
font-600
Bold
font-700
Extra Bold
font-800
Black
font-900
SOMBRAS - GLASEADOS
Sombras
Shadow Small
shadow-s
Shadow Medium
shadow-m
Shadow Large
shadow-l
Shadow XL
shadow-xl
Shadow Inset
shadow-inset
Shadow None
shadow-none
Glaseados
Fondo glaseado claro
glass
Fondo glaseado claro 2
sfrosted-glass
Fondo glaseado oscuro
frosted-glass-dark
ANIMACIONES CSS
Animaciones básicas
Aparece desde abajo
reveal-up
Aparece desde abajo suave
reveal-up-soft
Aparece desde abajo fuerte
reveal-up-strong
Aparece desde arriba
reveal-down
Aparece desde la derecha
reveal-left
Aparece desde la izquierda
reveal-right
Rotaciones Sutiles
Suave desde diferentes ángulos
reveal-rotate
Suave desde izquierda
reveal-rotate-left
Suave desde derecha
reveal-rotate-right
Para Grupos de Elementos
Animación en secuencia
reveal-cascade
Secuencia con zoom
reveal-cascade-zoom
Efectos de Zoom
Zoom suave hacia adentro
reveal-zoom-in
Zoom suave hacia afuera
reveal-zoom-out
Zoom con movimiento hacia arriba
reveal-zoom-up
Zoom con movimiento hacia abajo
reveal-zoom-down
Zoom con rotación sutil
reveal-zoom-rotate
FX Básicos
Simple desvanecimiento
reveal-fade
Efecto de surgimiento
reveal-emerge
Efecto flotante
reveal-float
Entrada dramática
reveal-dramatic
Aparición natural y suave
reveal-natural
FX Avanzados
Efecto de despliegue
reveal-unfold
Efecto de deslizamiento suave
reveal-slide
Efecto de aparición natural
reveal-natural
SECCIONES CON PADDING
Padding básico - superior e inferior
Extra Pequeño: (32px - 64px)
section-padding-xs
Pequeño: (48px - 96px)
section-padding-s
Mediano: (64px - 160px)
section-padding-m
Grande: (96px - 224px)
section-padding-l
Extra Grande: (128px - 288px)
section-padding-xl
Máximo: (160px - 384px)
section-padding-full
Padding solo superior
Extra Pequeño Superior:
section-padding-top-xs
Pequeño Superior:
section-padding-top-s
Mediano Superior:
section-padding-top-m
Grande Superior:
section-padding-top-l
Extra Grande Superior:
section-padding-top-xl
Máximo Superior:
section-padding-top-full
Padding solo inferior
Extra Pequeño Inferior:
section-padding-bottom-xs
Pequeño Inferior:
section-padding-bottom-s
Mediano Inferior:
section-padding-bottom-m
Grande Inferior:
section-padding-bottom-l
Extra Grande Inferior:
section-padding-bottom-xl
Máximo Inferior:
section-padding-bottom-full
BORDER RADIUS
xSmall
rad-xs
Small
rad-s
Medium
rad-m
Large
rad-l
xLarge
rad-xl
Full
rad-full
BORDER RADIUS IMÁGENES REDONDAS
Extra Small
img-rad-xs
Small
img-rad-s
Medium
img-rad-m
Large
img-rad-l
XLarge
img-rad-xl
Full
img-rad-full
Circ
img-rad-circ
BORDER RADIUS IMÁGENES CUADRADAS
Para imágenes apaisadas (horizontales):
Centrada (por defecto)
img-square
Muestra la parte izquierda
img-square-left
Muestra la parte derecha
img-square-right
Para imágenes verticales:
Muestra la parte superior
img-square-top
Muestra la parte central
img-square-middle
Muestra la parte inferior
img-square-bottom
Esquinas específicas (control total):
Arriba izquierda
img-square-tl
Arriba derecha
img-square-tr
Abajo izquierda
img-square-bl
Abajo derecha
img-square-br
MÁRGENES
Completos
m-0
m-xs
m-s
m-m
m-l
m-xl
Superiores
mt-0
mt-xs
mt-s
mt-m
mt-l
mt-xl
Inferiores
mb-0
mb-xs
mb-s
mb-m
mb-l
mb-xl
MÁRGENES NEGATIVOS
Superiores
mt-neg-xs
mt-neg-s
mt-neg-m
mt-neg-l
mt-neg-xl
Inferiores
mb-neg-xs
mb-neg-s
mb-neg-m
mb-neg-l
mb-neg-xl
PADDINGS
Completos
p-0
p-xs
p-s
p-m
p-l
p-xl
Superiores
pt-0
pt-xs
pt-s
pt-m
pt-l
pt-xl
Inferiores
pb-0
pb-xs
pb-s
pb-m
pb-l
pb-xl
Izquierdos
pl-0
pl-xs
pl-s
pl-m
pl-l
pl-xl
Derechos
pr-0
pr-xs
pr-s
pr-m
pr-l
pr-xl
HOVER
Darkens on hover
hover-dark
Reduces opacity on hover
hover-opacity
Adds border on hover
hover-border
Scales up on hover
hover-scale
Adds shadow on hover
hover-shadow
Glow Hover
hover-glow