Tipografía

Estilos de texto

u-text-style-display

Rúbrica

u-text-style-h1

Rúbrica

u-text-style-h2

Rúbrica

u-text-style-h3

Rúbrica

u-text-style-h4

Rúbrica

u-text-style-h5
Rúbrica
u-text-style-h6
Rúbrica
u-text-style-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-main

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-text-style-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Pesos

u-peso-normal

Lorem ipsum dolor

peso-u-medio

Lorem ipsum dolor

u-weight-bold

Lorem ipsum dolor

Altura de línea

u-line-height-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-line-height-huge

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Espaciado entre letras

espaciado-entre-letras-u-estrecho

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

espaciado-entre-letras-u-normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Abrazadera de línea

u-line-clamp-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

u-line-clamp-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Alineación

u-alignment-start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alineación-centrada

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

u-alineación-fin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Transformación de texto

u-text-transform-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-mayúsculas

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-capitalize

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-transform-lowercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ajuste de texto

u-text-wrap-default

Ajuste de texto normal. Resulta útil para restablecer el ajuste de texto en un elemento secundario si el elemento principal tiene la propiedad «balance» o «pretty».

u-text-wrap-balance

Mantiene el ancho de línea uniforme y constante en hasta seis líneas de texto. Ideal para contenidos breves.

u-text-wrap-pretty

Garantiza que haya más de una palabra en la última línea del texto. Ideal para contenidos extensos.

Elementos tipográficos

u-texto-enriquecido

Rúbrica

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Figura
Lista ordenada
  1. Lista ordenada
  2. cuando no está dentro
  3. de texto con formato
  1. Lista ordenada
  2. cuando estás dentro
  3. de texto con formato
Lista sin ordenar
  • Lista sin ordenar
  • cuando no está dentro
  • de texto con formato
  • Lista sin ordenar
  • cuando estás dentro
  • de texto con formato
Citas en bloque
Cita en bloque cuando no se encuentra dentro de un elemento de texto enriquecido
Cita en bloque dentro de un elemento de texto enriquecido
u-encabezado-acento

Palabra con acento en el título

Color

Temas

u-theme-inherit
u-theme-light
u-theme-dark
u-theme-brand

Color del texto

u-color-inherit

Lorem ipsum dolor

u-color-desvanecido

Lorem ipsum dolor

Color de fondo

u-fondo-transparente
u-fondo-1
u-background-2
u-fondo-esqueleto

Flexbox

Utilidades de dirección de Flex

u-flex-horizontal-wrap
u-flex-vertical-nowrap
u-flex-horizontal-nowrap
u-flex-vertical-wrap

Alinear los servicios propios

u-align-self-inherit
u-align-self-start
u-align-self-center
u-align-self-end
u-align-self-stretch

Utilidades para alinear elementos

u-align-items-inherit
u-align-items-start
u-align-items-center
u-align-items-end
u-align-items-stretch

Utilidades para justificar el contenido

u-justify-content-inherit
u-justify-content-start
u-justify-content-center
u-justify-content-end
u-justify-content-between
u-justify-content-around

Servicios básicos de Flex Basis

u-flex-shrink
u-flex-grow
u-flex-sin-contracción

Cuadrícula

Empresas de suministro eléctrico

u-grid-autofit
u-grid-autocompletar
u-grid-custom
u-grid-breakout
u-grid-subgrid

Utilidades de inicio de columna

u-column-start-auto
u-column-start-1
u-column-start-2
u-column-start-3
u-column-start-4
u-column-start-5
u-column-start-6
u-column-start-7
u-column-start-8
u-column-start-9
u-column-start-10
u-column-start-11
u-column-start-12

Herramientas de columnas

u-column-span-full
u-column-span-indent
u-column-span-1
u-column-span-2
u-column-span-3
u-column-span-4
u-column-span-5
u-column-span-6
u-column-span-7
u-column-span-8
u-column-span-9
u-column-span-10
u-column-span-11
u-column-span-12

Utilidades de inicio de fila

u-row-start-auto
u-row-start-1
u-row-start-2
u-row-start-3
u-row-start-4
u-row-start-5
u-row-start-6

Utilidades de Row Span

u-row-span-1
u-row-span-2
u-row-span-3
u-row-span-4
u-row-span-5
u-row-span-6

Servicios de ordenación

u-orden-primero
u-orden-último

Tallas

Gap Utilities

u-gap-inherit
canaleta con espacio en U
u-gap-0
u-gap-1
u-gap-2
u-gap-3
u-gap-4
u-gap-5
u-gap-6
u-gap-7
u-gap-8

Herramientas para el espaciado entre filas

u-gap-row-inherit
u-gap-row-gutter
u-gap-row-0
u-gap-row-1
u-gap-row-2
u-gap-row-3
u-gap-row-4
u-gap-row-5
u-gap-row-6
u-gap-row-7
u-gap-row-8

Principales empresas de servicios públicos por margen

