Elevación

La elevación es la distancia relativa entre dos superficies a lo largo del eje Z. En Oxygen esta elevación se representa (por defecto) a través del uso de sombras.

Escala de elevación para componentes

TokenElevaciónUsoEjemploValores sombrasCSS/SCSS
Elevación Base0Botones, checkboxes, link, etc.

0 0 2px 0 rgba(0, 0, 0, 0.1)

.rds-shadow-base
@include rds-shadow-base;
Elevación S02Tarjeta Reposo

0 0 2px 0 rgba(0, 0, 0, 0.1)

0 2px 4px 0 rgba(0, 0, 0, 0.2)

.rds-shadow-02
@include rds-shadow-02;
Elevación M04Tarjeta (hover), menu (desplegado), barra lateral (desplegada)

0 0 2px 0 rgba(0, 0, 0, 0.1)

0 4px 6px 0 rgba(0, 0, 0, 0.2)

.rds-shadow-04
@include rds-shadow-04;
Elevación L06Cards

0 8px 32px -16px rgba(0, 0, 0, 0.1)

.rds-shadow-06
@include rds-shadow-06;
Elevación Negative08Tab bar

0px 0px 2px (0,0,0, 0.10)

0px -4px 11px (0,0,0, 0.08)

Próximamente

Color

Conoce la guías que giran en torno al uso del color en los productos digitales de Repsol.

Grid

Descubre cómo estructurar contenido en la página.

Recursos

Descarga y accede a todos los materiales que necesitas para trabajar con el sistema de diseño.