conduction-components/src/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

.container {
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--nlportal-document-border-radius);
}

.image {
  height: var(--conduction-image-and-details-card-image-height);
}

.image > :first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  display: flex;
  flex-direction: column;
  padding-inline-start: var(--nlportal-space-inline-lg);
  padding-inline-end: var(--nlportal-space-inline-lg);
  padding-block-start: var(--nlportal-space-block-lg);
  padding-block-end: var(--nlportal-space-block-lg);
  border: var(--nlportal-document-border, 1px solid);
}

.content > *:not(:last-child) {
  margin-block-end: var(--nlportal-space-block-md);
}

.title {
  font-size: var(--denhaag-typography-scale-xl-font-size);
  font-weight: var(--conduction-image-and-details-card-title-font-weight);
}

.subHeader {
  color: var(--denhaag-color-grey-3);
  font-size: var(--denhaag-typography-scale-s-font-size);
}

.introduction {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(
    --conduction-image-and-details-card-introduction-lines-clamp
  );
  -webkit-box-orient: vertical;
}

.link {
  display: flex;
  justify-content: flex-end;
}