@conduction/components/lib/components/card/imageAndDetailsCard/ImageAndDetailsCard.module.css

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

:root {
  --conduction-image-and-details-card-image-height: 275px;
  --conduction-image-and-details-card-title-font-weight: bold;
  --conduction-image-and-details-card-introduction-lines-clamp: 3;
  --conduction-image-and-details-card-border: 1px solid var(--skeleton-color-grey-2);
  --conduction-image-and-details-icon-gap: 8px;
}

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

.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(--skeleton-size-md);
  padding-inline-end: var(--skeleton-size-md);
  padding-block-start: var(--skeleton-size-md);
  padding-block-end: var(--skeleton-size-md);
  border: var(--conduction-image-and-details-card-border);
  height: calc(
    100% - var(--conduction-image-and-details-card-image-height) - var(--skeleton-size-md) - var(--skeleton-size-md) - 2px
  ); /* height = 100% - imageHeight - padding - border */
}

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

.title {
  font-size: var(--skeleton-font-size-xl);
  font-weight: var(--skeleton-font-weight-bold);
}

.subHeader {
  color: var(--skeleton-color-grey-3);
  font-size: var(--skeleton-font-size-sm);
}

.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;
  margin-block-start: auto;
}

.icon {
  margin-inline-end: var(--conduction-image-and-details-icon-gap);
}