@penaprieto/design-system/dist/components/Image/Image.css

Multi-brand React design system with design tokens from Figma

/* Base Image */
.ds-image {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: var(--semantic-bg-surface-subtle);
  -webkit-font-smoothing: antialiased;
}

/* Image */
.ds-image__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fit */
.ds-image--cover .ds-image__img {
  object-fit: cover;
}

.ds-image--contain .ds-image__img {
  object-fit: contain;
}

.ds-image--fill .ds-image__img {
  object-fit: fill;
}

.ds-image--none .ds-image__img {
  object-fit: none;
}

/* Placeholder */
.ds-image__placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--semantic-bg-surface-subtle);
  animation: ds-image-pulse 1.5s ease-in-out infinite;
}

/* Fallback */
.ds-image__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--semantic-text-corp-secondary);
}

/* Animation */
@keyframes ds-image-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}