u-margin-top-auto
u-margin-top-gutter
u-margin-top-text
u-margin-top-0
u-margin-top-1
u-margin-top-2
u-margin-top-3
u-margin-top-4
u-margin-top-5
u-margin-top-6
u-margin-top-7
u-margin-top-8

Utilidades del margen inferior

u-margin-bottom-auto
u-margin-bottom-gutter
u-margin-bottom-text
u-margin-bottom-0
u-margin-bottom-1
u-margin-bottom-2
u-margin-bottom-3
u-margin-bottom-4
u-margin-bottom-5
u-margin-bottom-6
u-margin-bottom-7
u-margin-bottom-8

Utilidades de relleno

u-padding-sitemargin
u-espaciado-separador
u-padding-0
u-padding-1
u-padding-2
u-padding-3
u-padding-4
u-padding-5
u-padding-6
u-padding-7
u-padding-8
u-padding-small
u-padding-main
u-padding-large

Utilidades de bloques de relleno

u-padding-block-sitemargin
u-padding-block-gutter
u-padding-block-0
u-padding-block-1
u-padding-block-2
u-padding-block-3
u-padding-block-4
u-padding-block-5
u-padding-block-6
u-padding-block-7
u-padding-block-8
u-padding-block-small
u-padding-block-main
u-padding-block-large

Utilidades de relleno en línea

u-padding-inline-sitemargin
u-padding-inline-gutter
u-padding-inline-0
u-padding-inline-1
u-padding-inline-2
u-padding-inline-3
u-padding-inline-4
u-padding-inline-5
u-padding-inline-6
u-padding-inline-7
u-padding-inline-8

Principales utilidades de Padding Top

u-padding-top-sitemargin
u-padding-top-gutter
u-padding-top-0
u-padding-top-1
u-padding-top-2
u-padding-top-3
u-padding-top-4
u-padding-top-5
u-padding-top-6
u-padding-top-7
u-padding-top-8
u-padding-top-small
u-padding-top-main
u-padding-top-large
u-padding-top-pagetop

Funciones de relleno de la parte inferior

u-padding-bottom-sitemargin
u-padding-bottom-gutter
u-padding-bottom-0
u-padding-bottom-1
u-padding-bottom-2
u-padding-bottom-3
u-padding-bottom-4
u-padding-bottom-5
u-padding-bottom-6
u-padding-bottom-7
u-padding-bottom-8
u-padding-bottom-small
u-padding-bottom-main
u-padding-bottom-large
u-padding-bottom-pagetop

Utilidades de relleno a la izquierda

u-padding-left-sitemargin
u-padding-left-gutter
u-padding-left-0
u-padding-left-1
u-padding-left-2
u-padding-left-3
u-padding-left-4
u-padding-left-5
u-padding-left-6
u-padding-left-7
u-padding-left-8

Utilidades de relleno a la derecha

u-padding-right-sitemargin
u-padding-right-gutter
u-padding-right-0
u-padding-right-1
u-padding-right-2
u-padding-right-3
u-padding-right-4
u-padding-right-5
u-padding-right-6
u-padding-right-7
u-padding-right-8

Utilidades de radio de borde

u-radius-none
u-radius-inherit
u-radio-pequeño
u-radius-main
u-radio-redondeado

Herramientas para la relación de aspecto

u-ratio-auto
u-ratio-2-1
u-ratio-16-9
u-ratio-3-2
u-ratio-5-4
u-ratio-1-1
u-ratio-4-5
u-ratio-2-3

Varios

Utilidades de visualización

u-display-block
u-display-inline-block
u-display-inline-flex
u-display-inline-grid
u-display-inline
u-display-contents
u-display-none
u-hide-if-empty-cms

Utilidades de desbordamiento

u-overflow-visible
u-overflow-hidden
u-overflow-clip
u-overflow-x-auto
u-overflow-y-auto
u-overflow-hidden-left

Herramientas de Z-Index

u-índice-negativo
u-zindex-0
u-zindex-unset
u-índice-1
u-índice-2
u-índice-3

Servicios públicos de Position

u-position-static
u-position-relative
u-position-absolute
u-position-fixed
u-position-sticky

Element Utilities

u-grid-wrapper
u-grid
u-content-wrapper
u-image-wrapper
u-image
altura-u-completa
u-iframe-wrapper
u-iframe
u-overlay
u-eyebrow-{wrapper-layout-marker-text}
u-text
u-button-wrapper
u-video
u-svg
u-path
sección en U
u-container
u-container-small
u-container-full
u-embed-js
u-embed-css

Otras utilidades

u-width-auto
u-min-width-auto
u-max-width-none
u-max-width-full
u-width-full
altura-u-completa
altura-u-automática
u-text-trim-off
u-button-wrapper
u-margin-inline-auto
u-margin-trim
u-ignore-trim
u-pointer-on
u-pointer-off
u-object-fit-cover
u-object-fit-contain
altura mínima de la pantalla
u-cover
u-cover-absolute
solo para u-sr

Componentes

Botones